From 3abada4777974b880fef9e0f82ff064a5ecc323e Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 19 Oct 2021 19:32:42 +0700 Subject: [PATCH] :sparkles: feat: show bill discount and total :%s --- framework/commerce/types/cart.ts | 2 ++ framework/commerce/types/common.ts | 1 + framework/vendure/schema.d.ts | 4 ++- .../vendure/utils/fragments/cart-fragment.ts | 6 ++++ framework/vendure/utils/normalize.ts | 6 ++++ .../CardItemCheckout/CardItemCheckout.tsx | 21 ++++++++----- .../checkout/CheckoutBill/CheckoutBill.tsx | 30 ++++++++++++------- .../checkout/CheckoutInfo/CheckoutInfo.tsx | 4 +-- .../checkout/CheckoutPage/CheckoutPage.tsx | 16 +++++----- 9 files changed, 61 insertions(+), 29 deletions(-) diff --git a/framework/commerce/types/cart.ts b/framework/commerce/types/cart.ts index 7fbfb23f7..15e24d32e 100644 --- a/framework/commerce/types/cart.ts +++ b/framework/commerce/types/cart.ts @@ -93,8 +93,10 @@ export type Cart = { // The sum of all the prices of all the items in the cart. // Duties, taxes and discounts included. totalPrice: number + totalQuantity: number // Discounts that have been applied on the cart. discounts?: Discount[] + totalDiscount: number } /** diff --git a/framework/commerce/types/common.ts b/framework/commerce/types/common.ts index 06908c464..d3eca1e68 100644 --- a/framework/commerce/types/common.ts +++ b/framework/commerce/types/common.ts @@ -1,6 +1,7 @@ export type Discount = { // The value of the discount, can be an amount or percentage value: number + description?: string } export type Measurement = { diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index ae4467159..b2e0f198e 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -3053,7 +3053,9 @@ export type CartFragment = { __typename?: 'Order' } & Pick< | 'currencyCode' > & { shippingAddress?: Maybe<{ __typename?: 'OrderAddress' } & Pick> - discounts?: Maybe<{ __typename?: 'Discount' } & Pick> + discounts: Array< + { __typename?: 'Discount' } & Pick + > customer?: Maybe<{ __typename?: 'Customer' } & Pick> lines: Array< { __typename?: 'OrderLine' } & Pick< diff --git a/framework/vendure/utils/fragments/cart-fragment.ts b/framework/vendure/utils/fragments/cart-fragment.ts index 8a7ac64e7..f0a34b8e3 100644 --- a/framework/vendure/utils/fragments/cart-fragment.ts +++ b/framework/vendure/utils/fragments/cart-fragment.ts @@ -9,6 +9,12 @@ export const cartFragment = /* GraphQL */ ` total totalWithTax currencyCode + discounts { + type + description + amount + amountWithTax + } customer { id firstName diff --git a/framework/vendure/utils/normalize.ts b/framework/vendure/utils/normalize.ts index e2a0fb83d..a3aeffd28 100644 --- a/framework/vendure/utils/normalize.ts +++ b/framework/vendure/utils/normalize.ts @@ -36,10 +36,12 @@ export function normalizeFavoriteProductResult(item: Favorite) { export function normalizeCart(order: CartFragment): Cart { + console.log("raw rs: ", order) return { id: order.id.toString(), createdAt: order.createdAt, taxesIncluded: true, + totalQuantity: order.totalQuantity, lineItemsSubtotalPrice: order.subTotalWithTax / 100, currency: { code: order.currencyCode }, subtotalPrice: order.subTotalWithTax / 100, @@ -58,6 +60,10 @@ export function normalizeCart(order: CartFragment): Cart { countryCode: order.shippingAddress?.countryCode || '', phoneNumber: order.shippingAddress?.phoneNumber || '', }, + totalDiscount: order.discounts?.reduce((total, item) => total + item.amountWithTax, 0) / 100 || 0, + discounts: order.discounts.map(item => { + return { value: item.amountWithTax, description: item.description } + }), lineItems: order.lines?.map((l) => ({ id: l.id, name: l.productVariant.name, diff --git a/src/components/common/CardItemCheckout/CardItemCheckout.tsx b/src/components/common/CardItemCheckout/CardItemCheckout.tsx index e67057aa6..40fbf6b37 100644 --- a/src/components/common/CardItemCheckout/CardItemCheckout.tsx +++ b/src/components/common/CardItemCheckout/CardItemCheckout.tsx @@ -1,24 +1,29 @@ +import { LineItem } from '@commerce/types/cart' import React from 'react' +import { ImgWithLink } from '..' import s from "./CardItemCheckout.module.scss" -import { ProductProps } from 'src/utils/types.utils' -export interface CardItemCheckoutProps extends ProductProps { - quantity:number +export interface CardItemCheckoutProps extends LineItem { + currency: { code: string } } -const CardItemCheckout = ({imageSrc,name,price,weight,quantity,category}: CardItemCheckoutProps) => { +const CardItemCheckout = ({ + quantity, + variant, + name, + currency }: CardItemCheckoutProps) => { return (
- image +
- {`${name} (${weight})`} + {name} {variant?.weight ? `(${variant.weight})` : ''}
- Quantity: + Quantity:
- {`${quantity} x ${price}`} + {`${quantity} x ${variant?.price} ${currency?.code}`}
diff --git a/src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx b/src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx index a7f593764..34d468f94 100644 --- a/src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx +++ b/src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx @@ -1,30 +1,38 @@ -import React from 'react' +import { Cart } from '@commerce/types/cart' +import React, { useMemo } from 'react' import { CardItemCheckout } from '../../../common' -import { CardItemCheckoutProps } from '../../../common/CardItemCheckout/CardItemCheckout' import s from './CheckoutBill.module.scss' import FormPromotionCode from './FormPromotionCode/FormPromotionCode' interface CheckoutBillProps { - data: CardItemCheckoutProps[] + // data: CardItemCheckoutProps[] + data: Cart | null } const CheckoutBill = ({ data }: CheckoutBillProps) => { + console.log("data here***: ", data) + return (
-
- Your cart ({data.length}) -
+
+ Your cart ({data?.totalQuantity}) +
- {data.map((item) => { - return + {data?.lineItems?.map((item) => { + return })}
- +
+ TODO: here +
+ Discount {(data?.discounts?.length || 0) > 0 && `(${data?.discounts?.map(item => item.description).join(",")})`} +
{data?.totalDiscount} {data?.currency?.code}
+
Subtotal -
RP 120.500
+
{data?.subtotalPrice} {data?.currency?.code}
Shipping @@ -32,7 +40,7 @@ const CheckoutBill = ({ data }: CheckoutBillProps) => {
Estimated Total -
RP 120.500
+
{data?.totalPrice} {data?.currency?.code}
diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx index 65321167e..fdab2da6f 100644 --- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx +++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx @@ -102,7 +102,7 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => { { id: CheckoutStep.CustomerInfo, title: 'Customer Information', - form: , + form: , }, { id: CheckoutStep.ShippingInfo, @@ -120,7 +120,7 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => { const { addProduct } = useAddProductToCart() const createOrder = () => { - addProduct({ variantId: "63", quantity: 1 }, handleAddToCartCallback) + addProduct({ variantId: "92", quantity: 2 }, handleAddToCartCallback) } const handleAddToCartCallback = (isSuccess: boolean, message?: string) => { // console.log("after create order: ", isSuccess, message) diff --git a/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx b/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx index 4755d329e..05bc176a7 100644 --- a/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx +++ b/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx @@ -2,6 +2,7 @@ import classNames from 'classnames' import React, { useState } from 'react' import { MessageCommon } from 'src/components/common' import { useMessage } from 'src/components/contexts' +import { useGetActiveOrder } from 'src/components/hooks/cart' import IconHide from 'src/components/icons/IconHide' import { CHECKOUT_BILL_DATA } from 'src/utils/demo-data' import { CheckoutBill, CheckoutInfo } from '..' @@ -9,29 +10,30 @@ import s from "./CheckoutPage.module.scss" interface CheckoutPageProps { } -const CheckoutPage = ({}: CheckoutPageProps) => { +const CheckoutPage = ({ }: CheckoutPageProps) => { const { messages, removeMessage } = useMessage() const [isShow, setIsShow] = useState(false) + const { order } = useGetActiveOrder() const onClose = () => { setIsShow(false) } - const onViewCart =() => { + const onViewCart = () => { setIsShow(true) } return (
-
-
-
+
+
+

Your Cart({CHECKOUT_BILL_DATA.length})

-
+
- +