feat: extend description mode with list and instruction properties (#420

) * Rename modal description property. * Remove unused import. * Extend description modal with the properties instruction and bullet points. * Update content style of description modal. * Add translations. * Update src/translations/pages/contact.ts Co-authored-by: Adrian Santana Berg <adrian_berg96@hotmail.com> * Rewrite DescriptionModalProps to increase readability of input params. * Update src/translations/pages/contact.ts Co-authored-by: Adrian Santana Berg <adrian_berg96@hotmail.com> * Remove exessive wildcard. * Import description modal directly. Also, remove the index export as the modal should only be an option in then Input component. * Update type of bullet points in description modal * Add help function to verify whether any of the properties in modalContent is provided. * Solve error after merge conflict. * Update src/translations/pages/contact.ts Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com> --------- Co-authored-by: Adrian Santana Berg <adrian_berg96@hotmail.com> Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>
AtB-AS · Nov 14, 2024 · e432159 · e432159
1 parent 83f6535
commit e432159
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 40 deletions.
diff --git a/src/page-modules/contact/components/form/description-modal.tsx b/src/page-modules/contact/components/form/description-modal.tsx
@@ -9,19 +9,24 @@ import { PageText, useTranslation } from '@atb/translations';
 
 type DescriptionModalProps = {
   title: string;
-  description: string;
+  modalContent: {
+    description?: string;
+    instruction?: string;
+    bulletPoints?: string[];
+  };
   isModalOpen: boolean;
   closeModal: () => void;
 };
 
 const DescriptionModal = ({
   title,
-  description,
+  modalContent,
   isModalOpen,
   closeModal,
 }: DescriptionModalProps) => {
   const { t } = useTranslation();
   const modalRef = useRef<HTMLDivElement | null>(null);
+  const { description, instruction, bulletPoints } = modalContent;
 
   const handleEscapeOrClickOutside = (event: KeyboardEvent | MouseEvent) => {
     if (event instanceof KeyboardEvent && event.key === 'Escape') {
@@ -84,7 +89,26 @@ const DescriptionModal = ({
                 }}
               />
             </div>
-            <Typo.p textType="body__primary">{description}</Typo.p>
+
+            {description && (
+              <Typo.p textType="body__primary">{description}</Typo.p>
+            )}
+
+            {bulletPoints && (
+              <ul className={style.modal__rules_list}>
+                {bulletPoints.map((desc, index) => (
+                  <li key={index}>
+                    <Typo.p textType="body__primary" key={index}>
+                      {desc}
+                    </Typo.p>
+                  </li>
+                ))}
+              </ul>
+            )}
+
+            {instruction && (
+              <Typo.p textType="body__primary--bold">{instruction}</Typo.p>
+            )}
           </dialog>
         </motion.div>
       </FocusScope>

diff --git a/src/page-modules/contact/components/form/form.module.css b/src/page-modules/contact/components/form/form.module.css
@@ -317,9 +317,10 @@
 }
 
 .modal_content {
+  position: relative;
   display: flex;
   flex-direction: column;
-  max-width: 22.5rem;
+  max-width: 32rem;
   padding: var(--spacings-large);
   border: var(--border-width-medium) solid
     var(--interactive-interactive_2-outline-background); /* Use border property */
@@ -328,18 +329,26 @@
   color: var(--static-background-background_0-text);
   background-color: var(--static-background-background_0-background);
   border-radius: var(--border-radius-regular);
-  position: relative;
 }
 
 .modal_content > * + * {
-  margin-top: var(--spacings-large);
+  margin-top: var(--spacings-small);
 }
 
 .modal_header {
   display: flex;
   justify-content: space-between;
 }
 
+.modal__rules_list {
+  padding: var(--spacings-medium);
+  padding-left: var(--spacings-xLarge);
+}
+
+.modal__rules_list > li {
+  padding: var(--spacings-xSmall) 0;
+}
+
 /* select and searchable-select*/
 .select__select_container,
 .searchable_select__comboBox {

diff --git a/src/page-modules/contact/components/form/index.ts b/src/page-modules/contact/components/form/index.ts
@@ -1,5 +1,4 @@
 export { default as Checkbox } from './checkbox';
-export { default as DescriptionModal } from './description-modal';
 export { default as ErrorMessage } from './error-message';
 export { default as FileInput } from './file-input';
 export { default as Input } from './input';

diff --git a/src/page-modules/contact/components/form/input.tsx b/src/page-modules/contact/components/form/input.tsx
@@ -4,13 +4,17 @@ import { PageText, TranslatedString, useTranslation } from '@atb/translations';
 import { andIf } from '@atb/utils/css';
 import { Typo } from '@atb/components/typography';
 import ErrorMessage from './error-message';
-import DescriptionModal from './description-modal';
 import { MonoIcon } from '@atb/components/icon';
 import { Button } from '@atb/components/button';
+import DescriptionModal from './description-modal';
 
 type InputProps = {
   label: string;
-  description?: string;
+  modalContent?: {
+    description?: string;
+    instruction?: string;
+    bulletPoints?: string[];
+  };
   errorMessage?: TranslatedString;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 } & JSX.IntrinsicElements['input'];
@@ -22,14 +26,14 @@ export const Input = ({
   name,
   checked,
   value,
-  description,
+  modalContent,
   disabled,
   onChange,
 }: InputProps) => {
   const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const displayDescriptionModal = description && isModalOpen; // Condition to avoid rendering of useEffect inside DescriptionModal before opened.
-
+  const isModalContentProvided = hasModalContent(modalContent);
+  const displayDescriptionModal = isModalOpen && isModalContentProvided;
   const toggleModalState = () => {
     setIsModalOpen(!isModalOpen);
   };
@@ -51,7 +55,7 @@ export const Input = ({
           </Typo.span>
         </label>
 
-        {description && (
+        {isModalContentProvided && (
           <Button
             className={style.iconButton}
             onClick={toggleModalState}
@@ -81,7 +85,7 @@ export const Input = ({
       {displayDescriptionModal && (
         <DescriptionModal
           title={label}
-          description={description}
+          modalContent={modalContent || {}}
           isModalOpen={isModalOpen}
           closeModal={toggleModalState}
         />
@@ -91,3 +95,16 @@ export const Input = ({
 };
 
 export default Input;
+
+function hasModalContent(content?: {
+  description?: string;
+  instruction?: string;
+  bulletPoints?: string[];
+}): boolean {
+  return !!(
+    content &&
+    (content.description ||
+      content.instruction ||
+      (content.bulletPoints && content.bulletPoints?.length > 0))
+  );
+}
diff --git a/src/page-modules/contact/components/index.tsx b/src/page-modules/contact/components/index.tsx
@@ -1,6 +1,5 @@
 export {
   Checkbox,
-  DescriptionModal,
   ErrorMessage,
   FileInput,
   Input,

diff --git a/src/page-modules/contact/ticket-control/forms/feeComplaintForm.tsx b/src/page-modules/contact/ticket-control/forms/feeComplaintForm.tsx
@@ -116,7 +116,6 @@ const FormContent = ({ state, send }: FormProps) => {
           type="text"
           name="feeNumber"
           value={state.context.feeNumber || ''}
-          description={t(PageText.Contact.input.feeNumber.description)}
           errorMessage={state.context?.errorMessages['feeNumber']?.[0]}
           onChange={(e) =>
             send({
@@ -125,6 +124,9 @@ const FormContent = ({ state, send }: FormProps) => {
               value: e.target.value,
             })
           }
+          modalContent={{
+            description: t(PageText.Contact.input.feeNumber.description),
+          }}
         />
 
         <Typo.h3 textType="heading__component">

diff --git a/src/page-modules/contact/ticket-control/forms/postponePayment.tsx b/src/page-modules/contact/ticket-control/forms/postponePayment.tsx
@@ -29,7 +29,6 @@ export const PostponePaymentForm = ({
           type="text"
           name="feeNumber"
           value={state.context.feeNumber || ''}
-          description={t(PageText.Contact.input.feeNumber.description)}
           errorMessage={state.context?.errorMessages['feeNumber']?.[0]}
           onChange={(e) =>
             send({
@@ -38,14 +37,16 @@ export const PostponePaymentForm = ({
               value: e.target.value,
             })
           }
+          modalContent={{
+            description: t(PageText.Contact.input.feeNumber.description),
+          }}
         />
 
         <Input
           label={t(PageText.Contact.input.invoiceNumber.label)}
           type="text"
           name="invoiceNumber"
           value={state.context.invoiceNumber || ''}
-          description={t(PageText.Contact.input.invoiceNumber.description)}
           errorMessage={state.context?.errorMessages['invoiceNumber']?.[0]}
           onChange={(e) =>
             send({
@@ -54,6 +55,9 @@ export const PostponePaymentForm = ({
               value: e.target.value,
             })
           }
+          modalContent={{
+            description: t(PageText.Contact.input.invoiceNumber.description),
+          }}
         />
       </SectionCard>
       <SectionCard title={t(PageText.Contact.aboutYouInfo.title)}>

diff --git a/src/page-modules/contact/ticketing/forms/app/appAccountForm.tsx b/src/page-modules/contact/ticketing/forms/app/appAccountForm.tsx
@@ -50,7 +50,6 @@ export const AppAccountForm = ({ state, send }: AppAccountFormProps) => {
           label={t(PageText.Contact.input.customerNumber.label)}
           type="text"
           name="customerNumber"
-          description={t(PageText.Contact.input.customerNumber.description)}
           value={state.context.customerNumber || ''}
           errorMessage={state.context?.errorMessages['customerNumber']?.[0]}
           onChange={(e) =>
@@ -60,6 +59,9 @@ export const AppAccountForm = ({ state, send }: AppAccountFormProps) => {
               value: e.target.value,
             })
           }
+          modalContent={{
+            description: t(PageText.Contact.input.customerNumber.description),
+          }}
         />
         <Input
           label={t(PageText.Contact.input.firstName.label)}

diff --git a/src/page-modules/contact/ticketing/forms/app/appTicketingForm.tsx b/src/page-modules/contact/ticketing/forms/app/appTicketingForm.tsx
@@ -19,7 +19,6 @@ export const AppTicketingForm = ({ state, send }: AppTicketingFormProps) => {
           label={t(PageText.Contact.input.orderId.label(false))}
           type="text"
           name="orderId"
-          description={t(PageText.Contact.input.orderId.description(false))}
           value={state.context.orderId || ''}
           errorMessage={state.context?.errorMessages['orderId']?.[0]}
           onChange={(e) =>
@@ -29,6 +28,14 @@ export const AppTicketingForm = ({ state, send }: AppTicketingFormProps) => {
               value: e.target.value,
             })
           }
+          modalContent={{
+            description: t(PageText.Contact.input.orderId.description),
+            instruction: t(PageText.Contact.input.orderId.instruction),
+            bulletPoints:
+              PageText.Contact.input.orderId.descriptionBulletPoints.map(
+                (bulletpoint) => t(bulletpoint),
+              ),
+          }}
         />
       </SectionCard>
       <SectionCard title={t(PageText.Contact.input.question.title)}>
@@ -67,7 +74,6 @@ export const AppTicketingForm = ({ state, send }: AppTicketingFormProps) => {
           label={t(PageText.Contact.input.customerNumber.labelOptional)}
           type="text"
           name="customerNumber"
-          description={t(PageText.Contact.input.customerNumber.description)}
           value={state.context.customerNumber || ''}
           onChange={(e) =>
             send({
@@ -76,6 +82,9 @@ export const AppTicketingForm = ({ state, send }: AppTicketingFormProps) => {
               value: e.target.value,
             })
           }
+          modalContent={{
+            description: t(PageText.Contact.input.customerNumber.description),
+          }}
         />
         <Input
           label={t(PageText.Contact.input.firstName.label)}

diff --git a/src/page-modules/contact/ticketing/forms/refund/appTicketRefund.tsx b/src/page-modules/contact/ticketing/forms/refund/appTicketRefund.tsx
@@ -19,7 +19,6 @@ export const AppTicketRefund = ({ state, send }: AppTicketRefundProps) => {
         label={t(PageText.Contact.input.customerNumber.label)}
         type="text"
         name="customerNumber"
-        description={t(PageText.Contact.input.customerNumber.description)}
         value={state.context.customerNumber || ''}
         errorMessage={state.context?.errorMessages['customerNumber']?.[0]}
         onChange={(e) =>
@@ -29,13 +28,15 @@ export const AppTicketRefund = ({ state, send }: AppTicketRefundProps) => {
             value: e.target.value,
           })
         }
+        modalContent={{
+          description: t(PageText.Contact.input.customerNumber.description),
+        }}
       />
 
       <Input
         label={t(PageText.Contact.input.orderId.label(true))}
         type="text"
         name="orderId"
-        description={t(PageText.Contact.input.orderId.description(true))}
         value={state.context.orderId || ''}
         errorMessage={state.context?.errorMessages['orderId']?.[0]}
         onChange={(e) =>
@@ -45,6 +46,13 @@ export const AppTicketRefund = ({ state, send }: AppTicketRefundProps) => {
             value: e.target.value,
           })
         }
+        modalContent={{
+          description: t(PageText.Contact.input.orderId.description),
+          bulletPoints:
+            PageText.Contact.input.orderId.descriptionBulletPoints.map(
+              (bulletPoint) => t(bulletPoint),
+            ),
+        }}
       />
     </SectionCard>
   );

diff --git a/src/page-modules/contact/ticketing/forms/refund/otherTicketRefund.tsx b/src/page-modules/contact/ticketing/forms/refund/otherTicketRefund.tsx
@@ -95,7 +95,6 @@ const RefundSection = ({ state, send }: RefundSectionProps) => {
           label={t(PageText.Contact.input.customerNumber.label)}
           type="text"
           name="customerNumber"
-          description={t(PageText.Contact.input.customerNumber.description)}
           value={state.context.customerNumber || ''}
           errorMessage={state.context?.errorMessages['customerNumber']?.[0]}
           onChange={(e) =>
@@ -105,14 +104,16 @@ const RefundSection = ({ state, send }: RefundSectionProps) => {
               value: e.target.value,
             })
           }
+          modalContent={{
+            description: t(PageText.Contact.input.customerNumber.description),
+          }}
         />
       )}
 
       <Input
         label={t(PageText.Contact.input.orderId.label(false))}
         type="text"
         name="orderId"
-        description={t(PageText.Contact.input.orderId.description(false))}
         value={state.context.orderId || ''}
         errorMessage={state.context?.errorMessages['orderId']?.[0]}
         onChange={(e) =>
@@ -122,6 +123,14 @@ const RefundSection = ({ state, send }: RefundSectionProps) => {
             value: e.target.value,
           })
         }
+        modalContent={{
+          description: t(PageText.Contact.input.orderId.description),
+          instruction: t(PageText.Contact.input.orderId.instruction),
+          bulletPoints:
+            PageText.Contact.input.orderId.descriptionBulletPoints.map(
+              (bulletPoint) => t(bulletPoint),
+            ),
+        }}
       />
 
       <Typo.p textType="body__primary">

diff --git a/src/page-modules/contact/ticketing/forms/webshop/webshopTicketingForm.tsx b/src/page-modules/contact/ticketing/forms/webshop/webshopTicketingForm.tsx
@@ -20,9 +20,14 @@ export const WebshopTicketingForm = ({
       <SectionCard
         title={t(PageText.Contact.ticketing.webshop.webshopTicketing.title)}
       >
-        <Typo.p textType="body__primary">
-          {t(PageText.Contact.input.orderId.description(false))}
-        </Typo.p>
+        {PageText.Contact.input.orderId.descriptionBulletPoints.map(
+          (desc, index) => (
+            <Typo.p textType="body__primary" key={index}>
+              {t(desc)}
+            </Typo.p>
+          ),
+        )}
+
         <Input
           label={t(PageText.Contact.input.orderId.label(false))}
           type="text"