merge branch m6-sonnguyen into common

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

pages/test.tsx

@@ -6,6 +6,7 @@ import MenuNavigationProductList from 'src/components/common/MenuNavigationProdu
 // import { RecipeListPage } from 'src/components/modules/recipes';
 import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
 import { useModalCommon } from 'src/components/hooks';
+
 const CATEGORY = [
   {
       name: 'All',
@@ -33,7 +34,6 @@ const CATEGORY = [
   },
 ]
 const BRAND = [
-
   {
       name: 'Maggi',
       link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
@@ -67,15 +67,14 @@ const FEATURED = [
         link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
     }
   ];
+
+
+import CheckoutSuccess from 'src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess'
+import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon'
+import SkeletonParagraph from 'src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph'
+import SkeletonImage from 'src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage'
+
 export default function Test() {
-  const { visible: visibleMenuFilter, openModal, closeModal: closeMenuFilter } = useModalCommon({ initialValue: false })
-  const toggle = () => {
-    if (visibleMenuFilter) {
-        closeMenuFilter()
-    } else {
-        openModal()
-    }
-}
   return (
     <>
     <div className="shape-common-border">

src/components/common/LoadingCommon/LoadingCommon.module.scss

@@ -0,0 +1,24 @@
+@import '../../../styles/utilities';
+
+.wrapper {
+    @apply text-center;
+
+    .loadingCommon {
+        @apply bg-white;
+        height: 7rem;
+        width: 7rem;
+        animation: spin 2s linear infinite;
+        margin: auto;
+        background: url('./assets/carrot.png') top 50% left 50% no-repeat;
+    }
+
+    .text {
+        @apply font-bold;
+        color: var(--primary);
+    }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

src/components/common/LoadingCommon/LoadingCommon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import s from './LoadingCommon.module.scss'
+
+const LoadingCommon = () => {
+    
+    return (
+        <div className={s.wrapper}>
+            <div className={s.loadingCommon}>
+            </div>
+            <p className={s.text}>Loading...</p>
+        </div>
+    )
+}
+
+export default LoadingCommon

src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss

@@ -0,0 +1,53 @@
+@import '../../../../styles/utilities';
+
+.skeletonImage {
+    @apply relative;
+    background: #DDDBDD;
+
+    &.small {
+        width: 10rem;
+        height: 10rem;
+    }
+
+    &.default {
+        width: 15rem;
+        height: 15rem;
+    }
+
+    &.large {
+        width: 20rem;
+        height: 20rem;
+    }
+
+    &.left {
+        margin-left: 0;
+    }
+
+    &.center {
+        margin: auto;
+    }
+
+    &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transform: translateX(-100%);
+        background-image: linear-gradient(
+            90deg,
+            rgba(#fff, 0) 0,
+            rgba(#fff, 0.2) 20%,
+            rgba(#fff, 0.5) 60%,
+            rgba(#fff, 0)
+        );
+        animation: shimmer 2s infinite;
+        content: '';
+    }
+}
+
+@keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+}

src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.tsx

@@ -0,0 +1,20 @@
+import classNames from "classnames";
+import React from "react";
+import s from './SkeletonImage.module.scss'
+
+interface SkeletonImageProps {
+    align?: "left" | "center"
+    size?: "small" | "default" | "large"
+}
+
+const SkeletonImage = ({ align="center", size="default" }: SkeletonImageProps) => {
+    return (
+        <div className={classNames(s.skeletonImage, {
+            [s[size]] : size,
+            [s[align]] : align
+        })}>
+        </div>
+    )
+}
+
+export default SkeletonImage

src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss

@@ -0,0 +1,65 @@
+@import '../../../../styles/utilities';
+
+.skeletonParagraph {
+    margin: 0 1.6rem;
+
+    .row {
+        display: inline-block;
+        height: 2rem;
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        background-color: #DDDBDD;
+      
+        &::after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            transform: translateX(-100%);
+            background-image: linear-gradient(
+                90deg,
+                rgba(#fff, 0) 0,
+                rgba(#fff, 0.2) 20%,
+                rgba(#fff, 0.5) 60%,
+                rgba(#fff, 0)
+            );
+            animation: shimmer 2s infinite;
+            content: '';
+        }
+    }
+    
+    .lastRow {
+        display: inline-block;
+        height: 2rem;
+        width: 80%;
+        position: relative;
+        overflow: hidden;
+        background-color: #DDDBDD;
+      
+        &::after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            transform: translateX(-100%);
+            background-image: linear-gradient(
+                90deg,
+                rgba(#fff, 0) 0,
+                rgba(#fff, 0.2) 20%,
+                rgba(#fff, 0.5) 60%,
+                rgba(#fff, 0)
+            );
+            animation: shimmer 2s infinite;
+            content: '';
+        }
+    }
+}
+
+@keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+}

src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import s from './SkeletonParagraph.module.scss'
+
+interface SkeletonParagraphProps {
+    rows?: number // number of rows in paragraph
+}
+
+const SkeletonParagraph = ({ rows=2 }: SkeletonParagraphProps) => {
+    return (
+        <div className={s.skeletonParagraph}>
+            {
+                [...Array(rows)].map((e, i) => {
+                    if (i === rows-1) {
+                        return <div key={i} className={s.lastRow}></div>
+                    }
+                    return <div key={i} className={s.row}></div>
+                })
+            }
+        </div>
+    )
+}
+
+export default SkeletonParagraph

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

@@ -0,0 +1,38 @@
+@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 justify-center;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,34 @@
+import React from "react";
+import s from './CheckoutSuccess.module.scss';
+
+import Link from "next/link";
+
+import checkIcon from './assets/checkIcon.png';
+
+import { ButtonCommon, StaticImage } from "src/components/common";
+import { IconArrowRight } from "src/components/icons";
+
+const CheckoutSuccess = () => {
+    return (
+        <div className={s.checkoutSuccessWrapper}>
+            <div className={s.checkoutSuccess}>
+                <div className={s.checkoutContent}>
+                    <StaticImage src={checkIcon} alt="check icon" />
+
+                    <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 className={s.backToHomeBtn}>
+                        <Link href="/">
+                            <a>
+                                <ButtonCommon size="large" icon={<IconArrowRight />} isIconSuffix={true}>Back to home</ButtonCommon>
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CheckoutSuccess