From 6b397fc1531d6f028f49527f3532512f139ed854 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 21 Oct 2021 10:20:17 +0700 Subject: [PATCH] :sparkles: feat: set shipping method :%s --- framework/vendure/schema.d.ts | 7 +++ .../eligible-shipping-methods-query.ts | 13 ++++++ src/components/hooks/order/index.ts | 3 ++ .../hooks/order/useApplyCouponCode.tsx | 4 +- .../order/useEligibleShippingMethods.tsx | 14 ++++++ .../hooks/order/useSetCustomerForOrder.tsx | 4 +- .../order/useSetOrderShippingAddress.tsx | 5 +-- .../hooks/order/useSetOrderShippingMethod.tsx | 4 +- .../checkout/CheckoutBill/CheckoutBill.tsx | 1 - .../checkout/CheckoutInfo/CheckoutInfo.tsx | 8 ++-- .../ShippingMethod/ShippingMethod.module.scss | 11 ----- .../ShippingMethod/ShippingMethod.tsx | 43 ++++--------------- .../checkout/CheckoutPage/CheckoutPage.tsx | 4 +- 13 files changed, 61 insertions(+), 60 deletions(-) create mode 100644 framework/vendure/utils/queries/eligible-shipping-methods-query.ts create mode 100644 src/components/hooks/order/useEligibleShippingMethods.tsx diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index cc3c0bc9c..df1f3c706 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -377,6 +377,13 @@ export type SetShippingMethodMutation = { | Pick; }; + +export type GetEligibleMethodsQuery = { + eligibleShippingMethods: Array< + Pick + >; +}; + export type Asset = Node & { __typename?: 'Asset' id: Scalars['ID'] diff --git a/framework/vendure/utils/queries/eligible-shipping-methods-query.ts b/framework/vendure/utils/queries/eligible-shipping-methods-query.ts new file mode 100644 index 000000000..a85b6f102 --- /dev/null +++ b/framework/vendure/utils/queries/eligible-shipping-methods-query.ts @@ -0,0 +1,13 @@ +export const getEligibleShippingMethods = /* GraphQL */ ` +query getEligibleShippingMethods { + eligibleShippingMethods { + id + name + description + price + priceWithTax + metadata + __typename + } +} +` diff --git a/src/components/hooks/order/index.ts b/src/components/hooks/order/index.ts index b7d785c92..9c20a24be 100644 --- a/src/components/hooks/order/index.ts +++ b/src/components/hooks/order/index.ts @@ -3,3 +3,6 @@ export { default as useSetOrderShippingAddress } from './useSetOrderShippingAddr export { default as useApplyCouponCode } from './useApplyCouponCode' export { default as useAvailableCountries } from './useAvailableCountries' export { default as useSetOrderShippingMethod } from './useSetOrderShippingMethod' +export { default as useGetActiveOrderForCheckout } from './useGetActiveOrderForCheckout' +export { default as useEligibleShippingMethods } from './useEligibleShippingMethods' + diff --git a/src/components/hooks/order/useApplyCouponCode.tsx b/src/components/hooks/order/useApplyCouponCode.tsx index be2c77878..329682ed8 100644 --- a/src/components/hooks/order/useApplyCouponCode.tsx +++ b/src/components/hooks/order/useApplyCouponCode.tsx @@ -3,13 +3,13 @@ import { applyCouponCodeMutation } from '@framework/utils/mutations/apply-coupon import { useState } from 'react' import { CommonError } from 'src/domains/interfaces/CommonError' import rawFetcher from 'src/utils/rawFetcher' -import { useGetActiveOrder } from '../cart' +import { useGetActiveOrderForCheckout } from '.' const useApplyCouponCode = () => { const [loading, setLoading] = useState(false) const [error, setError] = useState(null) - const { mutate } = useGetActiveOrder() + const { mutate } = useGetActiveOrderForCheckout() const applyCouponCode = (couponCode: string, fCallBack: (isSuccess: boolean, message?: string) => void diff --git a/src/components/hooks/order/useEligibleShippingMethods.tsx b/src/components/hooks/order/useEligibleShippingMethods.tsx new file mode 100644 index 000000000..cd4b64019 --- /dev/null +++ b/src/components/hooks/order/useEligibleShippingMethods.tsx @@ -0,0 +1,14 @@ +import { GetEligibleMethodsQuery, ShippingMethodQuote } from '@framework/schema' +import { getEligibleShippingMethods } from '@framework/utils/queries/eligible-shipping-methods-query' +import gglFetcher from 'src/utils/gglFetcher' +import useSWR from 'swr' + +const useEligibleShippingMethods = () => { + const { data, isValidating } = useSWR([getEligibleShippingMethods], gglFetcher) + return { + eligibleShippingMethods: data?.eligibleShippingMethods as ShippingMethodQuote[], + loading: isValidating, + } +} + +export default useEligibleShippingMethods diff --git a/src/components/hooks/order/useSetCustomerForOrder.tsx b/src/components/hooks/order/useSetCustomerForOrder.tsx index beb1e5b72..028f255cc 100644 --- a/src/components/hooks/order/useSetCustomerForOrder.tsx +++ b/src/components/hooks/order/useSetCustomerForOrder.tsx @@ -3,13 +3,13 @@ import { setCustomerForOrderMutation } from '@framework/utils/mutations/set-cust import { useState } from 'react' import { CommonError } from 'src/domains/interfaces/CommonError' import rawFetcher from 'src/utils/rawFetcher' -import { useGetActiveOrder } from '../cart' +import { useGetActiveOrderForCheckout } from '.' const useSetCustomerForOrder = () => { const [loading, setLoading] = useState(false) const [error, setError] = useState(null) - const { mutate } = useGetActiveOrder() + const { mutate } = useGetActiveOrderForCheckout() const setCustomerForOrder = (input: CreateCustomerInput, fCallBack: (isSuccess: boolean, message?: CommonError) => void diff --git a/src/components/hooks/order/useSetOrderShippingAddress.tsx b/src/components/hooks/order/useSetOrderShippingAddress.tsx index 353cb01c7..be020c48f 100644 --- a/src/components/hooks/order/useSetOrderShippingAddress.tsx +++ b/src/components/hooks/order/useSetOrderShippingAddress.tsx @@ -3,13 +3,13 @@ import { setOrderShippingAddressMutation } from '@framework/utils/mutations/set- import { useState } from 'react' import { CommonError } from 'src/domains/interfaces/CommonError' import rawFetcher from 'src/utils/rawFetcher' -import { useGetActiveOrder } from '../cart' +import { useGetActiveOrderForCheckout } from '.' const useSetOrderShippingAddress = () => { const [loading, setLoading] = useState(false) const [error, setError] = useState(null) - const { mutate } = useGetActiveOrder() + const { mutate } = useGetActiveOrderForCheckout() const setOrderShippingAddress = (input: CreateAddressInput, fCallBack: (isSuccess: boolean, message?: string) => void @@ -21,7 +21,6 @@ const useSetOrderShippingAddress = () => { variables: { input }, }) .then(({ data }) => { - console.log("data: ", data) if (data.setOrderShippingAddress.__typename === 'Order') { fCallBack(true) mutate() diff --git a/src/components/hooks/order/useSetOrderShippingMethod.tsx b/src/components/hooks/order/useSetOrderShippingMethod.tsx index bed63f72b..6c4f48f5a 100644 --- a/src/components/hooks/order/useSetOrderShippingMethod.tsx +++ b/src/components/hooks/order/useSetOrderShippingMethod.tsx @@ -3,13 +3,13 @@ import { setShippingMethodMutation } from '@framework/utils/mutations/set-order- import { useState } from 'react' import { CommonError } from 'src/domains/interfaces/CommonError' import rawFetcher from 'src/utils/rawFetcher' -import { useGetActiveOrder } from '../cart' +import { useGetActiveOrderForCheckout } from '.' const useSetOrderShippingMethod = () => { const [loading, setLoading] = useState(false) const [error, setError] = useState(null) - const { mutate } = useGetActiveOrder() + const { mutate } = useGetActiveOrderForCheckout() const setOrderShippingMethod = (id: string, fCallBack: (isSuccess: boolean, message?: string) => void diff --git a/src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx b/src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx index dc4462704..4dae3484b 100644 --- a/src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx +++ b/src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx @@ -8,7 +8,6 @@ import s from './CheckoutBill.module.scss' import FormPromotionCode from './FormPromotionCode/FormPromotionCode' interface CheckoutBillProps { - // data: CardItemCheckoutProps[] data: CartCheckout | null } diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx index f48a41920..e96d3bda1 100644 --- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx +++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' import { Logo } from 'src/components/common' import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse' import { useActiveCustomer } from 'src/components/hooks/auth' -import useGetActiveOrderForCheckout from 'src/components/hooks/order/useGetActiveOrderForCheckout' +import { useGetActiveOrderForCheckout } from 'src/components/hooks/order' import s from './CheckoutInfo.module.scss' import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm' import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm' @@ -25,7 +25,6 @@ const CheckoutInfo = ({ onViewCart, currency = "" }: CheckoutInfoProps) => { const [doneSteps, setDoneSteps] = useState([]) const { order } = useGetActiveOrderForCheckout() const { customer } = useActiveCustomer() - console.log("active order checkout: ", order) useEffect(() => { if (customer) { @@ -91,6 +90,9 @@ const CheckoutInfo = ({ onViewCart, currency = "" }: CheckoutInfoProps) => { return `${streetLine1}, ${city}, ${province}, ${postalCode}, ${countryCode}, ${phoneNumber}` } return '' + case CheckoutStep.ShippingMethodInfo: + console.log('oder here: ', order?.shippingLine) + return `${order?.shippingLine.shippingMethod.name}, ${order?.shippingLine.priceWithTax ? `${order?.shippingLine.priceWithTax} ${currency}`: 'Free'}` || '' default: return "" } @@ -105,7 +107,7 @@ const CheckoutInfo = ({ onViewCart, currency = "" }: CheckoutInfoProps) => { { id: CheckoutStep.ShippingAddressInfo, title: 'Shipping Address Information', - form: , + form: , }, { id: CheckoutStep.ShippingMethodInfo, diff --git a/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethod.module.scss b/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethod.module.scss index d078368e4..225f3282a 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethod.module.scss +++ b/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethod.module.scss @@ -19,21 +19,10 @@ } .options { - @apply absolute transition-all duration-200 overflow-hidden; - transform: translateX(-100%); - opacity: 0; margin-top: 0.8rem; - top: 6rem; - left: 0; width: 100%; background: var(--white); border: 1px solid var(--border-line); border-radius: 0.8rem; - &.show { - z-index: 10; - opacity: 1; - transform: none; - position: initial; - } } } diff --git a/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethod.tsx b/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethod.tsx index 911650646..957df80d5 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethod.tsx +++ b/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethod.tsx @@ -1,31 +1,12 @@ import { ShippingMethodQuote } from '@framework/schema' -import classNames from 'classnames' import React, { memo, useState } from 'react' import { useMessage } from 'src/components/contexts' -import { useSetOrderShippingMethod } from 'src/components/hooks/order' +import { useEligibleShippingMethods, useSetOrderShippingMethod } from 'src/components/hooks/order' import { Shipping } from 'src/components/icons' import { CheckoutStep } from '../../CheckoutInfo' import s from './ShippingMethod.module.scss' import ShippingMethodItem from './ShippingMethodItem/ShippingMethodItem' -const MOCKUP_DATA = [ - { - "id": "1", - "name": "Standard Shipping", - "description": "", - "price": 0, - "priceWithTax": 0, - "code": "standard-shipping" - }, - { - "id": "2", - "name": "Express Shipping", - "description": "", - "price": 1000, - "priceWithTax": 1000, - "code": "express-shipping" - } -] interface Props { currency: string onConfirm: (id: number) => void @@ -33,20 +14,19 @@ interface Props { } const ShippingMethod = memo(({ currency, onConfirm }: Props) => { + const { eligibleShippingMethods } = useEligibleShippingMethods() const { setOrderShippingMethod } = useSetOrderShippingMethod() - const [selectedValue, setSelectedValue] = useState(MOCKUP_DATA[0]) + const [selectedValue, setSelectedValue] = useState(eligibleShippingMethods ? eligibleShippingMethods[0] : undefined) const { showMessageError } = useMessage() - const [isShowOptions, setIsShowOptions] = useState(true) const onChange = (id: string) => { - const newValue = MOCKUP_DATA.find(item => item.id === id) + const newValue = eligibleShippingMethods?.find(item => item.id === id) if (newValue) { setSelectedValue(newValue) if (newValue?.id) { setOrderShippingMethod(newValue?.id, onSubmitCalBack) } } - setIsShowOptions(false) } const onSubmitCalBack = (isSuccess: boolean, msg?: string) => { @@ -57,31 +37,26 @@ const ShippingMethod = memo(({ currency, onConfirm }: Props) => { } } - const onCollapseOptions = () => { - setIsShowOptions(!isShowOptions) - } - - return (
-
+
- {selectedValue.name} + {selectedValue?.name}
- {selectedValue.price ? `${selectedValue.price / 100} ${currency}` : "Free"} + {selectedValue?.price ? `${selectedValue?.price / 100} ${currency}` : "Free"}
-
+
    - {MOCKUP_DATA.map(item => { return (
    -
    +