Manage multiple cta in service create update

.changeset/nasty-teachers-flash.md

@@ -0,0 +1,5 @@
+---
+"io-services-cms-backoffice": minor
+---
+
+Added secondary CTA and improved CTA management for created/modified services

apps/backoffice/mocks/data/backend-data.ts

@@ -1,4 +1,5 @@
 /* eslint-disable no-useless-escape */
+import { CTA_PREFIX_URL_SCHEMES } from "@/components/cta-manager/constants";
 import { Cidr } from "@/generated/api/Cidr";
 import { ManageKeyCIDRs } from "@/generated/api/ManageKeyCIDRs";
 import {
@@ -94,19 +95,29 @@ export const aMockServiceTopicsArray = [
 
 export const aMockServiceCTASingle = `---\nit:\n  cta_1: \n    text: \"${faker.lorem.words(
   2,
-)}\"\n    action: \"iohandledlink://${faker.internet.url()}\"\nen:\n  cta_1: \n    text: \"${faker.lorem.words(
+)}\"\n    action: \"${CTA_PREFIX_URL_SCHEMES.EXTERNAL}${faker.internet.url()}\"\nen:\n  cta_1: \n    text: \"${faker.lorem.words(
   2,
-)}\"\n    action: \"iohandledlink://${faker.internet.url()}\"\n---`;
+)}\"\n    action: \"${CTA_PREFIX_URL_SCHEMES.EXTERNAL}${faker.internet.url()}\"\n---`;
 
 export const aMockServiceCTADouble = `---\nit:\n  cta_1: \n    text: \"${faker.lorem.words(
   2,
-)}\"\n    action: \"iohandledlink://${faker.internet.url()}"\n  cta_2: \n    text: \"${faker.lorem.words(
+)}\"\n    action: \"${CTA_PREFIX_URL_SCHEMES.EXTERNAL}${faker.internet.url()}"\n  cta_2: \n    text: \"${faker.lorem.words(
   2,
-)}\"\n    action: \"iohandledlink://${faker.internet.url()}\"\nen:\n  cta_1: \n    text: \"${faker.lorem.words(
+)}\"\n    action: \"${CTA_PREFIX_URL_SCHEMES.EXTERNAL}${faker.internet.url()}\"\nen:\n  cta_1: \n    text: \"${faker.lorem.words(
   2,
-)}\"\n    action: \"iohandledlink://${faker.internet.url()}\"\n  cta_2: \n    text: \"${faker.lorem.words(
+)}\"\n    action: \"${CTA_PREFIX_URL_SCHEMES.EXTERNAL}${faker.internet.url()}\"\n  cta_2: \n    text: \"${faker.lorem.words(
   2,
-)}\"\n    action: \"iohandledlink://${faker.internet.url()}\"\n---`;
+)}\"\n    action: \"${CTA_PREFIX_URL_SCHEMES.EXTERNAL}${faker.internet.url()}\"\n---`;
+
+export const aMockServiceCTADoubleDifferentLink = `---\nit:\n  cta_1: \n    text: \"${faker.lorem.words(
+  2,
+)}\"\n    action: \"${CTA_PREFIX_URL_SCHEMES.INTERNAL}${faker.internet.url()}"\n  cta_2: \n    text: \"${faker.lorem.words(
+  2,
+)}\"\n    action: \"${CTA_PREFIX_URL_SCHEMES.SSO}${faker.internet.url()}\"\nen:\n  cta_1: \n    text: \"${faker.lorem.words(
+  2,
+)}\"\n    action: \"${CTA_PREFIX_URL_SCHEMES.INTERNAL}${faker.internet.url()}\"\n  cta_2: \n    text: \"${faker.lorem.words(
+  2,
+)}\"\n    action: \"${CTA_PREFIX_URL_SCHEMES.SSO}${faker.internet.url()}\"\n---`;
 
 export const getMockServiceLifecycle = (serviceId?: string) => ({
   authorized_cidrs: [
@@ -139,7 +150,7 @@ export const getMockServiceLifecycle = (serviceId?: string) => ({
     category: faker.helpers.arrayElement(["SPECIAL", "STANDARD"]),
     cta: faker.helpers.arrayElement([
       aMockServiceCTASingle,
-      aMockServiceCTADouble,
+      aMockServiceCTADoubleDifferentLink,
       undefined,
     ]),
     custom_special_flow: faker.lorem.slug(1),

apps/backoffice/public/locales/en/common.json

@@ -142,8 +142,20 @@
         "description": "These features allow you to enrich the service with many additional parameters. Some of these require the signing of an ad hoc contract.",
         "arriving": "Arriving",
         "cta": {
-          "label": "Button with external link",
-          "description": "Add a button that takes you to a web page with more information about the service."
+          "label": "Button with link",
+          "description": "Add one or two buttons to the service tab to direct citizens to an external link, an internal link, or directly to a post-login area thanks to Single Sign-On.",
+          "addSecondaryButton": "add secondary button",
+          "removeSecondaryButton": "remove secondary button",
+          "form": {
+            "selectLabel": "Button type",
+            "externalLink": "External link to the app",
+            "singleSignOn": "Single Sign-on Link",
+            "internalLink": "Internal link within the app (deeplink)",
+            "placeholder": "",
+            "btnWithLink": {
+              "alertSingleSignOn": "To enable the button with links in Single Sign-On, you must have completed the integration within the institution's systems. For further information, please contact our  [support](mailto:io‑service‑[email protected])"
+            }
+          }
         },
         "fims": {
           "label": "FIMS Protocol",
@@ -180,6 +192,7 @@
           "url": {
             "helperText": "",
             "label": "External URL",
+            "labelInternal": "internal URL",
             "placeholder": ""
           }
         },
@@ -673,4 +686,4 @@
     }
   },
   "undefined": "Not defined"
-}
+}

apps/backoffice/public/locales/it/common.json

@@ -142,8 +142,20 @@
         "description": "Queste funzionalità ti permettono di arricchire il servizio con tanti parametri aggiuntivi. Alcuni di questi richiedono la firma di un contratto ad hoc.",
         "arriving": "In arrivo",
         "cta": {
-          "label": "Pulsante con link esterno",
-          "description": "Aggiungi un pulsante che rimanda ad una pagina web con più informazioni sul servizio."
+          "label": "Pulsante con link",
+          "description": "Aggiungi uno o due pulsanti alla scheda servizio, per inidirizzare il cittadino ad un link esterno, interno o direttamente ad un’area di post-login grazie al Single Sign-On.",
+          "addSecondaryButton": "aggiungi pulsante secondario",
+          "removeSecondaryButton": "rimuovi pulsante secondario",
+          "form": {
+            "selectLabel": "Tipo di pulsante",
+            "externalLink": "Link esterno all'app",
+            "singleSignOn": "Link in Single Sign-on",
+            "internalLink": "Link interno all'app (deeplink)",
+            "placeholder": "",
+            "btnWithLink": {
+              "alertSingleSignOn": "Per abilitare il pulsante con link in Single Sign-On, è necessario aver completato l'integrazione all'interno dei sistemi dell'ente. Per ulteriori informazioni, ti invitiamo a contattare il nostro  [supporto](mailto:io‑service‑[email protected])"
+            }
+          }
         },
         "fims": {
           "label": "Protocollo FIMS",
@@ -180,6 +192,7 @@
           "url": {
             "helperText": "",
             "label": "URL esterna",
+            "labelInternal": "URL interna",
             "placeholder": ""
           }
         },
@@ -673,4 +686,4 @@
     }
   },
   "undefined": "Non definito"
