diff --git a/pages/test.tsx b/pages/test.tsx index 24d55e9ac..7f40661be 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -1,15 +1,12 @@ import { useState } from 'react' import { - ButtonCommon, CardItemCheckout, Layout, - ModalCommon, - ModalConfirm, - ModalInfo, - ProductCarousel, - ProductList, } from 'src/components/common' import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon' +import CheckoutCollapse from 'src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse' +import CustomerInfoForm from 'src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm' +import ShippingInfoForm from 'src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm' import image5 from '../public/assets/images/image5.png' import image6 from '../public/assets/images/image6.png' import image7 from '../public/assets/images/image7.png' @@ -22,146 +19,6 @@ const dataTest = [ price: 'Rp 27.500', imageSrc: image7.src, }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Cucumber', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image6.src, - }, { name: 'Carrot', weight: '250g', @@ -197,209 +54,6 @@ const dataTest = [ price: 'Rp 27.500', imageSrc: image8.src, }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Carrot', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image7.src, - }, - { - name: 'Salad', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image8.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Carrot', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image7.src, - }, - { - name: 'Salad', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image8.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Carrot', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image7.src, - }, - { - name: 'Salad', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image8.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Carrot', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image7.src, - }, - { - name: 'Salad', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image8.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Carrot', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image7.src, - }, - { - name: 'Salad', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image8.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Cucumber', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image6.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Cucumber', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image6.src, - }, - { - name: 'Carrot', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image7.src, - }, - { - name: 'Salad', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image8.src, - }, - { - name: 'Carrot', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image7.src, - }, - { - name: 'Salad', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image8.src, - }, - { - name: 'Carrot', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image7.src, - }, - { - name: 'Salad', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image8.src, - }, - { - name: 'Carrot', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image7.src, - }, - { - name: 'Salad', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image8.src, - }, - { - name: 'Tomato', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image5.src, - }, - { - name: 'Cucumber', - weight: '250g', - category: 'VEGGIE', - price: 'Rp 27.500', - imageSrc: image6.src, - }, ] export default function Test() { const [visible, setVisible] = useState(false) @@ -409,13 +63,23 @@ export default function Test() { const onOpen = () => { setVisible(true) } + const [visible2, setVisible2] = useState(false) + const onClose2 = () => { + setVisible2(false) + } + const onOpen2 = () => { + setVisible2(true) + } return ( <> -
- - test - +
+ + + + + +
) diff --git a/src/components/common/InputCommon/InputCommon.module.scss b/src/components/common/InputCommon/InputCommon.module.scss index acfc07647..6b12d2bbd 100644 --- a/src/components/common/InputCommon/InputCommon.module.scss +++ b/src/components/common/InputCommon/InputCommon.module.scss @@ -15,9 +15,9 @@ .icon + .inputCommon { padding-left: 4.8rem; } - + .inputCommon { - @apply block w-full transition-all duration-200 rounded; + @apply block w-full transition-all duration-200 rounded bg-white; padding: 1.2rem 1.6rem; border: 1px solid var(--border-line); &:hover, diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx index 943b0a632..0389c99b3 100644 --- a/src/components/common/InputCommon/InputCommon.tsx +++ b/src/components/common/InputCommon/InputCommon.tsx @@ -6,6 +6,7 @@ import s from './InputCommon.module.scss'; type Ref = { focus: () => void + getValue: () => string | number } | null; interface Props { children?: React.ReactNode, diff --git a/src/components/common/ModalCommon/ModalCommon.tsx b/src/components/common/ModalCommon/ModalCommon.tsx index 75222c162..7f9bc07d8 100644 --- a/src/components/common/ModalCommon/ModalCommon.tsx +++ b/src/components/common/ModalCommon/ModalCommon.tsx @@ -1,6 +1,6 @@ import React, { useRef } from 'react' import { Close } from 'src/components/icons' -import { useOnClickOutside } from 'src/utils/useClickOutSide' +import { useOnClickOutside } from 'src/components/hooks/useClickOutSide' import s from './ModalCommon.module.scss' export interface ModalCommonProps { onClose: () => void diff --git a/src/utils/useClickOutSide.ts b/src/components/hooks/useClickOutSide.ts similarity index 92% rename from src/utils/useClickOutSide.ts rename to src/components/hooks/useClickOutSide.ts index d68e742fb..ff69007a8 100644 --- a/src/utils/useClickOutSide.ts +++ b/src/components/hooks/useClickOutSide.ts @@ -1,5 +1,5 @@ import { RefObject, useEffect } from 'react' -import { MouseAndTouchEvent } from './types.utils' +import { MouseAndTouchEvent } from '../../utils/types.utils' export function useOnClickOutside( ref: RefObject, diff --git a/src/components/icons/Shipping.tsx b/src/components/icons/Shipping.tsx new file mode 100644 index 000000000..2288c142c --- /dev/null +++ b/src/components/icons/Shipping.tsx @@ -0,0 +1,20 @@ +import React from 'react' + +const Shipping = () => { + return ( + + + + ) +} + +export default Shipping diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 3473bb29e..8bdbb1740 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -23,4 +23,5 @@ export { default as IconPasswordCross } from './IconPasswordCross' export { default as IconError } from './IconError' export { default as IconCheck } from './IconCheck' export { default as IconPlus } from './IconPlus' -export { default as IconMinus } from './IconMinus' \ No newline at end of file +export { default as IconMinus } from './IconMinus' +export { default as Shipping} from './Shipping' \ No newline at end of file diff --git a/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.module.scss b/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx b/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx new file mode 100644 index 000000000..96bb74d3f --- /dev/null +++ b/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import s from "CheckoutBill.module.scss" +interface CheckoutBillProps { + +} + +const CheckoutBill = ({}: CheckoutBillProps) => { + return ( +
+
+ +
+
+ +
+
+ +
+
+ ) +} + +export default CheckoutBill diff --git a/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.module.scss b/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.module.scss new file mode 100644 index 000000000..b34630fed --- /dev/null +++ b/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.module.scss @@ -0,0 +1,39 @@ +.warpper{ + .header{ + @apply flex justify-between; + padding-bottom: 3.2rem; + .left{ + @apply flex items-center; + .number{ + width: 3.2rem; + height: 3.2rem; + border-radius: 100%; + border: 1px solid var(--text-active); + color: var(--text-active); + @apply flex justify-center items-center font-bold; + &.visible{ + background-color: var(--text-active); + border: none; + color: var(--white); + } + } + .title{ + padding-left: 2.4rem; + @apply font-bold select-none cursor-pointer; + color: var(--text-active); + } + } + .edit{ + @apply font-bold cursor-pointer; + text-decoration-line: underline; + margin-right: 5.6rem; + } + } + .body{ + height: 0; + @apply overflow-hidden; + &.show{ + height: initial; + } + } +} \ No newline at end of file diff --git a/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.tsx b/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.tsx new file mode 100644 index 000000000..b4825730a --- /dev/null +++ b/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.tsx @@ -0,0 +1,48 @@ +import classNames from 'classnames' +import React from 'react' +import s from './CheckoutCollapse.module.scss' +interface CheckoutCollapseProps { + visible: boolean + id: number + children: React.ReactNode + title: string + isEdit: boolean + onClose: () => void + onOpen: () => void +} + +const CheckoutCollapse = ({ + children, + id, + title, + isEdit, + visible, + onOpen, + onClose, +}: CheckoutCollapseProps) => { + const handleTitleClick = () => { + if(visible){ + onClose && onClose() + }else{ + onOpen && onOpen() + } + } + return ( +
+
+
+
+ {id} +
+
+ {title} +
+
+ {isEdit &&
{'Edit'}
} +
+
{children}
+
+ ) +} + +export default CheckoutCollapse diff --git a/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss b/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss new file mode 100644 index 000000000..f5b7ddcde --- /dev/null +++ b/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss @@ -0,0 +1,13 @@ +@import "../../../../../styles/utilities"; +.warpper{ + @apply u-form; + padding: 0 5.6rem; + .bottom{ + margin-top: 2.4rem; + @apply flex justify-between items-center; + .note{ + font-size: 1.2rem; + line-height: 2rem; + } + } +} \ No newline at end of file diff --git a/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.tsx new file mode 100644 index 000000000..a821c66eb --- /dev/null +++ b/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.tsx @@ -0,0 +1,51 @@ +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 s from './CustomerInfoForm.module.scss' +interface CustomerInfoFormProps { + onConfirm?: ()=>void +} + +const CustomerInfoForm = ({}: CustomerInfoFormProps) => { + const nameRef = useRef>(null); + const emailRef = useRef>(null); + + + + const handleConfirmClick = () => { + return { + name:nameRef?.current?.getValue(), + email:emailRef.current?.getValue() + } + } + + return ( +
+
+ + +
+
+
+ By clicking continue you agree to Casper's{' '} + { + + terms and conditions + + }{' '} + and{' '} + { + + privacy policy + + } + . +
+ Continue to Shipping +
+
+ ) +} + +export default CustomerInfoForm diff --git a/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.module.scss b/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx b/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx new file mode 100644 index 000000000..4b8410177 --- /dev/null +++ b/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +interface PaymentInfoFormProps { + +} + +const PaymentInfoForm = (props: PaymentInfoFormProps) => { + return ( +
+ +
+ ) +} + +export default PaymentInfoForm diff --git a/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss b/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss new file mode 100644 index 000000000..439fb2628 --- /dev/null +++ b/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss @@ -0,0 +1,36 @@ +@import "../../../../../styles/utilities"; +.warpper{ + @apply u-form; + padding: 0 5.6rem; + .bottom{ + margin-top: 2.4rem; + @apply flex justify-between items-center; + .note{ + font-size: 1.2rem; + line-height: 2rem; + } + } + .line{ + >div{ + width: 50%; + } + } + .method{ + width: 100%; + height: 5.6rem; + padding: 1.6rem; + border-radius: 0.8rem; + @apply flex justify-between items-center border border-solid border-line bg-gray; + .left{ + @apply flex; + .name{ + margin-left: 1.6rem; + color: var(--text-active); + } + } + .price{ + font-weight: bold; + color: var(--text-active); + } + } +} \ No newline at end of file diff --git a/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.tsx b/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.tsx new file mode 100644 index 000000000..d8c858399 --- /dev/null +++ b/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.tsx @@ -0,0 +1,93 @@ +import React, { useRef } from 'react' +import { ButtonCommon, Inputcommon, SelectCommon } from 'src/components/common' +import s from './ShippingInfoForm.module.scss' +import Link from 'next/link' +import { CustomInputCommon } from 'src/utils/type.utils' +import { Shipping } from 'src/components/icons' + +interface ShippingInfoFormProps {} + +const option = [ + { + name: 'Hồ Chí Minh', + }, + { + name: 'Hà Nội', + }, +] + +const ShippingInfoForm = ({}: ShippingInfoFormProps) => { + const addressRef = useRef(null) + const cityRef = useRef(null) + const stateRef = useRef(null) + const codeRef = useRef(null) + const phoneRef = useRef(null) + const handleConfirmClick = () => { + return { + address: addressRef?.current?.getValue(), + city: cityRef.current?.getValue(), + state: stateRef?.current?.getValue(), + code: codeRef.current?.getValue(), + phone: phoneRef?.current?.getValue(), + } + } + + return ( +
+
+ + +
+ State + +
+ +
+
+
+ +
+
+ Standard Delivery Method +
+
+
+
+ Free +
+
+
+
+
+
+ By clicking continue you agree to Casper's{' '} + { + + terms and conditions + + }{' '} + and{' '} + { + + privacy policy + + } + . +
+ + Continue to Payment + +
+
+ ) +} + +export default ShippingInfoForm diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts index 2c99df73a..6fa8df0e8 100644 --- a/src/utils/types.utils.ts +++ b/src/utils/types.utils.ts @@ -20,4 +20,17 @@ export interface RecipeProps { imageSrc: string } +export interface CheckOutForm { + name: string + email:string + address: string + city:string + state:string + code:number + phone:number + method:string + shipping_fee:number +} + + export type MouseAndTouchEvent = MouseEvent | TouchEvent \ No newline at end of file