feat: place order button visible only when activeStep is Complete

Author: giacomosardo

components/composite/Checkout/index.tsx

@@ -144,10 +144,17 @@ const Checkout: React.FC<Props> = ({
                     >
                       <StepPayment tw="mb-6" />
                     </AccordionItem>
-                    <StepPlaceOrder
-                      termsUrl={termsUrl}
-                      privacyUrl={privacyUrl}
-                    />
+                    <AccordionProvider
+                      activeStep={activeStep}
+                      lastActivableStep={lastActivableStep}
+                      setActiveStep={setActiveStep}
+                      step="Complete"
+                    >
+                      <StepPlaceOrder
+                        termsUrl={termsUrl}
+                        privacyUrl={privacyUrl}
+                      />
+                    </AccordionProvider>
                   </PaymentContainer>
                 </AccordionProvider>
               </Accordion>

components/composite/StepPlaceOrder/index.tsx

@@ -4,6 +4,7 @@ import { useRouter } from "next/router"
 import { useContext, useState } from "react"
 import { Trans, useTranslation } from "react-i18next"
 
+import { AccordionContext } from "components/data/AccordionProvider"
 import { AppContext } from "components/data/AppProvider"
 import { GTMContext } from "components/data/GTMProvider"
 import { ButtonWrapper } from "components/ui/Button"
@@ -35,6 +36,7 @@ const StepPlaceOrder: React.FC<Props> = ({ termsUrl, privacyUrl }) => {
   const [isPlacingOrder, setIsPlacingOrder] = useState(false)
 
   const appCtx = useContext(AppContext)
+  const accordionCtx = useContext(AccordionContext)
   const gtmCtx = useContext(GTMContext)
 
   if (!appCtx) {
@@ -144,6 +146,7 @@ const StepPlaceOrder: React.FC<Props> = ({ termsUrl, privacyUrl }) => {
           <ButtonWrapper>
             <StyledPlaceOrderButton
               data-cy="place-order-button"
+              isActive={accordionCtx?.isActive}
               onClick={handlePlaceOrder}
               label={
                 <>

components/composite/StepPlaceOrder/styled.tsx

@@ -10,6 +10,10 @@ import { ButtonCss } from "components/ui/Button"
 import { CheckCss } from "components/ui/form/CheckBox"
 import { ErrorCss } from "components/ui/form/Error"
 
+interface StyledPlaceOrderButtonProps {
+  isActive: boolean
+}
+
 export const ErrorWrapper = styled.div`
   ${tw`bg-red-50 flex justify-center border border-2 border-red-300 `}
   & + & {
@@ -32,9 +36,12 @@ export const ErrorsContainer = styled.div`
     ${tw`mb-10`}
   }
 `
-export const StyledPlaceOrderButton = styled(PlaceOrderButton)`
+export const StyledPlaceOrderButton = styled<any & StyledPlaceOrderButtonProps>(
+  PlaceOrderButton
+)`
   ${ButtonCss}
-  ${tw`mx-5 mt-3.5 md:mx-0 md:mt-0`}
+  ${({ isActive }) => (isActive ? null : tw`hidden`)}
+  ${tw`mx-5 mt-3.5 md:mx-0 md:mt-0 active:hidden`}
 `
 export const StyledPrivacyAndTermsCheckbox = styled(PrivacyAndTermsCheckbox)`
   ${CheckCss}