-}
+}

apps/backoffice/src/components/buttons/button-add-remove.tsx

@@ -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;

apps/backoffice/src/components/cta-manager/constants.ts

@@ -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,
+  },
+];

apps/backoffice/src/components/cta-manager/service-cta-manager.tsx

@@ -0,0 +1,125 @@
+import { Banner } from "@/components/banner";
+import { FormStepSectionWrapper } from "@/components/forms";
+import {
+  SelectController,
+  TextFieldController,
+  UrlFieldController,
+} from "@/components/forms/controllers";
+import { Link } 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 !== "";
+  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
+              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",
+                )}
+                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}
+              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;

apps/backoffice/src/components/forms/controllers/url-field-controller.tsx

@@ -6,11 +6,13 @@ import { useTranslation } from "next-i18next";
 import { Controller, get, useFormContext } from "react-hook-form";
 
 export type UrlFieldControllerProps = {
+  hideCheckUrl?: boolean;
   name: string;
 } & TextFieldProps;
 
 /** Controller for MUI `TextField` component enhanced with url type check and a "Try URL" action button. */
 export function UrlFieldController({
+  hideCheckUrl = false,
   name,
   ...props
 }: UrlFieldControllerProps) {
@@ -49,17 +51,19 @@ export function UrlFieldController({
               value={value}
             />
           </Grid>
-          <Grid item xs="auto">
-            <ButtonNaked
-              color="primary"
-              disabled={value ? value.length === 0 : true}
-              onClick={() => window.open(value, "_blank")}
-              size="large"
-              startIcon={<OpenInNew />}
-            >
-              {t("forms.testUrl")}
-            </ButtonNaked>
-          </Grid>
+          {!hideCheckUrl && (
+            <Grid item xs="auto">
+              <ButtonNaked
+                color="primary"
+                disabled={value ? value.length === 0 : true}
+                onClick={() => window.open(value, "_blank")}
+                size="large"
+                startIcon={<OpenInNew />}
+              >
+                {t("forms.testUrl")}
+              </ButtonNaked>
+            </Grid>
+          )}
         </Grid>
       )}
     />