-
Notifications
You must be signed in to change notification settings - Fork 0
Manage multiple cta in service create update #1363
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
dcaccamo3ainformatica
wants to merge
31
commits into
master
Choose a base branch
from
feats/manage-multiple-cta-in-service-create-update
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 25 commits
Commits
Show all changes
31 commits
Select commit
Hold shift + click to select a range
8856cd6
changeset
dcaccamo3ainformatica e1040c1
This feature allows us to manage dual CTAs when creating/editing a se…
dcaccamo3ainformatica 696bda1
clean dirty code
dcaccamo3ainformatica 86a85bf
cleaned code and restored test adparters
dcaccamo3ainformatica a788665
create component cta-manager and add new test case
dcaccamo3ainformatica 7f46072
rename a const in cta manager
dcaccamo3ainformatica 5458e35
clean commented line
dcaccamo3ainformatica 35b826d
The second CTA will be inserted into a single button block with a link.
dcaccamo3ainformatica 6085977
update some const name
dcaccamo3ainformatica fb8f046
adding markdown parsing on form step section wrapper and service extr…
dcaccamo3ainformatica 8d18988
add missing markdown text on common.json en
dcaccamo3ainformatica 14240eb
add Box for insert cta2_section and fix alignment
dcaccamo3ainformatica 02f8204
removed unnecessary check and fix some bug about <p> nested
dcaccamo3ainformatica 4bd1d91
create component button add remove
dcaccamo3ainformatica a94705a
improved code readability
dcaccamo3ainformatica 3531379
improved code readability and cleanliness
dcaccamo3ainformatica 573d444
Improved code readability in adapters
dcaccamo3ainformatica 1333e39
improvement of the cta object construction function
dcaccamo3ainformatica d6fef96
renamed a const
dcaccamo3ainformatica e0e85fe
created constants.ts and improvement on add and remove secondary cta
dcaccamo3ainformatica ffc5eb5
fixed build fail problem
dcaccamo3ainformatica 082826d
improved readability and code cleanliness
dcaccamo3ainformatica a8a0e6a
improvement of logic and names
dcaccamo3ainformatica 38049c3
logic improvements
dcaccamo3ainformatica 01a4a71
deleted border rule on banner
dcaccamo3ainformatica 4f7c2a4
unnecessary ternary operators removed
dcaccamo3ainformatica bd79f3c
updated graphical interface after design review
dcaccamo3ainformatica 6b12c2f
updated email support with a placeholder
dcaccamo3ainformatica e63f51a
restored banner element
dcaccamo3ainformatica 3e4a732
'added official mail support for double CTA'S
dcaccamo3ainformatica 94e83a2
removal of markdown parsing from the form-step-section-wrapper component
dcaccamo3ainformatica File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "io-services-cms-backoffice": minor | ||
| --- | ||
|
|
||
| Added secondary CTA and improved CTA management for created/modified services |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
apps/backoffice/src/components/buttons/button-add-remove.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { AddCircleOutline, RemoveCircleOutline } from "@mui/icons-material"; | ||
| import { Button, Grid } from "@mui/material"; | ||
| import React from "react"; | ||
|
|
||
| export interface ButtonAddRemoveRowProps { | ||
| addLabel: string; | ||
| isRemoveActionVisible?: boolean; | ||
| onAdd?: () => void; | ||
| onRemove?: () => void; | ||
| removeLabel: string; | ||
| } | ||
|
|
||
| export const ButtonAddRemove: React.FC<ButtonAddRemoveRowProps> = ({ | ||
| addLabel, | ||
| isRemoveActionVisible = false, | ||
| onAdd, | ||
| onRemove, | ||
| removeLabel, | ||
| }) => ( | ||
| <Grid item md={6} xs={12}> | ||
| {isRemoveActionVisible ? ( | ||
| <Button | ||
| color="error" | ||
| onClick={onRemove} | ||
| startIcon={<RemoveCircleOutline />} | ||
| variant="text" | ||
| > | ||
| {removeLabel} | ||
| </Button> | ||
| ) : ( | ||
| <Button | ||
| color="primary" | ||
| onClick={onAdd} | ||
| startIcon={<AddCircleOutline />} | ||
| variant="text" | ||
| > | ||
| {addLabel} | ||
| </Button> | ||
| )} | ||
| </Grid> | ||
| ); | ||
|
|
||
| export default ButtonAddRemove; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import type { TFunction } from "i18next"; | ||
|
|
||
| export const CTA_PREFIX_URL_SCHEMES = { | ||
| EXTERNAL: "iohandledlink://", | ||
| INTERNAL: "ioit://", | ||
| SSO: "iosso://", | ||
| } as const; | ||
|
|
||
| export const URL_PREFIX_REGEX = /^(iosso:\/\/|ioit:\/\/|iohandledlink:\/\/)/; | ||
|
|
||
| // default cta | ||
| export const DEFAULT_CTA = { | ||
| text: "", | ||
| url: "", | ||
| urlPrefix: "", | ||
| } as const; | ||
|
|
||
| export const CTA_KIND_SELECT_ITEMS = (t: TFunction) => [ | ||
| { | ||
| label: t("forms.service.extraConfig.cta.form.externalLink"), | ||
| value: CTA_PREFIX_URL_SCHEMES.EXTERNAL, | ||
| }, | ||
| { | ||
| label: t("forms.service.extraConfig.cta.form.singleSignOn"), | ||
| value: CTA_PREFIX_URL_SCHEMES.SSO, | ||
| }, | ||
| { | ||
| label: t("forms.service.extraConfig.cta.form.internalLink"), | ||
| value: CTA_PREFIX_URL_SCHEMES.INTERNAL, | ||
| }, | ||
| ]; |
137 changes: 137 additions & 0 deletions
137
apps/backoffice/src/components/cta-manager/service-cta-manager.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import { Banner } from "@/components/banner"; | ||
| import { FormStepSectionWrapper } from "@/components/forms"; | ||
| import { | ||
| SelectController, | ||
| TextFieldController, | ||
| UrlFieldController, | ||
| } from "@/components/forms/controllers"; | ||
| import { Link, ReportProblemRounded } from "@mui/icons-material"; | ||
| import { Box, Divider, Grid } from "@mui/material"; | ||
| import { useTranslation } from "next-i18next"; | ||
| import React from "react"; | ||
| import { useFormContext } from "react-hook-form"; | ||
|
|
||
| import ButtonAddRemove from "../buttons/button-add-remove"; | ||
| import { CTA_KIND_SELECT_ITEMS, CTA_PREFIX_URL_SCHEMES } from "./constants"; | ||
|
|
||
| export const ServiceCtaManager: React.FC = () => { | ||
| const { t } = useTranslation(); | ||
| const { setValue, watch } = useFormContext(); | ||
|
|
||
| const cta2UrlPrefixValue = watch("metadata.cta.cta_2.urlPrefix"); | ||
| const isRemoveActionVisible = cta2UrlPrefixValue !== "" ? true : false; | ||
| const selectItems = CTA_KIND_SELECT_ITEMS(t); | ||
|
|
||
| const renderCtaSection = (slot: "cta_1" | "cta_2") => { | ||
| //let us observe the value of the select stored referring to the current slot | ||
| const kind = watch(`metadata.cta.${slot}.urlPrefix`); | ||
| const showAddRemove = !(isRemoveActionVisible && slot === "cta_1"); | ||
|
|
||
| return ( | ||
| <> | ||
| <Grid columnSpacing={2} container rowSpacing={1}> | ||
| <Grid item md={6} xs={12}> | ||
| <SelectController | ||
| displayEmpty | ||
| helperText={ | ||
| kind === CTA_PREFIX_URL_SCHEMES.INTERNAL ? ( | ||
| <span | ||
| dangerouslySetInnerHTML={{ | ||
| __html: t("forms.service.metadata.cta.text.helperText"), | ||
| }} | ||
| /> | ||
| ) : undefined | ||
| } | ||
| items={selectItems} | ||
| label={t("forms.service.extraConfig.cta.form.selectLabel")} | ||
| name={`metadata.cta.${slot}.urlPrefix`} | ||
| /> | ||
| </Grid> | ||
|
|
||
| <Grid item md={6} xs={12} /> | ||
|
|
||
| {kind === CTA_PREFIX_URL_SCHEMES.SSO && ( | ||
| <Grid item xs={12}> | ||
| <Banner | ||
| description={t( | ||
| "forms.service.extraConfig.cta.form.btnWithLink.alertSingleSignOn", | ||
| )} | ||
| icon={<ReportProblemRounded />} | ||
| severity="warning" | ||
| /> | ||
| </Grid> | ||
| )} | ||
|
|
||
| <Grid item md={6} xs={12}> | ||
| <TextFieldController | ||
| label={t("forms.service.metadata.cta.text.label")} | ||
| name={`metadata.cta.${slot}.text`} | ||
| placeholder={t("forms.service.metadata.cta.text.placeholder")} | ||
| /> | ||
| </Grid> | ||
|
|
||
| <Grid item md={6} xs={12}> | ||
| <UrlFieldController | ||
| hideCheckUrl={ | ||
| kind !== CTA_PREFIX_URL_SCHEMES.EXTERNAL ? true : false | ||
| } | ||
| label={ | ||
| kind === CTA_PREFIX_URL_SCHEMES.INTERNAL | ||
| ? t("forms.service.metadata.cta.url.labelInternal") | ||
| : t("forms.service.metadata.cta.url.label") | ||
| } | ||
| name={`metadata.cta.${slot}.url`} | ||
| placeholder={t("forms.service.metadata.cta.url.placeholder")} | ||
| /> | ||
| </Grid> | ||
| {showAddRemove && ( | ||
| <ButtonAddRemove | ||
| addLabel={t("forms.service.extraConfig.cta.addSecondaryButton")} | ||
| isRemoveActionVisible={isRemoveActionVisible} | ||
| onAdd={addSecondaryCta} | ||
| onRemove={removeSecondaryCta} | ||
| removeLabel={t( | ||
| "forms.service.extraConfig.cta.removeSecondaryButton", | ||
| )} | ||
| /> | ||
| )} | ||
| </Grid> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const configureDefaultDataSecondaryCta = (isActionAddEnable: boolean) => { | ||
| setValue( | ||
| "metadata.cta.cta_2", | ||
| { | ||
| text: "", | ||
| url: "", | ||
| urlPrefix: isActionAddEnable ? CTA_PREFIX_URL_SCHEMES.EXTERNAL : "", | ||
| }, | ||
| { shouldDirty: true, shouldValidate: true }, | ||
| ); | ||
| }; | ||
|
|
||
| const addSecondaryCta = () => configureDefaultDataSecondaryCta(true); | ||
| const removeSecondaryCta = () => configureDefaultDataSecondaryCta(false); | ||
|
|
||
| return ( | ||
| <Box> | ||
| <FormStepSectionWrapper | ||
| description={t("forms.service.extraConfig.cta.description")} | ||
| icon={<Link />} | ||
| title={t("forms.service.extraConfig.cta.label")} | ||
| > | ||
| {renderCtaSection("cta_1")} | ||
| {cta2UrlPrefixValue !== "" ? ( | ||
| <Box mt={2}> | ||
| <Divider /> | ||
| <Box mt={1}>{renderCtaSection("cta_2")}</Box> | ||
| </Box> | ||
| ) : null} | ||
| </FormStepSectionWrapper> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default ServiceCtaManager; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also here:
cta2UrlPrefixValue !== ""it's enought, is yet a boolean result.There's no need to use the ternary operator.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
4f7c2a4