update

pages/index.tsx

@@ -1,17 +1,20 @@
 import { Layout } from 'src/components/common';
 import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+import Test from './test';
 
 export default function Home() {
   return (
     <>
-      <HomeBanner />
+
+      <Test />
+      {/* <HomeBanner />
       <HomeFeature />
       <HomeCategories />
       <HomeCollection />
       <HomeVideo />
       <HomeCTA />
       <HomeRecipe />
-      <HomeSubscribe />
+      <HomeSubscribe /> */}
 
       {/* // todo: uncomment */}
       {/* <ModalCreateUserInfo/> */}

pages/test.tsx

@@ -1,23 +1,13 @@
 import { useState } from 'react'
-import {
-  ButtonCommon,
-  Layout, ModalInfo
-} from 'src/components/common'
+import { ButtonCommon, Layout, ModalInfo } from 'src/components/common'
+
+import CheckoutSuccess from 'src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess'
 
 export default function Test() {
-  const [visible, setVisible] = useState(false)
-  const onClose = () => {
-    setVisible(false)
-  }
-  const onOpen = () => {
-    setVisible(true)
-  }
+  
   return (
     <>
-      <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalInfo visible={visible} onClose={onClose}>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi?
-      </ModalInfo>
+      <CheckoutSuccess />
     </>
   )
 }

src/components/common/Layout/Layout.tsx

@@ -15,24 +15,24 @@ interface Props {
 // note: demo code
 const Layout: FC<Props> = ({ children }) => {
     const { locale = 'en-US' } = useRouter()
-    const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
+    // const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
 
-    const toggle = () => {
-        if (visibleCartDrawer) {
-            closeCartDrawer()
-        } else {
-            openModal()
-        }
-    }
+    // const toggle = () => {
+    //     if (visibleCartDrawer) {
+    //         closeCartDrawer()
+    //     } else {
+    //         openModal()
+    //     }
+    // }
     return (
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
                 <Header />
                 <main >{children}</main>
-                <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
-                <CartDrawer
+                {/* <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button> */}
+                {/* <CartDrawer
                     visible={visibleCartDrawer}
-                    onClose={closeCartDrawer} />
+                    onClose={closeCartDrawer} /> */}
                 <Footer />
             </div>
         </CommerceProvider>

src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss

@@ -0,0 +1,48 @@
+@import '../../../../styles/utilities';
+
+.checkoutSuccessWrapper {
+    @apply flex items-center justify-center;
+    margin-top: -3.2rem;
+    
+    .checkoutSuccess {
+        border-radius: 80% 90% 18% 10% / 20% 10% 27% 20%;
+        max-width: 77.6rem;
+        height: fit-content;
+        background: 
+            url('./assets/veget.png') left 0 top 0 no-repeat,
+            url('./assets/fish.png') right 0 top 0 no-repeat,
+            url('./assets/freezeShrimp.png') right 0 bottom 0 no-repeat,
+            url('./assets/coffeeBean.png') left 0 bottom 0 no-repeat;
+        background-color: #E3F2E9;
+    
+        .checkoutContent {
+            @apply text-center;
+            margin: 7.2rem 4.8rem 6.4rem 4.8rem;
+
+            .checkoutMsg {
+                @apply heading-1 font-heading;
+                margin-top: 3.2rem;
+                margin-bottom: 1.6rem;
+            }
+        
+            .checkoutSubMsg {
+                @apply sub-headline;
+                margin-bottom: 4rem;
+            }
+        
+            .backToHomeBtn {
+                @apply flex cursor-pointer font-bold items-center justify-center;
+                color: white;
+                background-color: var(--primary);
+                margin: auto;
+                // border-radius: 80% 90% 18% 10% / 20% 10% 27% 20%; // to do
+                width: fit-content;
+                padding: 1.6rem 3.2rem 1.6rem 3.2rem;
+        
+                .arrowRight {
+                    margin-left: 1.4rem;
+                }
+            }
+        }
+    }
+}

src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import s from './CheckoutSuccess.module.scss';
+
+import Image from "next/image";
+import Link from "next/link";
+
+import checkIcon from './assets/checkIcon.png';
+
+const CheckoutSuccess = () => {
+    
+    return (
+        <div className={s.checkoutSuccessWrapper}>
+            <div className={s.checkoutSuccess}>
+                <div className={s.checkoutContent}>
+                    <div>
+                        <Image src={checkIcon} alt="check icon" />
+                    </div>
+
+                    <div className={s.checkoutMsg}>Your purchase has been successed!</div>
+                    <div className={s.checkoutSubMsg}>Last call! Shop deep deals on 100+ bulk picks while you can.</div>
+                    
+                    <div>
+                        <Link href="/">
+                            <a className={s.backToHomeBtn}>Back to home
+                                <div className={s.arrowRight}>
+                                    <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M11.92 6.61994C11.8724 6.49719 11.801 6.38505 11.71 6.28994L6.71 1.28994C6.61676 1.1967 6.50607 1.12274 6.38425 1.07228C6.26243 1.02182 6.13186 0.99585 6 0.99585C5.7337 0.99585 5.4783 1.10164 5.29 1.28994C5.19676 1.38318 5.1228 1.49387 5.07234 1.61569C5.02188 1.73751 4.99591 1.86808 4.99591 1.99994C4.99591 2.26624 5.1017 2.52164 5.29 2.70994L8.59 5.99994H1C0.734784 5.99994 0.48043 6.1053 0.292893 6.29283C0.105357 6.48037 0 6.73472 0 6.99994C0 7.26516 0.105357 7.51951 0.292893 7.70705C0.48043 7.89458 0.734784 7.99994 1 7.99994H8.59L5.29 11.2899C5.19627 11.3829 5.12188 11.4935 5.07111 11.6154C5.02034 11.7372 4.9942 11.8679 4.9942 11.9999C4.9942 12.132 5.02034 12.2627 5.07111 12.3845C5.12188 12.5064 5.19627 12.617 5.29 12.7099C5.38296 12.8037 5.49356 12.8781 5.61542 12.9288C5.73728 12.9796 5.86799 13.0057 6 13.0057C6.13201 13.0057 6.26272 12.9796 6.38458 12.9288C6.50644 12.8781 6.61704 12.8037 6.71 12.7099L11.71 7.70994C11.801 7.61484 11.8724 7.50269 11.92 7.37994C12.02 7.13648 12.02 6.8634 11.92 6.61994Z" fill="white"/>
+                                    </svg>
+                                </div>
+                            </a>
+                        </Link>
+                        
+                    </div>
+                </div>
+
+                <div className={s.cornerImgs}>
+                    
+                    
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+export default CheckoutSuccess