fix: step flow

Author: giacomosardo

components/composite/StepNav/Step.tsx

@@ -8,16 +8,16 @@ interface StepProps {
 
 export const Step = styled.li<StepProps>`
   position: relative;
-  ${tw`flex items-center last:pointer-events-none`}
+  ${tw`flex items-center`}
 
   ${({ isActive }) =>
     isActive
       ? css`
           ${tw`font-bold text-black`}
         `
       : null}
-  ${({ isLocked }) =>
-    isLocked
+  ${({ isLocked, isActive }) =>
+    isLocked && !isActive
       ? css`
           ${tw`text-gray-400 pointer-events-none`}
         `

components/composite/StepNav/index.tsx

@@ -32,8 +32,7 @@ export const StepNav: React.FC<Props> = ({
           const isLocked =
             (step === "Shipping" && !ctx?.isShipmentRequired) ||
             (step === "Payment" && !ctx?.isPaymentRequired) ||
-            (steps.indexOf(step) > steps.indexOf(lastActivable) &&
-              lastActivable !== "Complete")
+            steps.indexOf(step) > steps.indexOf(lastActivable)
 
           return (
             <Step
@@ -49,28 +48,23 @@ export const StepNav: React.FC<Props> = ({
               isLocked={isLocked}
             >
               {t(`step${step}.title`)}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="w-3 h-3 mx-3 fill-current"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                  clipRule="evenodd"
-                />
-              </svg>
+              {step !== "Payment" && (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="w-3 h-3 mx-3 fill-current"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              )}
             </Step>
           )
         })}
-
-        <Step
-          isLocked={activeStep !== "Complete"}
-          isActive={activeStep === "Complete"}
-        >
-          {t("general.complete")}
-        </Step>
       </StepList>
     </Wrapper>
   )

components/ui/Accordion/index.tsx

@@ -24,7 +24,10 @@ export const AccordionItem: React.FC<Props> = ({ children, index, header }) => {
   if (!ctx || !appCtx) return null
 
   const handleSelection = () => {
-    if (ctx.status !== "disabled") {
+    if (
+      (ctx.step === "Shipping" && appCtx.hasPaymentMethod) ||
+      ctx.status !== "disabled"
+    ) {
       return ctx.isActive ? ctx.closeStep() : ctx.setStep()
     }
   }
@@ -34,8 +37,10 @@ export const AccordionItem: React.FC<Props> = ({ children, index, header }) => {
       tabIndex={index}
       className={classNames("group", {
         active: ctx.isActive,
-        disabled: ctx.status === "disabled",
-        cannotGoNext: ctx.cannotGoNext,
+        disabled: !(
+          (ctx.step === "Shipping" && appCtx.hasPaymentMethod) ||
+          ctx.status !== "disabled"
+        ),
       })}
     >
       <AccordionTabHeader className="group" onClick={handleSelection}>
@@ -75,10 +80,6 @@ const AccordionTabHeader = styled.div`
   .disabled & {
     ${tw`pointer-events-none`}
   }
-
-  .cannotGoNext & {
-    ${tw`pointer-events-none`}
-  }
 `
 const AccordionTitle = styled.div`
   ${tw`transition ease duration-500`}