feat: [PE-819] Add landing page EYCA discount (#257)

* feat: Add landing page EYCA discount * fix: nullable field
pagopa · Dec 13, 2024 · 90a1fed · 90a1fed
1 parent 3b49f6f
commit 90a1fed
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 80 deletions.
diff --git a/src/components/Discounts/DiscountDetailRow.tsx b/src/components/Discounts/DiscountDetailRow.tsx
@@ -367,6 +367,20 @@ Props) => {
               label="EYCA"
               value={row.original.visibleOnEyca ? "Sì" : "No"}
             />
+            {row.original.eycaLandingPageUrl && (
+              <ProfileItem
+                label="Link EYCA"
+                value={
+                  <a
+                    href={row.original.eycaLandingPageUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {row.original.eycaLandingPageUrl}
+                  </a>
+                }
+              />
+            )}
           </tbody>
         </table>
         {agreement.state === "ApprovedAgreement" && getDiscountButtons(row)}

diff --git a/src/components/Form/CreateDiscountForm/CreateDiscountForm.tsx b/src/components/Form/CreateDiscountForm/CreateDiscountForm.tsx
@@ -42,7 +42,9 @@ const emptyInitialValues = {
   condition: "",
   condition_en: "",
   condition_de: "-",
-  staticCode: ""
+  staticCode: "",
+  visibleOnEyca: false,
+  eycaLandingPageUrl: undefined
 };
 
 /* eslint-disable sonarjs/cognitive-complexity */
@@ -126,6 +128,9 @@ const CreateDiscountForm = () => {
         );
         const newValues = {
           ...values,
+          visibleOnEyca: values.eycaLandingPageUrl
+            ? true
+            : values.visibleOnEyca,
           name: withNormalizedSpaces(values.name),
           name_en: withNormalizedSpaces(values.name_en),
           name_de: "-",
@@ -224,6 +229,7 @@ const CreateDiscountForm = () => {
                     ? "Lista di codici statici"
                     : "API"
                 }
+                isLandingPage={checkLanding}
                 formValues={values}
                 setFieldValue={setFieldValue}
               />

diff --git a/src/components/Form/CreateProfileForm/DiscountData/DiscountData.tsx b/src/components/Form/CreateProfileForm/DiscountData/DiscountData.tsx
@@ -412,6 +412,7 @@ const DiscountData = ({
                               ? "Lista di codici statici"
                               : "API"
                           }
+                          isLandingPage={checkLanding}
                           index={index}
                           formValues={values}
                           setFieldValue={setFieldValue}

diff --git a/src/components/Form/CreateProfileForm/DiscountData/EnrollToEyca.tsx b/src/components/Form/CreateProfileForm/DiscountData/EnrollToEyca.tsx
@@ -1,15 +1,14 @@
 import React, { useState } from "react";
 import { Field } from "formik";
 import { Button, FormGroup } from "design-react-kit";
-import { useSelector } from "react-redux";
 import { Label, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
 import FormField from "../../FormField";
-import { RootState } from "../../../../store/store";
-import { EntityType } from "../../../../api/generated";
+import CustomErrorMessage from "../../CustomErrorMessage";
 
 type Props = {
   isEycaSupported: boolean;
   discountOption: string;
+  isLandingPage?: boolean;
   index?: number;
   formValues?: any;
   setFieldValue?: any;
@@ -41,6 +40,7 @@ const EnrollToEyca = ({
   formValues,
   setFieldValue,
   isEycaSupported,
+  isLandingPage,
   discountOption
 }: Props) => {
   const hasIndex = index !== undefined;
@@ -51,6 +51,9 @@ const EnrollToEyca = ({
       : formValues.visibleOnEyca) ?? false
   );
 
+  const discountDetails =
+    index !== undefined ? formValues.discounts[index] : formValues;
+
   const openModal = (val: any) => {
     setCheckboxValue(val);
     setIsModalOpen(true);
@@ -64,82 +67,126 @@ const EnrollToEyca = ({
     setIsModalOpen(false);
   };
 
-  const entityType = useSelector(
-    (state: RootState) => state.agreement.value.entityType
-  );
+  if (!isLandingPage) {
+    return (
+      <>
+        <FormField
+          htmlFor={hasIndex ? `visibleOnEyca${index}` : "visibleOnEyca"}
+          isTitleHeading
+          title="Vuoi che questa opportunità sia visibile su EYCA?"
+          description={
+            isEycaSupported ? (
+              <>
+                Ti informiamo che se accetti il codice statico sarà pubblicato
+                anche sul portale del circuito EYCA. <br />
+                Per maggiori informazioni, consultare la{" "}
+                <a
+                  className="font-weight-semibold"
+                  href="https://docs.pagopa.it/carta-giovani-nazionale"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Documentazione tecnica
+                </a>
+              </>
+            ) : (
+              <>
+                La modalità {discountOption} non è al momento compatibile con
+                EYCA. <br /> Puoi comunque manifestare il tuo interesse ad
+                aderire e definire i dettagli con il Dipartimento in un secondo
+                momento.
+                <br /> Per maggiori informazioni, consultare la{" "}
+                <a
+                  className="font-weight-semibold"
+                  href="https://docs.pagopa.it/carta-giovani-nazionale"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Documentazione tecnica
+                </a>
+              </>
+            )
+          }
+        >
+          <FormGroup check tag="div" className="mt-4">
+            <Field
+              id={hasIndex ? `visibleOnEyca${index}` : "visibleOnEyca"}
+              name={
+                hasIndex ? `discounts[${index}].visibleOnEyca` : `visibleOnEyca`
+              }
+              type="checkbox"
+              onChange={(e: any) => {
+                const value = e.target.value === "true";
+                if (isEycaSupported || value) {
+                  setFieldValue(
+                    hasIndex
+                      ? `discounts[${index}].visibleOnEyca`
+                      : `visibleOnEyca`,
+                    !value
+                  );
+                  return;
+                }
+                openModal(!value);
+              }}
+            />
+            <Label
+              check
+              for={hasIndex ? `visibleOnEyca${index}` : "visibleOnEyca"}
+              tag="label"
+            >
+              Sì, voglio che questa opportunità sia valida anche per il circuito
+              EYCA
+            </Label>
+          </FormGroup>
+        </FormField>
+        <EycaAlertModal isOpen={isModalOpen} onClose={closeModal} />
+      </>
+    );
+  }
 
   return (
-    <>
-      <FormField
-        htmlFor={hasIndex ? `visibleOnEyca${index}` : "visibleOnEyca"}
-        isTitleHeading
-        title="Vuoi che questa opportunità sia visibile su EYCA?"
-        description={
-          isEycaSupported ? (
-            <>
-              Ti informiamo che se accetti il codice statico sarà pubblicato
-              anche sul portale del circuito EYCA. <br />
-              Per maggiori informazioni, consultare la{" "}
-              <a
-                className="font-weight-semibold"
-                href="https://docs.pagopa.it/carta-giovani-nazionale"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Documentazione tecnica
-              </a>
-            </>
-          ) : (
-            <>
-              La modalità {discountOption} non è al momento compatibile con
-              EYCA. <br /> Puoi comunque manifestare il tuo interesse ad aderire
-              e definire i dettagli con il Dipartimento in un secondo momento.
-              <br /> Per maggiori informazioni, consultare la{" "}
-              <a
-                className="font-weight-semibold"
-                href="https://docs.pagopa.it/carta-giovani-nazionale"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Documentazione tecnica
-              </a>
-            </>
-          )
-        }
-      >
-        <FormGroup check tag="div" className="mt-4">
-          <Field
-            id={hasIndex ? `visibleOnEyca${index}` : "visibleOnEyca"}
-            name={
-              hasIndex ? `discounts[${index}].visibleOnEyca` : `visibleOnEyca`
-            }
-            type="checkbox"
-            onChange={(e: any) => {
-              const value = e.target.value === "true";
-              if (isEycaSupported || value) {
-                setFieldValue(
-                  hasIndex
-                    ? `discounts[${index}].visibleOnEyca`
-                    : `visibleOnEyca`,
-                  !value
-                );
-                return;
-              }
-              openModal(!value);
-            }}
-          />
-          <Label
-            check
-            for={hasIndex ? `visibleOnEyca${index}` : "visibleOnEyca"}
-            tag="label"
+    <FormField
+      htmlFor={hasIndex ? `eycaLandingPageUrl${index}` : "eycaLandingPageUrl"}
+      isTitleHeading
+      title="Vuoi che questa opportunità sia visibile su EYCA?"
+      description={
+        <>
+          Se vuoi che questa opportunità sia visibile anche sul portale di EYCA,
+          ti consigliamo di inserire una URL della landing page in inglese da
+          cui potranno accedere esclusivamente i beneficiari di EYCA. Per
+          maggiori informazioni, consulta la{" "}
+          <a
+            className="font-weight-semibold"
+            href="https://docs.pagopa.it/carta-giovani-nazionale"
+            target="_blank"
+            rel="noreferrer"
           >
-            Sì, voglio che questa opportunità sia valida anche per il circuito
-            EYCA
-          </Label>
-        </FormGroup>
-      </FormField>
-      <EycaAlertModal isOpen={isModalOpen} onClose={closeModal} />
-    </>
+            Documentazione tecnica
+          </a>
+          .
+        </>
+      }
+    >
+      <FormGroup check tag="div" className="mt-4">
+        <Field
+          id="eycaLandingPageUrl"
+          name={
+            hasIndex
+              ? `discounts[${index}].eycaLandingPageUrl`
+              : "eycaLandingPageUrl"
+          }
+          placeholder="Inserisci indirizzo (completo di protocollo http o https)"
+          type="text"
+        />
+        <CustomErrorMessage
+          name={
+            hasIndex
+              ? `discounts[${index}].eycaLandingPageUrl`
+              : "eycaLandingPageUrl"
+          }
+        />
+      </FormGroup>
+    </FormField>
   );
 };
 

diff --git a/src/components/Form/EditDiscountForm/EditDiscountForm.tsx b/src/components/Form/EditDiscountForm/EditDiscountForm.tsx
@@ -46,7 +46,9 @@ const emptyInitialValues = {
   condition: "",
   condition_en: "",
   condition_de: "-",
-  staticCode: ""
+  staticCode: "",
+  visibleOnEyca: false,
+  eycaLandingPageUrl: undefined
 };
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -206,6 +208,9 @@ const EditDiscountForm = () => {
           );
           const newValues = {
             ...values,
+            visibleOnEyca: values.eycaLandingPageUrl
+              ? true
+              : values.visibleOnEyca,
             name: withNormalizedSpaces(values.name),
             name_en: withNormalizedSpaces(values.name_en),
             name_de: "-",
@@ -307,6 +312,7 @@ const EditDiscountForm = () => {
                       ? "Lista di codici statici"
                       : "API"
                   }
+                  isLandingPage={checkLanding}
                   formValues={values}
                   setFieldValue={setFieldValue}
                 />

diff --git a/src/components/Form/ValidationSchemas.ts b/src/components/Form/ValidationSchemas.ts
@@ -124,6 +124,22 @@ export const ProfileDataValidationSchema = Yup.object().shape({
   })
 });
 
+/**
+ * Check if Eyca Landing Page URL is different from Discount URL
+ */
+export const checkEycaLandingDifferentFromLandingPageUrl = (
+  landingPageUrl: string,
+  schema: any
+) => {
+  if (landingPageUrl) {
+    return schema.notOneOf(
+      [landingPageUrl],
+      "L'url della EYCA non può essere uguale all'url della landing page"
+    );
+  }
+  return schema;
+};
+
 export const discountDataValidationSchema = (
   staticCheck: boolean,
   landingCheck?: boolean,
@@ -210,7 +226,11 @@ export const discountDataValidationSchema = (
         then: Yup.string().required(REQUIRED_FIELD),
         otherwise: Yup.string()
       }),
-      visibleOnEyca: Yup.boolean()
+      visibleOnEyca: Yup.boolean(),
+      eycaLandingPageUrl: Yup.string()
+        .nullable()
+        .matches(URL_REGEXP, INCORRECT_WEBSITE_URL)
+        .when("landingPageUrl", checkEycaLandingDifferentFromLandingPageUrl)
     },
     [
       ["description", "description_en"],
@@ -305,7 +325,11 @@ export const discountsListDataValidationSchema = (
             then: Yup.string().required(REQUIRED_FIELD),
             otherwise: Yup.string()
           }),
-          visibleOnEyca: Yup.boolean()
+          visibleOnEyca: Yup.boolean(),
+          eycaLandingPageUrl: Yup.string()
+            .nullable()
+            .matches(URL_REGEXP, INCORRECT_WEBSITE_URL)
+            .when("landingPageUrl", checkEycaLandingDifferentFromLandingPageUrl)
         },
         [
           ["description", "description_en"],

diff --git a/src/components/OperatorConvention/Discount.tsx b/src/components/OperatorConvention/Discount.tsx
@@ -230,6 +230,20 @@ const Discount = ({
         value={format(new Date(discount.lastUpateDate), "dd/MM/yyyy")}
       />
       <Item label="EYCA" value={discount.visibleOnEyca ? "Sì" : "No"} />
+      {discount.eycaLandingPageUrl && (
+        <Item
+          label="Link EYCA"
+          value={
+            <a
+              href={discount.eycaLandingPageUrl}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {discount.eycaLandingPageUrl}
+            </a>
+          }
+        />
+      )}
       {suspendMode ? (
         <div className="mt-10">
           <h6 className="text-gray">Aggiungi una nota</h6>