crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-29 05:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

🔨 refactor: collapse checkout

Browse Source 
:%s
This commit is contained in:
unknown
2021-09-08 09:25:46 +07:00
parent b4c5e9e9a9
commit 4f96426651
259 changed files with 1939 additions and 5672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
View File

@@ -1,6 +1,8 @@
@import '../../../styles/utilities';
.breadcrumbCommon {
@apply spacing-horizontal-left;
color: var(--text-base);
}
.currentItem {
cursor: default;
}
}

45
src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
View File

@@ -1,42 +1,37 @@
import React from 'react'
import { ROUTE } from 'src/utils/constanst.utils'
import s from './BreadcrumbCommon.module.scss'
import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
interface BreadcrumbCommonProps {
crumbs: { link:string, name:string }[];
crumbs: { link: string, name: string }[];
showHomePage?: boolean;
}
const BreadcrumbCommon = ({ crumbs, showHomePage=false } : BreadcrumbCommonProps) => {
if (showHomePage) {
crumbs.unshift({link: "/", name: "Home"});
}
const BreadcrumbCommon = ({ crumbs, showHomePage = true }: BreadcrumbCommonProps) => {
return (
<section className={s.breadcrumbCommon}>
{
crumbs.map((crumb, i) => {
if (i === 0) {
return (
<BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
)
}
if (i === crumbs.length-1) {
return (
<BreadcrumbSeparator key={i}>
<BreadcrumbItem key={i} text={crumb.name} href="#" />
</BreadcrumbSeparator>
)
}
return (
<BreadcrumbSeparator key={i}>
<BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
</BreadcrumbSeparator>
)
})
showHomePage && <BreadcrumbItem key='Home' text='Home' href={ROUTE.HOME} />
}
</section>
{
crumbs.length > 0 && <>
{
crumbs.slice(0, crumbs.length - 1).map((crumb) => (
< BreadcrumbSeparator key={crumb.name}>
<BreadcrumbItem text={crumb.name} href={crumb.link} />
</BreadcrumbSeparator>
))}
< BreadcrumbSeparator>
<span className={s.currentItem}>{crumbs[crumbs.length - 1].name}</span>
</BreadcrumbSeparator>
</>
}
</section >
)
}

5
src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss Normal file
View File

@@ -0,0 +1,5 @@
.breadcrumbItem {
&:hover {
color: var(--primary);
}
}

3
src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react'
import Link from 'next/link'
import s from './BreadcrumbItem.module.scss'
interface BreadcrumbItemProps {
text: string;
@@ -9,7 +10,7 @@ interface BreadcrumbItemProps {
const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => {
return (
<Link href={href}>
<a>{text}</a>
<a className={s.breadcrumbItem}>{text}</a>
</Link>
)
}

2
src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react'
interface BreadcrumbSeparatorProps {
children?: React.ReactNode;
children?: React.ReactNode
}
const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {

8
src/components/common/ButtonCommon/ButtonCommon.module.scss
View File

@@ -7,6 +7,9 @@
align-items: center;
padding: 1rem 2rem;
@screen md {
padding: 0.8rem 1.6rem;
}
@screen lg {
padding: 0.8rem 3.2rem;
}
&:disabled {
@@ -84,11 +87,14 @@
padding: 1rem;
}
@screen md {
padding: 1.6rem 4.8rem;
padding: 1.6rem 3.2rem;
&.onlyIcon {
padding: 1.6rem;
}
}
@screen lg {
padding: 1.6rem 4.8rem;
}
&.loading {
&::before {
width: 2.4rem;

1
src/components/common/CarouselCommon/CarouselCommon.module.scss
View File

@@ -8,6 +8,7 @@
:global(.customArrow) {
width: 64px;
height: 64px;
border-radius: .8rem;
&:focus {
outline: none;
}

12
src/components/common/CartDrawer/CartDrawer.module.scss Normal file
View File

@@ -0,0 +1,12 @@
@import '../../../styles/utilities';
.cartDrawer {
@apply flex flex-col h-full;
.body {
@apply overflow-y-auto overflow-x-hidden h-full custom-scroll;
}
.bottom {
padding-top: 1.6rem;
}
}

35
src/components/common/CartDrawer/CartDrawer.tsx Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react';
import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
import { DrawerCommon } from '..';
import s from './CartDrawer.module.scss';
import CartCheckoutButton from './components/CartCheckoutButton/CartCheckoutButton';
import CartMessage from './components/CartMessage/CartMessage';
import CartRecommendation from './components/CartRecommendation/CartRecommendation';
import ProductsInCart from './components/ProductsInCart/ProductsInCart';
interface Props {
visible: boolean
onClose: () => void
}
const CartDrawer = ({ visible, onClose }: Props) => {
return (
<DrawerCommon
title={`Your cart (${PRODUCT_CART_DATA_TEST.length})`}
visible={visible}
onClose={onClose}>
<div className={s.cartDrawer}>
<div className={s.body}>
<ProductsInCart data={PRODUCT_CART_DATA_TEST}/>
<CartRecommendation />
</div>
<div className={s.bottom}>
<CartMessage />
<CartCheckoutButton />
</div>
</div>
</DrawerCommon>
)
}
export default CartDrawer;

6
src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss Normal file
View File

@@ -0,0 +1,6 @@
.cartCheckoutButton {
padding: 1.6rem;
button {
width: 100%;
}
}

13
src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx Normal file
View File

@@ -0,0 +1,13 @@
import React, { memo } from 'react';
import { ButtonCommon } from 'src/components/common';
import s from './CartCheckoutButton.module.scss';
const CartCheckoutButton = memo(() => {
return (
<div className={s.cartCheckoutButton}>
<ButtonCommon size='large'>Check out - Rp 120.500</ButtonCommon>
</div>
)
})
export default CartCheckoutButton;

16
src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss Normal file
View File

@@ -0,0 +1,16 @@
@import "../../../../../styles/utilities";
.cartMessage {
@apply flex bg-info;
padding: 1.2rem 1.6rem;
.text {
color: var(--white);
font-weight: bold;
margin-right: 0.8rem;
}
.icon {
svg path {
fill: var(--text-placeholder);
}
}
}

18
src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React, { memo } from 'react';
import { IconInfo } from 'src/components/icons';
import s from './CartMessage.module.scss';
const CartMessage = memo(() => {
return (
<div className={s.cartMessage}>
<div className={s.text}>
You save - Rp 150
</div>
<div className={s.icon}>
<IconInfo />
</div>
</div>
)
})
export default CartMessage;

26
src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss Normal file
View File

@@ -0,0 +1,26 @@
@import '../../../../../styles/utilities';
.cartRecommendation {
@apply w-full bg-background-gray;
.top {
@apply flex justify-between items-center;
padding: 1.6rem;
.heading {
@apply font-bold text-active sm-headline;
}
}
.productCardWarpper {
padding-left: 1.6rem;
:global(.customArrow) {
@apply bg-line;
@screen lg {
&:global(.leftArrow) {
left: calc(-6.4rem - 2rem);
}
&:global(.rightArrow) {
right: calc(-6.4rem - 2rem);
}
}
}
}
}

43
src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { TOptionsEvents } from 'keen-slider';
import React from 'react';
import { CarouselCommon, ViewAllItem } from 'src/components/common';
import ProductCard, { ProductCardProps } from 'src/components/common/ProductCard/ProductCard';
import { ROUTE } from 'src/utils/constanst.utils';
import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
import s from './CartRecommendation.module.scss';
const option: TOptionsEvents = {
slidesPerView: 2,
mode: 'free',
breakpoints: {
'(min-width: 640px)': {
slidesPerView: 1,
},
'(min-width: 768px)': {
slidesPerView: 2.5,
}
},
}
const CartRecommendation = () => {
return (
<div className={s.cartRecommendation}>
<div className={s.top}>
<div className={s.heading}>
Recommendation
</div>
<ViewAllItem link={ROUTE.PRODUCTS} />
</div>
<div className={s.productCardWarpper}>
<CarouselCommon<ProductCardProps>
data={PRODUCT_DATA_TEST}
Component={ProductCard}
itemKey="cart-recommendation"
option={option}
/>
</div>
</div>
)
}
export default CartRecommendation;

54
src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss Normal file
View File

@@ -0,0 +1,54 @@
@import "../../../../../styles/utilities";
.productCartItem {
@apply grid;
grid-template-columns: 2fr 1fr;
padding-bottom: 1.6rem;
padding-top: 1.6rem;
.info {
@apply flex;
.imgWrap {
width: 11rem;
height: 7.5rem;
margin-right: 1.6rem;
img {
object-fit: contain;
}
}
.detail {
min-height: 9rem;
.name {
&:hover {
color: var(--primary);
}
}
.price {
margin-top: 0.8rem;
.old {
margin-bottom: 0.8rem;
.number {
margin-right: 0.8rem;
color: var(--text-label);
text-decoration: line-through;
}
}
.current {
@apply text-active font-bold sm-headline;
}
}
}
}
.actions {
@apply flex flex-col justify-between items-end;
margin-left: 1.6rem;
.iconDelete {
@apply cursor-pointer;
&:hover {
svg path {
fill: var(--negative);
}
}
}
}
}

56
src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react';
import Link from 'next/link'
import { QuanittyInput } from 'src/components/common';
import { IconDelete } from 'src/components/icons';
import { ROUTE } from 'src/utils/constanst.utils';
import { ProductProps } from 'src/utils/types.utils';
import ImgWithLink from '../../../ImgWithLink/ImgWithLink';
import LabelCommon from '../../../LabelCommon/LabelCommon';
import s from './ProductCartItem.module.scss';
export interface ProductCartItempProps extends ProductProps {
quantity: number,
}
const ProductCartItem = ({ name, slug, weight, price, oldPrice, discount, imageSrc, quantity }: ProductCartItempProps) => {
return (
<div className={s.productCartItem}>
<div className={s.info}>
<Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
<a href="">
<div className={s.imgWrap}>
<ImgWithLink src={imageSrc} alt={name} />
</div>
</a>
</Link>
<div className={s.detail}>
<Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
<a>
<div className={s.name}>
{name} {weight ? `(${weight})` : ''}
</div>
</a>
</Link>
<div className={s.price}>
{
oldPrice &&
<div className={s.old}>
<span className={s.number}>{oldPrice}</span>
<LabelCommon type='discount'>{discount}</LabelCommon>
</div>
}
<div className={s.current}>{price}</div>
</div>
</div>
</div>
<div className={s.actions}>
<div className={s.iconDelete}>
<IconDelete />
</div>
<QuanittyInput size='small' initValue={quantity} />
</div>
</div>
)
}
export default ProductCartItem;

9
src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss Normal file
View File

@@ -0,0 +1,9 @@
.productsInCart {
padding: 1.6rem 1.6rem 0 1.6rem;
list-style: none;
li {
&:not(:last-child) {
border-bottom: 1px solid var(--border-line);
}
}
}

30
src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx Normal file
View File

@@ -0,0 +1,30 @@
import React from 'react';
import ProductCartItem, { ProductCartItempProps } from '../ProductCartItem/ProductCartItem';
import s from './ProductsInCart.module.scss';
interface Props {
data: ProductCartItempProps[]
}
const ProductsInCart = ({ data }: Props) => {
return (
<ul className={s.productsInCart}>
{
data.map(item => <li key={item.name}>
<ProductCartItem
name={item.name}
slug={item.slug}
weight={item.weight}
price={item.price}
oldPrice={item.oldPrice}
discount={item.discount}
imageSrc={item.imageSrc}
quantity={item.quantity}
/>
</li>)
}
</ul>
)
}
export default ProductsInCart;

37
src/components/common/CheckoutBill/CheckoutBill.module.scss
View File

@@ -1,9 +1,30 @@
.warpper{
max-width: 56.3rem;
@apply flex justify-between flex-col;
.bot{
.promo{
padding: 3.2rem;
}
.warpper {
max-width: 56.3rem;
padding: 3.2rem;
@apply flex justify-between flex-col border-l-2 border-solid border-line;
.title {
font-weight: bold;
font-size: 2rem;
line-height: 2.8rem;
}
.list {
min-height: 52.8rem;
}
.bot {
.promo {
// padding: 3.2rem;
@apply bg-gray flex justify-between items-center;
min-height: 6.4rem;
}
}
.price {
.line {
@apply flex justify-between items-center text-label;
.total {
font-weight: bold;
font-size: 2rem;
line-height: 2.8rem;
}
}
}
}
}

54
src/components/common/CheckoutBill/CheckoutBill.tsx
View File

@@ -1,30 +1,46 @@
import React from 'react'
import s from "./CheckoutBill.module.scss"
import s from './CheckoutBill.module.scss'
import { CardItemCheckout } from '..'
import { CardItemCheckoutProps } from '../CardItemCheckout/CardItemCheckout'
import { IconCirclePlus } from 'src/components/icons'
interface CheckoutBillProps {
data: CardItemCheckoutProps[]
data: CardItemCheckoutProps[]
}
const CheckoutBill = ({data}: CheckoutBillProps) => {
return (
<div className={s.warpper}>
<div className={s.list}>
{data.map((item,index)=>{
return <CardItemCheckout {...item} key={index}/>
})}
</div>
<div className={s.bot}>
<div className={s.promo}>
</div>
<div className={s.price}>
</div>
</div>
const CheckoutBill = ({ data }: CheckoutBillProps) => {
return (
<div className={s.warpper}>
<div className = {s.title}>
Your cart ({data.length})
</div>
<div className={s.list}>
{data.map((item) => {
return <CardItemCheckout {...item} key={item.slug} />
})}
</div>
<div className={s.bot}>
<div className={s.promo}>
Apply Promotion Code
<IconCirclePlus />
</div>
)
<div className={s.price}>
<div className={s.line}>
Subtotal
<div className={s.subTotal}>RP 120.500</div>
</div>
<div className={s.line}>
Shipping
<div className={s.shipping}>Free</div>
</div>
<div className={s.line}>
Estimated Total
<div className={s.total}>RP 120.500</div>
</div>
</div>
</div>
</div>
)
}
export default CheckoutBill

15
src/components/common/CheckoutCollapse/CheckoutCollapse.tsx
View File

@@ -7,8 +7,9 @@ interface CheckoutCollapseProps {
children: React.ReactNode
title: string
isEdit: boolean
onClose: () => void
onOpen: () => void
onClose?: (id:number) => void
onOpen?: (id:number) => void
onEditClick?:(id:number) => void
}
const CheckoutCollapse = ({
@@ -19,14 +20,18 @@ const CheckoutCollapse = ({
visible,
onOpen,
onClose,
onEditClick
}: CheckoutCollapseProps) => {
const handleTitleClick = () => {
if(visible){
onClose && onClose()
onClose && onClose(id)
}else{
onOpen && onOpen()
onOpen && onOpen(id)
}
}
const handleEdit = () => {
onEditClick && onEditClick(id)
}
return (
<div className={s.warpper}>
<div className={s.header}>
@@ -38,7 +43,7 @@ const CheckoutCollapse = ({
{title}
</div>
</div>
{isEdit && <div className={s.edit}>{'Edit'}</div>}
{isEdit && <div className={s.edit} onClick={handleEdit}>{'Edit'}</div>}
</div>
<div className={classNames(s.body, { [`${s.show}`]: visible })}>{children}</div>
</div>

33
src/components/common/CustomerInfoForm/CustomerInfoForm.tsx
View File

@@ -2,29 +2,30 @@ import Link from 'next/link'
import React, { useRef } from 'react'
import { ButtonCommon, Inputcommon } from 'src/components/common'
import InputCommon from 'src/components/common/InputCommon/InputCommon'
import { CheckOutForm } from 'src/utils/types.utils'
import s from './CustomerInfoForm.module.scss'
interface CustomerInfoFormProps {
onConfirm?: ()=>void
onConfirm?: (id: number, formInfo: CheckOutForm) => void
id: number
}
const CustomerInfoForm = ({}: CustomerInfoFormProps) => {
const nameRef = useRef<React.ElementRef<typeof InputCommon>>(null);
const emailRef = useRef<React.ElementRef<typeof InputCommon>>(null);
const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => {
const nameRef = useRef<React.ElementRef<typeof InputCommon>>(null)
const emailRef = useRef<React.ElementRef<typeof InputCommon>>(null)
const handleConfirmClick = () => {
return {
name:nameRef?.current?.getValue(),
email:emailRef.current?.getValue()
}
}
const handleConfirmClick = () => {
onConfirm &&
onConfirm(id, {
name: nameRef?.current?.getValue().toString(),
email: emailRef.current?.getValue().toString(),
})
}
return (
<div className={s.warpper}>
<div className={s.body}>
<Inputcommon type="text" placeholder="Full Name" ref={nameRef}/>
<Inputcommon type="text" placeholder="Email Address" ref={emailRef}/>
<Inputcommon type="text" placeholder="Full Name" ref={nameRef} />
<Inputcommon type="text" placeholder="Email Address" ref={emailRef} />
</div>
<div className={s.bottom}>
<div className={s.note}>
@@ -42,7 +43,9 @@ const CustomerInfoForm = ({}: CustomerInfoFormProps) => {
}
.
</div>
<ButtonCommon onClick={handleConfirmClick}>Continue to Shipping</ButtonCommon>
<ButtonCommon onClick={handleConfirmClick}>
Continue to Shipping
</ButtonCommon>
</div>
</div>
)

52
src/components/common/DrawerCommon/DrawerCommon.module.scss Normal file
View File

@@ -0,0 +1,52 @@
@import "../../../styles/utilities";
.drawerCommon {
@apply fixed flex justify-end transition-all duration-200;
overflow: hidden;
top: 0;
right: 0;
height: 100vh;
width: 90%;
box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
z-index: 20000;
.inner {
@apply flex flex-col bg-white;
width: fit-content;
height: 100vh;
width: 100%;
margin-right: 0;
@screen md {
max-width: 55rem;
}
.top {
@apply flex justify-between items-center;
padding: 1.6rem;
.heading {
@apply sm-headline;
}
.iconClose {
@apply cursor-pointer transition-all duration-200;
&:hover {
svg path {
fill: var(--primary);
}
}
}
}
}
.content {
overflow-y: auto;
height: 100%;
}
&.hide {
transform: translateX(110%);
}
@screen md {
width: unset;
.inner {
min-width: 48rem;
}
}
}

36
src/components/common/DrawerCommon/DrawerCommon.tsx Normal file
View File

@@ -0,0 +1,36 @@
import React, { useRef } from 'react';
import s from './DrawerCommon.module.scss';
import classNames from 'classnames';
import { IconClose } from 'src/components/icons';
interface Props {
visible: boolean
title?: string
children?: React.ReactNode
onClose: () => void
}
const DrawerCommon = ({ title, visible, children, onClose }: Props) => {
return (
<div className={classNames({
[s.drawerCommon]: true,
[s.hide]: !visible
})}>
<div className={s.inner}>
<div className={s.top}>
<h4 className={s.heading}>
{title}
</h4>
<div className={s.iconClose} onClick={onClose}>
<IconClose />
</div>
</div>
<div className={s.content}>
{children}
</div>
</div>
</div>
)
}
export default DrawerCommon;

2
src/components/common/Header/Header.tsx
View File

@@ -1,6 +1,6 @@
import classNames from 'classnames'
import React, { memo, useEffect, useState } from 'react'
import { useModalCommon } from 'src/components/hooks/useModalCommon'
import { useModalCommon } from 'src/components/hooks'
import { isMobile } from 'src/utils/funtion.utils'
import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'

5
src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
View File

@@ -52,7 +52,10 @@
}
a {
@appy no-underline;
&.iconFovourite {
&:hover {
opacity: .8;
}
&.iconFavourite {
svg path {
fill: var(--negative);
}

7
src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
View File

@@ -5,6 +5,7 @@ import InputSearch from 'src/components/common/InputSearch/InputSearch'
import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
import { IconBuy, IconHeart, IconHistory, IconUser } from 'src/components/icons'
import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import Logo from '../../../Logo/Logo'
import s from './HeaderMenu.module.scss'
interface Props {
@@ -39,7 +40,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
<section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}>
<div className={s.left}>
<div className={s.top}>
<div>Online Grocery</div>
<Logo/>
<button className={s.iconCart}>
<IconBuy />
</button>
@@ -51,14 +52,14 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
<ul className={s.menu}>
<li>
<Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`}>
<a >
<a>
<IconHistory />
</a>
</Link>
</li>
<li>
<Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.FAVOURITE}`}>
<a className={s.iconFovourite}>
<a className={s.iconFavourite}>
<IconHeart />
</a>
</Link>

9
src/components/common/ImgWithLink/ImgWithLink.module.scss Normal file
View File

@@ -0,0 +1,9 @@
.imgWithLink {
position: relative;
min-width: 5rem;
width: 100%;
height: 100%;
img {
object-fit: cover;
}
}

18
src/components/common/ImgWithLink/ImgWithLink.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react'
import s from './ImgWithLink.module.scss'
import Image from 'next/image'
export interface ImgWithLinkProps {
src: string,
alt?: string,
}
const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => {
return (
<div className={s.imgWithLink}>
<Image src={src} alt={alt} layout="fill" className={s.imgWithLink} />
</div>
)
}
export default ImgWithLink

16
src/components/common/Layout/Layout.tsx
View File

@@ -1,6 +1,8 @@
import { CommerceProvider } from '@framework'
import { useRouter } from 'next/router'
import { FC } from 'react'
import { useModalCommon } from 'src/components/hooks'
import { CartDrawer } from '..'
import Footer from '../Footer/Footer'
import Header from '../Header/Header'
import s from './Layout.module.scss'
@@ -13,13 +15,25 @@ 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 toggle = () => {
if (visibleCartDrawer) {
closeCartDrawer()
} else {
openModal()
}
}
return (
<CommerceProvider locale={locale}>
<div className={s.mainLayout}>
{/* <Header /> */}
<main >{children}</main>
{/* <Footer /> */}
<button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
<CartDrawer
visible={visibleCartDrawer}
onClose={closeCartDrawer} />
<Footer />
</div>
</CommerceProvider>

23
src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss Normal file
View File

@@ -0,0 +1,23 @@
@import "../../../../styles/utilities";
.infoProducts {
@apply flex justify-between items-center spacing-horizontal;
.top {
.sub {
display: none;
}
}
@screen lg {
@apply block;
margin-right: 4rem;
padding: 0;
.top {
margin-bottom: 3.2rem;
.sub {
display: block;
margin-top: 0.4rem;
}
}
}
}

26
src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import { ROUTE } from 'src/utils/constanst.utils';
import HeadingCommon from '../../HeadingCommon/HeadingCommon';
import ViewAllItem from '../../ViewAllItem/ViewAllItem';
import s from './InfoProducts.module.scss'
interface Props {
title: string,
subtitle?: string,
}
const InfoProducts = ({ title, subtitle }: Props) => {
return (
<div className={s.infoProducts}>
<div className={s.top}>
<HeadingCommon>{title}</HeadingCommon>
<div className={s.sub}>
{subtitle}
</div>
</div>
<ViewAllItem link={ROUTE.PRODUCTS} />
</div>
);
};
export default InfoProducts;

48
src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss Normal file
View File

@@ -0,0 +1,48 @@
@import "../../../styles/utilities";
.listProductWithInfo {
background-color: var(--background);
border-top: 1rem solid var(--gray);
border-bottom: 1rem solid var(--gray);
padding-top: 6rem;
padding-bottom: 6rem;
@screen lg {
@apply flex spacing-horizontal-left;
padding-top: 5.6rem;
padding-bottom: 5.6rem;
border: none;
background-color: var(--background-gray);
}
.productsWrap {
@apply spacing-horizontal-left;
@screen lg {
max-width: 75%;
@apply custom-border-radius-lg bg-white;
padding: 4rem .8rem;
:global(.customArrow) {
@screen lg {
&:global(.leftArrow) {
left: calc(-6.4rem + 3rem);
}
&:global(.rightArrow) {
right: calc(-6.4rem + 3rem);
}
}
}
}
@screen xl {
padding: 4rem 2.4rem;
max-width: 80%;
:global(.customArrow) {
@screen lg {
&:global(.leftArrow) {
left: calc(-6.4rem + 1rem);
}
&:global(.rightArrow) {
right: calc(-6.4rem + 1rem);
}
}
}
}
}
}

51
src/components/common/ListProductWithInfo/ListProductWithInfo.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { TOptionsEvents } from 'keen-slider';
import React from 'react';
import CarouselCommon from '../CarouselCommon/CarouselCommon';
import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard';
import InfoProducts from './InfoProducts/InfoProducts';
import s from './ListProductWithInfo.module.scss';
interface Props {
data: ProductCardProps[],
title: string,
subtitle?: string,
}
const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 2,
mode: 'free',
breakpoints: {
'(min-width: 640px)': {
slidesPerView: 3,
},
'(min-width: 768px)': {
slidesPerView: 4,
},
'(min-width: 1024px)': {
slidesPerView: 3,
},
'(min-width: 1280px)': {
slidesPerView: 4.5,
},
},
}
const ListProductWithInfo = ({ data, title, subtitle }: Props) => {
return (
<div className={s.listProductWithInfo}>
<InfoProducts
title={title}
subtitle={subtitle}
/>
<div className={s.productsWrap}>
<CarouselCommon<ProductCardProps>
data={data}
Component={ProductCard}
itemKey={title}
option={OPTION_DEFAULT}
/>
</div>
</div>
);
};
export default ListProductWithInfo;

8
src/components/common/Logo/Logo.module.scss
View File

@@ -1,7 +1,7 @@
@import '../../../styles/utilities';
@import "../../../styles/utilities";
.logo {
display: flex;
@apply flex justify-center items-center;
.eclipse {
width: 3.2rem;
height: 3.2rem;
@@ -10,9 +10,9 @@
margin-right: 1.2rem;
}
.content {
@apply font-logo;
@apply font-logo font-bold;
font-size: 16px;
line-height: 32px;
letter-spacing: -0.02em;
}
}
}

20
src/components/common/Logo/Logo.tsx
View File

@@ -1,14 +1,18 @@
import s from './Logo.module.scss'
import Link from 'next/link'
import { ROUTE } from 'src/utils/constanst.utils'
const Logo = () => {
return(
<div className={s.logo}>
<div className={s.eclipse}>
</div>
<div className={s.content}>
ONLINE GROCERY
</div>
</div>
return (
<Link href={ROUTE.HOME}>
<a className={s.logo}>
<div className={s.eclipse}>
</div>
<div className={s.content}>
ONLINE GROCERY
</div>
</a>
</Link>
)
}

13
src/components/common/MenuDropdown/MenuDropdown.module.scss
View File

@@ -3,6 +3,9 @@
.menuDropdown {
@apply relative cursor-pointer;
width: fit-content;
.label {
all: unset;
}
&:hover {
.label {
color: var(--primary);
@@ -65,6 +68,16 @@
margin-top: 0.4rem;
li {
@apply block w-full transition-all duration-200 cursor-pointer text-active;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
overflow-x: hidden;
position: relative;
max-width: 15rem;
white-space: nowrap;
text-overflow: ellipsis;
button {
all: unset;
color: currentColor;

4
src/components/common/MenuDropdown/MenuDropdown.tsx
View File

@@ -16,9 +16,9 @@ const MenuDropdown = ({ options, children, isHasArrow = true, align }: Props) =>
[s.menuDropdown]: true,
[s.arrow]: isHasArrow,
})}>
<span className={s.label}>
<button className={s.label}>
{children}
</span>
</button>
<section className={classNames({
[s.menu]: true,
[s.left]: align === 'left',

6
src/components/common/ProductCard/ProductCard.module.scss
View File

@@ -2,8 +2,12 @@
max-width: 20.8rem;
min-height: 31.8rem;
padding: 1.2rem 1.2rem 0 1.2rem;
margin: auto;
margin-bottom: 1px;
@apply flex flex-col justify-between;
&.notSell {
@apply justify-center;
}
.cardTop{
@apply relative;
height: 13.8rem;
@@ -29,8 +33,6 @@
.cardMidTop{
.productname{
font-weight: bold;
line-height: 2.4rem;
font-size: 1.6rem;
color: var(--text-active);
&:hover{
cursor: pointer;

9
src/components/common/ProductCard/ProductCard.tsx
View File

@@ -6,6 +6,7 @@ import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
import ItemWishList from '../ItemWishList/ItemWishList'
import LabelCommon from '../LabelCommon/LabelCommon'
import s from './ProductCard.module.scss'
import ProductNotSell from './ProductNotSell/ProductNotSell'
export interface ProductCardProps extends ProductProps {
buttonText?: string
@@ -18,7 +19,15 @@ const ProductCard = ({
price,
buttonText = 'Buy Now',
imageSrc,
isNotSell,
}: ProductCardProps) => {
if (isNotSell) {
return <div className={`${s.productCardWarpper} ${s.notSell}`}>
<ProductNotSell name={name} imageSrc={imageSrc} />
</div>
}
return (
<div className={s.productCardWarpper}>
<div className={s.cardTop}>

27
src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss Normal file
View File

@@ -0,0 +1,27 @@
@import "../../../../styles/utilities";
.imgWrap {
img {
opacity: 0.5;
}
}
.name {
@apply text-label cursor-default font-bold;
}
.info {
@apply flex justify-center items-center custom-border-radius bg-info-light text-center;
padding: .8rem 1.6rem;
margin-top: 1.6rem;
color: var(--info);
svg {
@apply u-icon;
path {
fill: currentColor;
}
}
.text {
margin-left: 0.8rem;
}
}

28
src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import { IconInfo } from 'src/components/icons';
import ImgWithLink from '../../ImgWithLink/ImgWithLink';
import s from './ProductNotSell.module.scss';
export interface Props {
name: string,
imageSrc: string,
}
const ProductNotSell = ({ name, imageSrc }: Props) => {
return (
<>
<div className={s.imgWrap}>
<ImgWithLink src={imageSrc} alt={name} />
</div>
<div className={s.name}>{name}</div>
<div className={s.info}>
<IconInfo />
<div className={s.text}>
Not Sell
</div>
</div>
</>
);
};
export default ProductNotSell;

6
src/components/common/QuanittyInput/QuanittyInput.tsx
View File

@@ -1,7 +1,7 @@
import React, { ChangeEvent, useEffect, useState } from 'react'
import s from './QuanittyInput.module.scss'
import classNames from 'classnames'
import { Minus, Plus } from '@components/icons'
import { IconMinus, IconPlus } from '../../icons'
interface QuanittyInputProps
extends Omit<
React.InputHTMLAttributes<HTMLInputElement>,
@@ -64,7 +64,7 @@ const QuanittyInput = ({
return (
<div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
<div className={s.minusIcon} onClick={onMinusClick}>
<Minus />
<IconMinus />
</div>
<input
{...props}
@@ -74,7 +74,7 @@ const QuanittyInput = ({
className={s.quanittyInput}
/>
<div className={s.plusIcon} onClick={onPlusClick}>
<Plus />
<IconPlus />
</div>
</div>
)

3
src/components/common/RecipeCard/RecipeCard.module.scss
View File

@@ -6,6 +6,9 @@
width: 100%;
max-height: 22rem;
border-radius: 2.4rem;
img {
border-radius: 2.4rem;
}
&:hover{
cursor: pointer;
}

0
src/components/common/RecipeDetail/RecipeDetail.module.scss Normal file
View File

23
src/components/common/RecipeDetail/RecipeDetail.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react'
import { ProductCardProps } from '../ProductCard/ProductCard'
import RecipeDetailInfo from './components/RecipeDetailInfo/RecipeDetailInfo'
import RecipeIngredient from './components/RecipeIngredient/RecipeIngredient'
import s from './RecipeDetail.module.scss'
interface Props {
className?: string
children?: any,
ingredients: ProductCardProps[],
}
const RecipeDetail = ({ ingredients }: Props) => {
return (
<section className={s.recipeDetail}>
<RecipeDetailInfo />
<RecipeIngredient data={ingredients} />
</section >
)
}
export default RecipeDetail

19
src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss Normal file
View File

@@ -0,0 +1,19 @@
.recipeBriefInfo {
@apply flex;
.item {
@apply flex;
&:not(:last-child) {
margin-right: 2.4rem;
}
svg {
width: 2rem;
height: 2rem;
path {
fill: var(--text-label);
}
}
.content {
margin-left: 0.8rem;
}
}
}

29
src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react'
import { IconLocation, IconPeople, IconTime } from 'src/components/icons'
import s from './RecipeBriefInfo.module.scss'
interface Props {
className?: string
children?: any,
}
const RecipeBriefInfo = ({ }: Props) => {
return (
<section className={s.recipeBriefInfo}>
<div className={s.item}>
<IconTime />
<div className={s.content}>15 minutes</div>
</div>
<div className={s.item}>
<IconPeople />
<div className={s.content}>4 People</div>
</div>
<div className={s.item}>
<IconLocation />
<div className={s.content}>15 minutes</div>
</div>
</section >
)
}
export default RecipeBriefInfo

61
src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss Normal file
View File

@@ -0,0 +1,61 @@
@import "../../../../../styles/utilities";
.recipeDetailInfo {
@apply spacing-horizontal;
margin: 5.6rem auto;
@screen md {
@apply flex;
}
.img {
width: fit-content;
margin-top: 0;
@screen sm-only {
margin-bottom: 2rem;
}
@screen lg {
max-width: 60rem;
}
img {
@apply w-full;
object-fit: contain;
max-height: 64rem;
border-radius: 2.4rem;
@screen md {
max-height: 90rem;
}
}
}
.recipeInfo {
@screen md {
max-width: 39rem;
margin-left: 4.8rem;
}
@screen lg {
margin-left: 11.2rem;
}
.top {
margin-bottom: 4.8rem;
.name {
@apply heading-1 font-heading;
margin-bottom: 1.6rem;
}
}
.detail {
.item {
&:not(:last-child) {
margin-bottom: 2.4rem;
}
.heading {
@apply heading-3 font-heading;
margin-bottom: 0.8rem;
}
.content {
list-style: disc;
margin-left: 2rem;
}
}
}
}
}

59
src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx Normal file
View File

@@ -0,0 +1,59 @@
import React from 'react'
import RecipeBriefInfo from '../RecipeBriefInfo/RecipeBriefInfo'
import s from './RecipeDetailInfo.module.scss'
interface Props {
className?: string
children?: any
}
const RecipeDetailInfo = ({ }: Props) => {
return (
<section className={s.recipeDetailInfo}>
<div className={s.img}>
<img src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
</div>
<div className={s.recipeInfo}>
<div className={s.top}>
<h1 className={s.name}>
Crispy Fried Calamari
</h1>
<RecipeBriefInfo />
</div>
<div className={s.detail}>
<div className={s.item}>
<h3 className={s.heading}>Ingredients</h3>
<ul className={s.content}>
<li>Canola oil for frying</li>
<li>1 pound clean squid bodies cut in 1/4 inch rings and dried with a paper towel</li>
<li>2 cups flour</li>
<li>1/2 teaspoon kosher salt</li>
<li>1/2 teaspoon garlic powder</li>
<li>1/8 teaspoon coarse ground black pepper</li>
<li>1 lemon cut into wedges</li>
</ul>
</div>
<div className={s.item}>
<h3 className={s.heading}>Preparation</h3>
<ul className={s.content}>
<li>1In a large pot or dutch oven add three inches of oil and bring to 350 degrees.</li>
<li>Add the flour, salt, garlic powder and pepper to a large bowl and stir to combine.</li>
<li>Toss the squid pieces in the flour then into the hot oil.</li>
<li>Fry the squid for 1-2 minutes. You want the color to stay pale like in the pictures.</li>
<li>Remove to a cookie sheet to drain (do not add paper towels as it will steam the calamari and make it soft.)</li>
<li>Serve with lemon wedges.</li>
</ul>
</div>
<div className={s.item}>
<h3 className={s.heading}>Link</h3>
<a href="https://dinnerthendessert.com/crispy-fried-calamari" target="_blank" rel="noopener noreferrer">https://dinnerthendessert.com/crispy-fried-calamari</a>
</div>
</div>
</div>
</section >
)
}
export default RecipeDetailInfo

21
src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss Normal file
View File

@@ -0,0 +1,21 @@
@import "../../../../../styles/utilities";
.recipeIngredient {
padding: 6rem 0;
@screen md {
padding: 5.6rem 0;
}
.top {
@apply flex justify-between items-center spacing-horizontal;
}
.bottom {
@apply flex justify-center items-center spacing-horizontal;
margin-top: 4rem;
button {
width: 100%;
@screen md {
width: 39rem;
}
}
}
}

33
src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx Normal file
View File

@@ -0,0 +1,33 @@
import React from 'react'
import ButtonCommon from 'src/components/common/ButtonCommon/ButtonCommon'
import HeadingCommon from 'src/components/common/HeadingCommon/HeadingCommon'
import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
import ProductCarousel from 'src/components/common/ProductCarousel/ProductCarousel'
import ViewAllItem from 'src/components/common/ViewAllItem/ViewAllItem'
import { ROUTE } from 'src/utils/constanst.utils'
import s from './RecipeIngredient.module.scss'
interface Props {
className?: string
children?: any,
data: ProductCardProps[],
}
const RecipeIngredient = ({ data }: Props) => {
return (
<section className={s.recipeIngredient}>
<div className={s.top}>
<HeadingCommon>Ingredients</HeadingCommon>
<div>
<ViewAllItem link={ROUTE.PRODUCTS} />
</div>
</div>
<ProductCarousel data={data} itemKey="recipe-ingredient" />
<div className={s.bottom}>
<ButtonCommon type='ghost' size='large'>Buy all</ButtonCommon>
</div>
</section>
)
}
export default RecipeIngredient

15
src/components/common/ScrollToTop/ScrollTarget.tsx
View File

@@ -1,15 +0,0 @@
import React, { MutableRefObject } from 'react'
interface ScrollTargetProps {
refScrollUp: MutableRefObject<HTMLDivElement>;
}
const ScrollTarget = ({ refScrollUp } : ScrollTargetProps) => {
return (
<div ref={refScrollUp}></div>
)
}
export default ScrollTarget

7
src/components/common/ScrollToTop/ScrollToTop.tsx
View File

@@ -5,11 +5,10 @@ import s from './ScrollToTop.module.scss'
import ArrowUp from '../../icons/IconArrowUp'
interface ScrollToTopProps {
target: MutableRefObject<HTMLDivElement>;
visibilityHeight?: number;
}
const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => {
const [scrollPosition, setSrollPosition] = useState(0);
const [showScrollToTop, setShowScrollToTop] = useState("hide");
@@ -26,7 +25,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
};
function handleScrollUp() {
target.current.scrollIntoView({ behavior: "smooth" });
window.scrollTo(0, 0);
}
function addEventScroll() {
@@ -34,7 +33,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
}
useEffect(() => {
addEventScroll()
addEventScroll();
});
return (

22
src/components/common/ShippingInfoForm/ShippingInfoForm.tsx
View File

@@ -4,8 +4,12 @@ import s from './ShippingInfoForm.module.scss'
import Link from 'next/link'
import { CustomInputCommon } from 'src/utils/type.utils'
import { Shipping } from 'src/components/icons'
import { CheckOutForm } from 'src/utils/types.utils'
interface ShippingInfoFormProps {}
interface ShippingInfoFormProps {
onConfirm?: (id:number,formInfo:CheckOutForm)=>void
id:number
}
const option = [
{
@@ -16,20 +20,20 @@ const option = [
},
]
const ShippingInfoForm = ({}: ShippingInfoFormProps) => {
const ShippingInfoForm = ({onConfirm,id}: ShippingInfoFormProps) => {
const addressRef = useRef<CustomInputCommon>(null)
const cityRef = useRef<CustomInputCommon>(null)
const stateRef = useRef<CustomInputCommon>(null)
const codeRef = useRef<CustomInputCommon>(null)
const phoneRef = useRef<CustomInputCommon>(null)
const handleConfirmClick = () => {
return {
address: addressRef?.current?.getValue(),
city: cityRef.current?.getValue(),
state: stateRef?.current?.getValue(),
code: codeRef.current?.getValue(),
phone: phoneRef?.current?.getValue(),
}
onConfirm && onConfirm(id,{
address: addressRef?.current?.getValue().toString(),
city: cityRef.current?.getValue().toString(),
state: stateRef?.current?.getValue().toString(),
code: Number(codeRef.current?.getValue()),
phone: Number(phoneRef?.current?.getValue()),
})
}
return (

2
src/components/common/ViewAllItem/ViewAllItem.module.scss
View File

@@ -4,7 +4,7 @@
display: flex;
.content {
color: var(--primary);
margin: 0.8rem 0.8rem 0.8rem 1.6rem;
margin: 0.8rem 0.8rem 0.8rem 0;
font-weight: bold;
}
.vector {

5
src/components/common/index.ts
View File

@@ -19,7 +19,6 @@ export { default as DateTime} from './DateTime/DateTime'
export { default as HeadingCommon } from './HeadingCommon/HeadingCommon'
export { default as CollectionHeading } from './CollectionHeading/CollectionHeading'
export { default as ScrollToTop } from './ScrollToTop/ScrollToTop'
export { default as ScrollTarget } from './ScrollToTop/ScrollTarget'
export { default as InputSearch} from './InputSearch/InputSearch'
export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
export { default as Banner} from './Banner/Banner'
@@ -41,3 +40,7 @@ export { default as CheckoutBill} from './CheckoutBill/CheckoutBill'
export { default as CustomerInfoForm} from './CustomerInfoForm/CustomerInfoForm'
export { default as ShippingInfoForm} from './ShippingInfoForm/ShippingInfoForm'
export { default as PaymentInfoForm} from './PaymentInfoForm/PaymentInfoForm'
export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
export { default as CartDrawer} from './CartDrawer/CartDrawer'

1
src/components/hooks/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as useModalCommon } from './useModalCommon'

4
src/components/hooks/useModalCommon.tsx
View File

@@ -4,7 +4,7 @@ interface Props {
initialValue?: boolean,
}
export const useModalCommon = ({ initialValue = false }: Props) => {
const useModalCommon = ({ initialValue = false }: Props) => {
const [visible, setVisible] = useState<boolean>(initialValue)
const openModal = (e?: any) => {
@@ -21,3 +21,5 @@ export const useModalCommon = ({ initialValue = false }: Props) => {
visible, openModal, closeModal
}
};
export default useModalCommon

20
src/components/icons/IconCirclePlus.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react'
const IconCirclePlus = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18ZM14 9H11V6C11 5.73478 10.8946 5.48043 10.7071 5.29289C10.5196 5.10536 10.2652 5 10 5C9.73479 5 9.48043 5.10536 9.2929 5.29289C9.10536 5.48043 9 5.73478 9 6V9H6C5.73479 9 5.48043 9.10536 5.2929 9.29289C5.10536 9.48043 5 9.73478 5 10C5 10.2652 5.10536 10.5196 5.2929 10.7071C5.48043 10.8946 5.73479 11 6 11H9V14C9 14.2652 9.10536 14.5196 9.2929 14.7071C9.48043 14.8946 9.73479 15 10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14V11H14C14.2652 11 14.5196 10.8946 14.7071 10.7071C14.8946 10.5196 15 10.2652 15 10C15 9.73478 14.8946 9.48043 14.7071 9.29289C14.5196 9.10536 14.2652 9 14 9Z"
fill="#141414"
/>
</svg>
)
}
export default IconCirclePlus

20
src/components/icons/IconClose.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react'
const IconClose = () => {
return (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.4099 9.00019L16.7099 2.71019C16.8982 2.52188 17.004 2.26649 17.004 2.00019C17.004 1.73388 16.8982 1.47849 16.7099 1.29019C16.5216 1.10188 16.2662 0.996094 15.9999 0.996094C15.7336 0.996094 15.4782 1.10188 15.2899 1.29019L8.99994 7.59019L2.70994 1.29019C2.52164 1.10188 2.26624 0.996094 1.99994 0.996094C1.73364 0.996094 1.47824 1.10188 1.28994 1.29019C1.10164 1.47849 0.995847 1.73388 0.995847 2.00019C0.995847 2.26649 1.10164 2.52188 1.28994 2.71019L7.58994 9.00019L1.28994 15.2902C1.19621 15.3831 1.12182 15.4937 1.07105 15.6156C1.02028 15.7375 0.994141 15.8682 0.994141 16.0002C0.994141 16.1322 1.02028 16.2629 1.07105 16.3848C1.12182 16.5066 1.19621 16.6172 1.28994 16.7102C1.3829 16.8039 1.4935 16.8783 1.61536 16.9291C1.73722 16.9798 1.86793 17.006 1.99994 17.006C2.13195 17.006 2.26266 16.9798 2.38452 16.9291C2.50638 16.8783 2.61698 16.8039 2.70994 16.7102L8.99994 10.4102L15.2899 16.7102C15.3829 16.8039 15.4935 16.8783 15.6154 16.9291C15.7372 16.9798 15.8679 17.006 15.9999 17.006C16.132 17.006 16.2627 16.9798 16.3845 16.9291C16.5064 16.8783 16.617 16.8039 16.7099 16.7102C16.8037 16.6172 16.8781 16.5066 16.9288 16.3848C16.9796 16.2629 17.0057 16.1322 17.0057 16.0002C17.0057 15.8682 16.9796 15.7375 16.9288 15.6156C16.8781 15.4937 16.8037 15.3831 16.7099 15.2902L10.4099 9.00019Z"
fill="#141414"
/>
</svg>
)
}
export default IconClose

11
src/components/icons/IconDelete.tsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const IconDelete = () => {
return (
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 16C7.26522 16 7.51957 15.8946 7.70711 15.7071C7.89464 15.5196 8 15.2652 8 15V9C8 8.73478 7.89464 8.48043 7.70711 8.29289C7.51957 8.10536 7.26522 8 7 8C6.73478 8 6.48043 8.10536 6.29289 8.29289C6.10536 8.48043 6 8.73478 6 9V15C6 15.2652 6.10536 15.5196 6.29289 15.7071C6.48043 15.8946 6.73478 16 7 16ZM17 4H13V3C13 2.20435 12.6839 1.44129 12.1213 0.87868C11.5587 0.316071 10.7956 0 10 0H8C7.20435 0 6.44129 0.316071 5.87868 0.87868C5.31607 1.44129 5 2.20435 5 3V4H1C0.734784 4 0.48043 4.10536 0.292893 4.29289C0.105357 4.48043 0 4.73478 0 5C0 5.26522 0.105357 5.51957 0.292893 5.70711C0.48043 5.89464 0.734784 6 1 6H2V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H13C13.7956 20 14.5587 19.6839 15.1213 19.1213C15.6839 18.5587 16 17.7956 16 17V6H17C17.2652 6 17.5196 5.89464 17.7071 5.70711C17.8946 5.51957 18 5.26522 18 5C18 4.73478 17.8946 4.48043 17.7071 4.29289C17.5196 4.10536 17.2652 4 17 4ZM7 3C7 2.73478 7.10536 2.48043 7.29289 2.29289C7.48043 2.10536 7.73478 2 8 2H10C10.2652 2 10.5196 2.10536 10.7071 2.29289C10.8946 2.48043 11 2.73478 11 3V4H7V3ZM14 17C14 17.2652 13.8946 17.5196 13.7071 17.7071C13.5196 17.8946 13.2652 18 13 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V6H14V17ZM11 16C11.2652 16 11.5196 15.8946 11.7071 15.7071C11.8946 15.5196 12 15.2652 12 15V9C12 8.73478 11.8946 8.48043 11.7071 8.29289C11.5196 8.10536 11.2652 8 11 8C10.7348 8 10.4804 8.10536 10.2929 8.29289C10.1054 8.48043 10 8.73478 10 9V15C10 15.2652 10.1054 15.5196 10.2929 15.7071C10.4804 15.8946 10.7348 16 11 16Z" fill="#8F8F8F" />
</svg>
)
}
export default IconDelete

11
src/components/icons/IconLocation.tsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const IconLocation = () => {
return (
<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.9999 3.47991C13.4086 1.88861 11.2504 0.994629 8.99993 0.994629C6.74949 0.994629 4.59123 1.88861 2.99993 3.47991C1.40863 5.07121 0.514648 7.22947 0.514648 9.47991C0.514648 11.7303 1.40863 13.8886 2.99993 15.4799L8.26993 20.7599C8.36289 20.8536 8.47349 20.928 8.59535 20.9788C8.71721 21.0296 8.84792 21.0557 8.97993 21.0557C9.11194 21.0557 9.24265 21.0296 9.36451 20.9788C9.48637 20.928 9.59697 20.8536 9.68993 20.7599L14.9999 15.4299C16.5846 13.8452 17.4748 11.696 17.4748 9.45491C17.4748 7.21386 16.5846 5.06459 14.9999 3.47991ZM13.5699 13.9999L8.99993 18.5899L4.42993 13.9999C3.52707 13.0962 2.91241 11.9452 2.66362 10.6922C2.41484 9.43925 2.54312 8.14066 3.03223 6.96059C3.52135 5.78052 4.34935 4.77196 5.41156 4.06239C6.47377 3.35281 7.72251 2.97409 8.99993 2.97409C10.2773 2.97409 11.5261 3.35281 12.5883 4.06239C13.6505 4.77196 14.4785 5.78052 14.9676 6.96059C15.4567 8.14066 15.585 9.43925 15.3362 10.6922C15.0875 11.9452 14.4728 13.0962 13.5699 13.9999ZM5.99993 6.40991C5.19264 7.21968 4.73932 8.31648 4.73932 9.45991C4.73932 10.6033 5.19264 11.7001 5.99993 12.5099C6.59969 13.1107 7.36352 13.521 8.19558 13.6893C9.02764 13.8576 9.89088 13.7765 10.677 13.4561C11.4631 13.1356 12.1371 12.5902 12.6144 11.8882C13.0917 11.1861 13.3511 10.3588 13.3599 9.50991C13.3644 8.94311 13.2553 8.38117 13.0388 7.8573C12.8224 7.33343 12.5032 6.85827 12.0999 6.45991C11.7036 6.05449 11.231 5.73145 10.7094 5.50938C10.1877 5.2873 9.62727 5.17059 9.06033 5.16594C8.49339 5.16129 7.93113 5.26881 7.4059 5.4823C6.88067 5.69579 6.40285 6.01104 5.99993 6.40991ZM10.6899 11.0899C10.311 11.4747 9.81014 11.7158 9.27306 11.7722C8.73597 11.8285 8.19599 11.6966 7.74544 11.3988C7.29488 11.1011 6.96173 10.6562 6.80294 10.14C6.64415 9.62384 6.66958 9.06855 6.87489 8.56907C7.0802 8.06958 7.45263 7.65693 7.92851 7.40165C8.4044 7.14637 8.95418 7.06432 9.48387 7.16953C10.0135 7.27474 10.4902 7.56067 10.8324 7.97844C11.1746 8.39621 11.3611 8.91988 11.3599 9.45991C11.3454 10.0772 11.0864 10.6634 10.6399 11.0899H10.6899Z" fill="#8F8F8F" />
</svg>
)
}
export default IconLocation

8
src/components/icons/IconMinus.tsx
View File

@@ -1,14 +1,14 @@
const IconMinus = ({ ...props }) => {
return (
<svg
width="22"
height="22"
viewBox="0 0 22 4"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.333 0.666748H1.66634C1.31272 0.666748 0.973581 0.807224 0.723532 1.05727C0.473484 1.30732 0.333008 1.64646 0.333008 2.00008C0.333008 2.3537 0.473484 2.69284 0.723532 2.94289C0.973581 3.19294 1.31272 3.33342 1.66634 3.33342H20.333C20.6866 3.33342 21.0258 3.19294 21.2758 2.94289C21.5259 2.69284 21.6663 2.3537 21.6663 2.00008C21.6663 1.64646 21.5259 1.30732 21.2758 1.05727C21.0258 0.807224 20.6866 0.666748 20.333 0.666748Z"
d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
fill="#141414"
/>
</svg>

11
src/components/icons/IconPeople.tsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const IconPeople = () => {
return (
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3 9.22C11.8336 8.75813 12.2616 8.18688 12.5549 7.54502C12.8482 6.90316 13 6.20571 13 5.5C13 4.17392 12.4732 2.90215 11.5355 1.96447C10.5979 1.02678 9.32608 0.5 8 0.5C6.67392 0.5 5.40215 1.02678 4.46447 1.96447C3.52678 2.90215 3 4.17392 3 5.5C2.99999 6.20571 3.1518 6.90316 3.44513 7.54502C3.73845 8.18688 4.16642 8.75813 4.7 9.22C3.30014 9.85388 2.11247 10.8775 1.27898 12.1685C0.445495 13.4596 0.00147185 14.9633 0 16.5C0 16.7652 0.105357 17.0196 0.292893 17.2071C0.48043 17.3946 0.734784 17.5 1 17.5C1.26522 17.5 1.51957 17.3946 1.70711 17.2071C1.89464 17.0196 2 16.7652 2 16.5C2 14.9087 2.63214 13.3826 3.75736 12.2574C4.88258 11.1321 6.4087 10.5 8 10.5C9.5913 10.5 11.1174 11.1321 12.2426 12.2574C13.3679 13.3826 14 14.9087 14 16.5C14 16.7652 14.1054 17.0196 14.2929 17.2071C14.4804 17.3946 14.7348 17.5 15 17.5C15.2652 17.5 15.5196 17.3946 15.7071 17.2071C15.8946 17.0196 16 16.7652 16 16.5C15.9985 14.9633 15.5545 13.4596 14.721 12.1685C13.8875 10.8775 12.6999 9.85388 11.3 9.22ZM8 8.5C7.40666 8.5 6.82664 8.32405 6.33329 7.99441C5.83994 7.66476 5.45542 7.19623 5.22836 6.64805C5.0013 6.09987 4.94189 5.49667 5.05764 4.91473C5.1734 4.33279 5.45912 3.79824 5.87868 3.37868C6.29824 2.95912 6.83279 2.6734 7.41473 2.55764C7.99667 2.44189 8.59987 2.5013 9.14805 2.72836C9.69623 2.95542 10.1648 3.33994 10.4944 3.83329C10.8241 4.32664 11 4.90666 11 5.5C11 6.29565 10.6839 7.05871 10.1213 7.62132C9.55871 8.18393 8.79565 8.5 8 8.5ZM17.74 8.82C18.38 8.09933 18.798 7.20905 18.9438 6.25634C19.0896 5.30362 18.9569 4.32907 18.5618 3.45C18.1666 2.57093 17.5258 1.8248 16.7165 1.30142C15.9071 0.77805 14.9638 0.499742 14 0.5C13.7348 0.5 13.4804 0.605357 13.2929 0.792893C13.1054 0.98043 13 1.23478 13 1.5C13 1.76522 13.1054 2.01957 13.2929 2.20711C13.4804 2.39464 13.7348 2.5 14 2.5C14.7956 2.5 15.5587 2.81607 16.1213 3.37868C16.6839 3.94129 17 4.70435 17 5.5C16.9986 6.02524 16.8593 6.5409 16.5961 6.99542C16.3328 7.44994 15.9549 7.82738 15.5 8.09C15.3517 8.17552 15.2279 8.29766 15.1404 8.44474C15.0528 8.59182 15.0045 8.7589 15 8.93C14.9958 9.09976 15.0349 9.2678 15.1137 9.41826C15.1924 9.56872 15.3081 9.69665 15.45 9.79L15.84 10.05L15.97 10.12C17.1754 10.6917 18.1923 11.596 18.901 12.7263C19.6096 13.8566 19.9805 15.1659 19.97 16.5C19.97 16.7652 20.0754 17.0196 20.2629 17.2071C20.4504 17.3946 20.7048 17.5 20.97 17.5C21.2352 17.5 21.4896 17.3946 21.6771 17.2071C21.8646 17.0196 21.97 16.7652 21.97 16.5C21.9782 14.9654 21.5938 13.4543 20.8535 12.1101C20.1131 10.7659 19.0413 9.63331 17.74 8.82Z" fill="#8F8F8F" />
</svg>
)
}
export default IconPeople

8
src/components/icons/IconPlus.tsx
View File

@@ -1,14 +1,14 @@
const IconPlus = ({ ...props }) => {
return (
<svg
width="22"
height="22"
viewBox="0 0 22 22"
width="12"
height="2"
viewBox="0 0 12 2"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.333 9.66658H12.333V1.66659C12.333 1.31296 12.1925 0.973825 11.9425 0.723776C11.6924 0.473728 11.3533 0.333252 10.9997 0.333252C10.6461 0.333252 10.3069 0.473728 10.0569 0.723776C9.80682 0.973825 9.66634 1.31296 9.66634 1.66659V9.66658H1.66634C1.31272 9.66658 0.973581 9.80706 0.723532 10.0571C0.473484 10.3072 0.333008 10.6463 0.333008 10.9999C0.333008 11.3535 0.473484 11.6927 0.723532 11.9427C0.973581 12.1928 1.31272 12.3333 1.66634 12.3333H9.66634V20.3333C9.66634 20.6869 9.80682 21.026 10.0569 21.2761C10.3069 21.5261 10.6461 21.6666 10.9997 21.6666C11.3533 21.6666 11.6924 21.5261 11.9425 21.2761C12.1925 21.026 12.333 20.6869 12.333 20.3333V12.3333H20.333C20.6866 12.3333 21.0258 12.1928 21.2758 11.9427C21.5259 11.6927 21.6663 11.3535 21.6663 10.9999C21.6663 10.6463 21.5259 10.3072 21.2758 10.0571C21.0258 9.80706 20.6866 9.66658 20.333 9.66658Z"
d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
fill="#141414"
/>
</svg>

11
src/components/icons/IconTime.tsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const IconTime = () => {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18ZM10 4C9.73479 4 9.48043 4.10536 9.2929 4.29289C9.10536 4.48043 9 4.73478 9 5V9.42L6.9 10.63C6.70736 10.7392 6.5564 10.9092 6.47078 11.1134C6.38517 11.3176 6.36975 11.5444 6.42695 11.7583C6.48414 11.9722 6.61072 12.1611 6.78682 12.2953C6.96292 12.4296 7.17859 12.5015 7.4 12.5C7.57518 12.5012 7.7476 12.4564 7.9 12.37L10.5 10.87L10.59 10.78L10.75 10.65C10.7891 10.6005 10.8226 10.5468 10.85 10.49C10.8826 10.4363 10.9094 10.3793 10.93 10.32C10.9572 10.2564 10.9741 10.1889 10.98 10.12L11 10V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4Z" fill="#8F8F8F" />
</svg>
)
}
export default IconTime

8
src/components/icons/index.ts
View File

@@ -22,6 +22,12 @@ export { default as IconPassword } from './IconPassword'
export { default as IconPasswordCross } from './IconPasswordCross'
export { default as IconError } from './IconError'
export { default as IconCheck } from './IconCheck'
export { default as Shipping} from './Shipping'
export { default as IconTime } from './IconTime'
export { default as IconPeople } from './IconPeople'
export { default as IconLocation } from './IconLocation'
export { default as IconClose } from './IconClose'
export { default as IconDelete } from './IconDelete'
export { default as IconPlus } from './IconPlus'
export { default as IconMinus } from './IconMinus'
export { default as Shipping} from './Shipping'
export { default as IconCirclePlus } from './IconCirclePlus'

7
src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss Normal file
View File

@@ -0,0 +1,7 @@
.warpper{
@apply w-full;
.title{
padding: 3.2rem 0;
@apply flex justify-start items-center
}
}

87
src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx Normal file
View File

@@ -0,0 +1,87 @@
import React, { useState } from 'react'
import { CustomerInfoForm, Logo, ShippingInfoForm } from 'src/components/common'
import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
import { CheckOutForm } from 'src/utils/types.utils'
import s from './CheckoutInfo.module.scss'
interface CheckoutInfoProps {}
const CheckoutInfo = ({}: CheckoutInfoProps) => {
const [active, setActive] = useState(1)
const [done, setDone] = useState<number[]>([])
const [info, setInfo] = useState<CheckOutForm>({})
const onOpen = (id:number) => {
setActive(id)
}
const onEdit = (id:number) => {
setActive(id)
}
const onClose = (id:number) => {
setActive(id)
}
const onConfirm = (id:number,formInfo:CheckOutForm) => {
if(id+1>formList.length){
console.log({...info,...formInfo})
}else{
setActive(id+1)
}
setDone([...done,id])
setInfo({...info,...formInfo})
}
const formList = [
{
id: 1,
title: 'Customer Information',
form: <CustomerInfoForm onConfirm={onConfirm} id={1}/>,
},
{
id: 2,
title: 'Shipping Information',
form: <ShippingInfoForm onConfirm={onConfirm} id={2}/>,
},
]
return (
<div className={s.warpper}>
<div className={s.title}>
<Logo />
</div>
{formList.map((item) => {
return <CheckoutCollapse
key={item.title}
id={item.id}
visible={item.id === active}
title={item.title}
onEditClick={onEdit}
isEdit={done.includes(item.id)}
>
{item.form}
</CheckoutCollapse>
})}
{/* <CheckoutCollapse
id={1}
visible={active === 1}
// onOpen={onOpen}
// onClose={onClose}
title="Customer Information"
isEdit={true}
>
<CustomerInfoForm />
</CheckoutCollapse>
<CheckoutCollapse
id={2}
visible={active === 2}
// onOpen={onOpen2}
// onClose={onClose2}
title="Shipping Information"
isEdit={true}
>
<ShippingInfoForm />
</CheckoutCollapse> */}
</div>
)
}
export default CheckoutInfo

1
src/components/modules/checkout/index.ts
View File

@@ -0,0 +1 @@
export { default as CheckoutInfo } from './CheckoutInfo/CheckoutInfo'

10
src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss Normal file
View File

@@ -0,0 +1,10 @@
@import '../../../../styles/utilities';
.productInfoDetail {
@apply spacing-horizontal;
padding-bottom: 4rem;
@screen md {
@apply flex;
padding-bottom: 5.6rem;
}
}

20
src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react'
import ProductImgs from './components/ProductImgs/ProductImgs'
import ProductInfo from './components/ProductInfo/ProductInfo'
import s from './ProductInfoDetail.module.scss'
interface Props {
className?: string
children?: any
}
const ProductInfoDetail = ({ }: Props) => {
return (
<section className={s.productInfoDetail}>
<ProductImgs/>
<ProductInfo/>
</section >
)
}
export default ProductInfoDetail

9
src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss Normal file
View File

@@ -0,0 +1,9 @@
.productImgs {
@apply w-full flex justify-between items-center;
@screen sm-only {
margin-bottom: 2rem;
}
@screen lg {
max-width: 60rem;
}
}

40
src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react'
import { CarouselCommon, ImgWithLink } from 'src/components/common'
import { ImgWithLinkProps } from 'src/components/common/ImgWithLink/ImgWithLink'
import s from './ProductImgs.module.scss'
interface Props {
className?: string
children?: any,
}
const DATA = [
{
src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
alt: 'Broccoli',
},
{
src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
alt: 'Broccoli',
}
]
const option = {
slidesPerView: 1,
}
const ProductImgs = ({ }: Props) => {
return (
<section className={s.productImgs}>
<CarouselCommon<ImgWithLinkProps>
data={DATA}
itemKey="product-detail-img"
Component={ImgWithLink}
option={option}
isDot={true}
/>
</section >
)
}
export default ProductImgs

81
src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss Normal file
View File

@@ -0,0 +1,81 @@
@import "../../../../../../styles/utilities";
.productInfo {
@screen md {
max-width: 39rem;
margin-left: 4.8rem;
}
@screen lg {
margin-left: 11.2rem;
}
.info {
margin-bottom: 3.2rem;
.heading {
@apply heading-2 font-heading;
margin-top: 0.8rem;
}
.price {
margin-top: 0.8rem;
.old {
margin-bottom: 0.8rem;
.number {
margin-right: 0.8rem;
color: var(--text-label);
text-decoration: line-through;
}
}
.current {
@apply text-active font-bold sm-headline;
}
}
.description {
margin-top: 0.8rem;
}
}
.actions {
@screen sm-only {
@apply fixed flex justify-between items-center bg-white w-full;
z-index: 10000;
bottom: 0;
left: 0;
padding: 2rem;
}
}
.bottom {
@screen sm-only {
@apply flex justify-between items-center flex-row-reverse;
margin-left: 1rem;
flex: 1;
button {
&:first-child {
min-width: 13rem;
}
&:nth-child(n + 1) {
margin-left: 0.8rem;
}
}
}
.buttonWithIcon {
@apply flex items-center;
.label {
@apply hidden;
@screen md {
@apply inline-block;
margin-left: 0.8rem;
}
}
}
button {
@apply w-full;
}
@screen md {
margin-top: 2.4rem;
button {
&:first-child {
margin-bottom: 0.8rem;
}
}
}
}
}

46
src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react'
import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common'
import { IconBuy } from 'src/components/icons'
import { LANGUAGE } from 'src/utils/language.utils'
import s from './ProductInfo.module.scss'
interface Props {
className?: string
children?: any,
}
const ProductInfo = ({ }: Props) => {
return (
<section className={s.productInfo}>
<div className={s.info}>
<LabelCommon shape='half'>SEAFOOD</LabelCommon>
<h2 className={s.heading}>SeaPAk</h2>
<div className={s.price}>
<div className={s.old}>
<span className={s.number}>Rp 32.000</span>
<LabelCommon type='discount'>-15%</LabelCommon>
</div>
<div className={s.current}>Rp 27.500</div>
</div>
<div className={s.description}>
In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley
</div>
</div>
<div className={s.actions}>
<QuanittyInput />
<div className={s.bottom}>
{/* <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.PREORDER}</ButtonCommon> */}
<ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
<ButtonCommon size='large' type='light'>
<span className={s.buttonWithIcon}>
<IconBuy /><span className={s.label}>{LANGUAGE.BUTTON_LABEL.ADD_TO_CARD}</span>
</span>
</ButtonCommon>
</div>
</div>
</section >
)
}
export default ProductInfo

27
src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss Normal file
View File

@@ -0,0 +1,27 @@
@import "../../../../styles/utilities";
.recommendedRecipes {
margin: 6rem auto;
@screen md {
margin: 5.6rem auto;
}
.infoProducts {
@apply flex justify-between items-center spacing-horizontal;
margin-bottom: 3.2rem;
}
.productsWrap {
@apply spacing-horizontal-left;
@screen xl {
:global(.customArrow) {
@screen lg {
&:global(.leftArrow) {
left: calc(-6.4rem - 2rem);
}
&:global(.rightArrow) {
right: calc(-6.4rem - 2rem);
}
}
}
}
}
}

51
src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { TOptionsEvents } from 'keen-slider';
import React from 'react';
import { CarouselCommon, HeadingCommon, RecipeCard, ViewAllItem } from 'src/components/common';
import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard';
import { ROUTE } from 'src/utils/constanst.utils';
import s from './RecommendedRecipes.module.scss';
const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 1.25,
mode: 'free',
spacing: 24,
breakpoints: {
'(min-width: 640px)': {
slidesPerView: 2,
},
'(min-width: 1024px)': {
slidesPerView: 2.5,
},
'(min-width: 1440px)': {
slidesPerView: 3,
},
'(min-width: 1536px)': {
slidesPerView: 3.5,
},
},
}
interface Props {
data: RecipeCardProps[],
}
const RecommendedRecipes = ({ data }: Props) => {
return (
<div className={s.recommendedRecipes}>
<div className={s.infoProducts}>
<HeadingCommon>Recommended Recipes</HeadingCommon>
<ViewAllItem link={ROUTE.RECIPES} />
</div>
<div className={s.productsWrap}>
<CarouselCommon<RecipeCardProps>
data={data}
Component={RecipeCard}
itemKey="Recommended Recipes"
option={OPTION_DEFAULT}
/>
</div>
</div>
);
};
export default RecommendedRecipes;

15
src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
const ReleventProducts = () => {
return (
<ListProductWithInfo
title="Relevant Products"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
data={PRODUCT_DATA_TEST}
/>
);
};
export default ReleventProducts;

15
src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
const ViewedProducts = () => {
return (
<ListProductWithInfo
title="viewed Products"
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
data={PRODUCT_DATA_TEST}
/>
);
};
export default ViewedProducts;

4
src/components/modules/product-detail/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail'
export { default as ViewedProducts } from './ViewedProducts/ViewedProducts'
export { default as ReleventProducts } from './ReleventProducts/ReleventProducts'
export { default as RecommendedRecipes } from './RecommendedRecipes/RecommendedRecipes'

7
src/styles/_base.scss
View File

@@ -6,7 +6,7 @@
--primary-lightest: #effaf4;
--info-dark: #00317a;
--info: #297fff;
--info: #3468B7;
--info-border-line: #d6e7ff;
--info-light: #ebf3ff;
@@ -21,7 +21,7 @@
--warning-light: #fef8eb;
--negative-dark: #741a06;
--negative: #f34f2b;
--negative: #D1644D;
--negative-border-line: #fddfd8;
--negative-light: #feefec;
@@ -33,6 +33,7 @@
--disabled: #cccccc;
--border-line: #ebebeb;
--background: #fff;
--background-gray: #F5F4F2;
--gray: #f8f8f8;
--white: #fff;
--background-arrow:rgba(20, 20, 20, 0.05);
@@ -79,5 +80,5 @@ html {
}
a {
-webkit-tap-highlight-color: var(--text-active);
-webkit-tap-highlight-color: var(--primary);
}

24
src/styles/_utilities.scss
View File

@@ -120,6 +120,25 @@
font-family: var(--font-logo);
}
.custom-scroll {
overflow-y: auto;
&::-webkit-scrollbar-track {
background-color: var(--background-gray);
border-radius: 10px;
}
&::-webkit-scrollbar {
border-radius: 10px;
width: 6px;
background-color: var(--background-gray);
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: var(--primary)
}
}
.u-form {
.body {
> div {
@@ -137,4 +156,9 @@
}
}
}
.u-icon {
width: 2rem;
height: 2rem;
}
}

3
src/utils/constanst.utils.ts
View File

@@ -8,9 +8,12 @@ export const SOCIAL_LINKS = {
export const ROUTE = {
HOME: '/',
PRODUCTS: '/products',
PRODUCT_DETAIL: '/product',
ABOUT: '/about',
BLOG_DETAIL: '/blogdetail',
ACCOUNT: '/account',
RECIPES: '/recipes',
BUSSINESS: '/bussiness',
CONTACT: '/contact',
FAQ: '/faq',

215
src/utils/demo-data.ts Normal file
View File

@@ -0,0 +1,215 @@
import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard"
export const PRODUCT_DATA_TEST = [
{
name: 'Tomato',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
},
{
name: 'Cucumber',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
},
{
name: 'Carrot',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png",
},
{
name: 'Salad',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png",
},
{
name: 'Tomato',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646224-d22dc2e4-6ae8-4bbe-adcf-491ce191f09b.png",
},
{
name: 'Cucumber',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646225-2728f192-481b-4142-99b0-dde92f53c6c6.png",
},
{
name: 'Tomato',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png",
},
{
name: 'Cucumber',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png",
},
]
export const PRODUCT_CART_DATA_TEST = [
{
name: 'Tomato',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
oldPrice: 'Rp 32.000',
discount: '15%',
quantity: 1,
},
{
name: 'Cucumber',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
oldPrice: 'Rp 32.000',
discount: '15%',
quantity: 2,
},
{
name: 'Carrot',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png",
oldPrice: 'Rp 32.000',
discount: '20%',
quantity: 3,
},
{
name: 'Salad',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png",
quantity: 1,
},
]
export const INGREDIENT_DATA_TEST = [
{
name: 'Tomato',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
},
{
name: 'Cucumber',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
isNotSell: true,
},
{
name: 'Carrot',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png",
},
{
name: 'Salad',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png",
isNotSell: true,
},
{
name: 'Tomato',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646224-d22dc2e4-6ae8-4bbe-adcf-491ce191f09b.png",
},
{
name: 'Cucumber',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646225-2728f192-481b-4142-99b0-dde92f53c6c6.png",
},
{
name: 'Tomato',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png",
},
{
name: 'Cucumber',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png",
},
]
export const RECIPE_DATA_TEST: RecipeCardProps[] = [
{
title: "Special Recipe of Vietnamese Phở",
description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png'
},
{
title: "Original Recipe of Curry",
description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png'
},
{
title: "The Best Recipe of Beef Noodle Soup",
description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png'
},
{
title: "Special Recipe of Vietnamese Phở",
description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png'
},
{
title: "Original Recipe of Curry",
description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png'
},
{
title: "The Best Recipe of Beef Noodle Soup",
description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png'
},
]

2
src/utils/language.utils.ts
View File

@@ -2,6 +2,8 @@ export const LANGUAGE = {
BUTTON_LABEL: {
BUY_NOW: 'Buy now',
SHOP_NOW: 'Shop now',
ADD_TO_CARD: 'Add to Cart',
PREORDER: 'Pre-Order Now',
},
PLACE_HOLDER: {
SEARCH: 'Search',

26
src/utils/types.utils.ts
View File

@@ -1,9 +1,13 @@
export interface ProductProps {
category: string
category?: string
name: string
slug: string
weight: string
price: string
oldPrice?: string
discount?: string
imageSrc: string
isNotSell?: boolean
}
export interface FeaturedProductProps {
@@ -16,20 +20,20 @@ export interface FeaturedProductProps {
export interface RecipeProps {
title: string
description:string
description: string
imageSrc: string
}
export interface CheckOutForm {
name: string
email:string
address: string
city:string
state:string
code:number
phone:number
method:string
shipping_fee:number
name?: string
email?:string
address?: string
city?:string
state?:string
code?:number
phone?:number
method?:string
shipping_fee?:number
}