fix: prevent click on accordion if step not activable

Author: alessani

components/composite/Checkout/index.tsx

@@ -110,6 +110,7 @@ const Checkout: React.FC<Props> = ({
                   lastActivableStep={lastActivableStep}
                   setActiveStep={setActiveStep}
                   step="Customer"
+                  steps={steps}
                   isStepDone={ctx.hasShippingAddress && ctx.hasBillingAddress}
                 >
                   <AccordionItem
@@ -127,6 +128,7 @@ const Checkout: React.FC<Props> = ({
                     lastActivableStep={lastActivableStep}
                     setActiveStep={setActiveStep}
                     step="Shipping"
+                    steps={steps}
                     isStepRequired={ctx.isShipmentRequired}
                   >
                     <AccordionItem
@@ -144,6 +146,7 @@ const Checkout: React.FC<Props> = ({
                   lastActivableStep={lastActivableStep}
                   setActiveStep={setActiveStep}
                   step="Payment"
+                  steps={steps}
                   isStepRequired={ctx.isPaymentRequired}
                   isStepDone={ctx.hasPaymentMethod}
                 >

components/composite/StepCustomer/index.tsx

@@ -46,58 +46,6 @@ export const StepHeaderCustomer: React.FC<Props> = ({ step }) => {
     }
 
     return <p data-cy="customer-email-step-header">{emailAddress}</p>
-
-    // if (billingAddress && (hasSameAddresses || !isShipmentRequired)) {
-    //   return (
-    //     <Address addresses={[billingAddress]}>
-    //       {
-    //         <AddressField>
-    //           {({ address }) => (
-    //             <p data-cy="full-billing-information">
-    //               {address.name}
-    //               {address.billingInfo && `, ${address.billingInfo}`}
-    //             </p>
-    //           )}
-    //         </AddressField>
-    //       }
-    //     </Address>
-    //   )
-    // }
-    // return (
-    //   (billingAddress && shippingAddress && (
-    //     <>
-    //       <Address addresses={[billingAddress]} className="mb-1">
-    //         {
-    //           <AddressField>
-    //             {({ address }) => (
-    //               <>
-    //                 <p data-cy="full-billing-information">
-    //                   {address.name}
-    //                   {address.billingInfo && `, ${address.billingInfo}`}
-    //                 </p>
-    //               </>
-    //             )}
-    //           </AddressField>
-    //         }
-    //       </Address>
-    //       <Address addresses={[shippingAddress]}>
-    //         {
-    //           <AddressField>
-    //             {({ address }) => (
-    //               <p data-cy="full-shipping-information">
-    //                 <span className="font-semibold text-black">
-    //                   {t(`addressForm.shipped_to`)}
-    //                 </span>{" "}
-    //                 {address.name}{" "}
-    //               </p>
-    //             )}
-    //           </AddressField>
-    //         }
-    //       </Address>
-    //     </>
-    //   )) ||
-    //   ""
-    // )
   }
 
   return (

components/data/AccordionProvider/index.tsx

@@ -17,6 +17,7 @@ export const AccordionContext = createContext<AccordionProviderData | null>(
 
 interface AccordionProviderProps {
   step: SingleStepEnum
+  steps: SingleStepEnum[]
   activeStep: SingleStepEnum
   lastActivableStep: SingleStepEnum
   setActiveStep?: (step: SingleStepEnum) => void
@@ -27,6 +28,7 @@ interface AccordionProviderProps {
 export const AccordionProvider: React.FC<AccordionProviderProps> = ({
   children,
   step,
+  steps,
   activeStep,
   lastActivableStep,
   setActiveStep,
@@ -51,11 +53,14 @@ export const AccordionProvider: React.FC<AccordionProviderProps> = ({
   }, [activeStep])
 
   useEffect(() => {
-    return setCannotGoNext(checkIfCannotGoNext(step, lastActivableStep))
+    return setCannotGoNext(checkIfCannotGoNext(step, steps, lastActivableStep))
   }, [step, lastActivableStep])
 
   useEffect(() => {
-    if (!isStepRequired && checkIfCannotGoNext(step, lastActivableStep)) {
+    if (
+      !isStepRequired &&
+      checkIfCannotGoNext(step, steps, lastActivableStep)
+    ) {
       setStatus("skip")
       return
     }
@@ -70,7 +75,7 @@ export const AccordionProvider: React.FC<AccordionProviderProps> = ({
       return
     }
 
-    if (checkIfCannotGoNext(step, lastActivableStep)) {
+    if (checkIfCannotGoNext(step, steps, lastActivableStep)) {
       setStatus("disabled")
       return
     }

components/hooks/useActiveStep.ts

@@ -14,13 +14,14 @@ const STEPS: SingleStepEnum[] = ["Customer", "Shipping", "Payment"]
 
 export function checkIfCannotGoNext(
   step: SingleStepEnum,
+  steps: SingleStepEnum[],
   lastActivableStep: SingleStepEnum
 ) {
   if (lastActivableStep === "Complete") {
     return false
   }
-  const indexCurrent = STEPS.indexOf(step)
-  const indexLastActivable = STEPS.indexOf(lastActivableStep)
+  const indexCurrent = steps.indexOf(step)
+  const indexLastActivable = steps.indexOf(lastActivableStep)
   return indexCurrent >= indexLastActivable
 }
 

components/ui/Accordion/index.tsx

@@ -12,8 +12,6 @@ interface Props {
 }
 
 export const Accordion: React.FC = ({ children }) => {
-  // const { isMobile } = useDeviceDetect()
-  // return isMobile ? <Wrapper>{children}</Wrapper> : <>{children}</>
   return <Wrapper>{children}</Wrapper>
 }
 
@@ -45,10 +43,7 @@ export const AccordionItem: React.FC<Props> = ({ children, index, header }) => {
       tabIndex={index}
       className={classNames("group", {
         active: ctx.isActive,
-        disabled: !(
-          (ctx.step === "Shipping" && appCtx.hasPaymentMethod) ||
-          ctx.status !== "disabled"
-        ),
+        disabled: ctx.status === "disabled" || ctx.status === "skip",
       })}
     >
       <AccordionTabHeader className="group" onClick={handleSelection}>