-
-
-
-
-
-
-
-
-
+const PaymentInfoForm = ({onConfirm,id}: PaymentInfoFormProps) => {
+ const handleConfirmClick = () => {
+ onConfirm && onConfirm(id,{})
+ }
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ By clicking continue you agree to Casper's{' '}
+ {
+
+ terms and conditions
+
+ }{' '}
+ and{' '}
+ {
+
+ privacy policy
+
+ }
+ .
- )
+
+ Submit Order
+
+
+
+ )
}
export default PaymentInfoForm
diff --git a/src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss b/src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss
new file mode 100644
index 000000000..2038507d7
--- /dev/null
+++ b/src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss
@@ -0,0 +1,10 @@
+.warrper{
+ @apply flex;
+ .right{
+ min-width: 56.3rem;
+ }
+ .left{
+ @apply w-full;
+
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx b/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx
new file mode 100644
index 000000000..5e2275f46
--- /dev/null
+++ b/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CHECKOUT_BILL_DATA } from 'src/utils/demo-data'
+import { CheckoutBill, CheckoutInfo } from '..'
+import s from "./CheckoutPage.module.scss"
+interface CheckoutPageProps {
+
+}
+
+const CheckoutPage = ({}: CheckoutPageProps) => {
+ return (
+
+ )
+}
+
+export default CheckoutPage
diff --git a/src/components/modules/checkout/index.ts b/src/components/modules/checkout/index.ts
index 24a765b23..736375e4c 100644
--- a/src/components/modules/checkout/index.ts
+++ b/src/components/modules/checkout/index.ts
@@ -1 +1,3 @@
export { default as CheckoutInfo } from './CheckoutInfo/CheckoutInfo'
+export { default as CheckoutPage } from './CheckoutPage/CheckoutPage'
+export { default as CheckoutBill } from './CheckoutBill/CheckoutBill'
diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts
index 64c8128ae..a4ebee5dc 100644
--- a/src/utils/demo-data.ts
+++ b/src/utils/demo-data.ts
@@ -1,3 +1,4 @@
+import { CardItemCheckoutProps } from "src/components/common/CardItemCheckout/CardItemCheckout"
import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard"
export const PRODUCT_DATA_TEST = [
@@ -212,4 +213,34 @@ export const RECIPE_DATA_TEST: RecipeCardProps[] = [
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'
},
-]
\ No newline at end of file
+]
+
+export const CHECKOUT_BILL_DATA:CardItemCheckoutProps[] = [
+ {
+ 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",
+ quantity:10
+ },
+ {
+ name: 'Carrot',
+ slug: "carrot",
+ weight: '250g',
+ category: 'VEGGIE',
+ price: 'Rp 27.500',
+ imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png",
+ quantity:1
+ },
+ {
+ name: 'Salad',
+ slug:"salad",
+ weight: '250g',
+ category: 'VEGGIE',
+ price: 'Rp 27.500',
+ imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png",
+ quantity:2
+ },
+ ]
\ No newline at end of file
diff --git a/src/utils/funtion.utils.ts b/src/utils/funtion.utils.ts
index b1e7b5536..619e9ae30 100644
--- a/src/utils/funtion.utils.ts
+++ b/src/utils/funtion.utils.ts
@@ -1,3 +1,11 @@
export function isMobile() {
return window.innerWidth <= 768
+}
+
+export function removeItem
(arr: Array, value: T): Array {
+ const index = arr.indexOf(value);
+ if (index > -1) {
+ arr.splice(index, 1);
+ }
+ return [...arr];
}
\ No newline at end of file