From 3f6a27cbef804be3e627fa9f5c2a3ef2bcd84d22 Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 16:37:04 -0300 Subject: [PATCH 01/12] Add shipping info in get cart gql query --- src/queries/get-cart.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/queries/get-cart.js b/src/queries/get-cart.js index 632eae49..937bd075 100644 --- a/src/queries/get-cart.js +++ b/src/queries/get-cart.js @@ -81,6 +81,17 @@ query GET_CART { feeTotal discountTax discountTotal + availableShippingMethods { + packageDetails + rates { + id + label + cost + methodId + } + } + chosenShippingMethods + needsShippingAddress } } `; From 43d4b40fecdf9722e5a78f33d794289d2891110e Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 16:39:12 -0300 Subject: [PATCH 02/12] Add gql mutation to update shipping address --- src/mutations/update-shipping-address.js | 28 ++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/mutations/update-shipping-address.js diff --git a/src/mutations/update-shipping-address.js b/src/mutations/update-shipping-address.js new file mode 100644 index 00000000..4eae9bcf --- /dev/null +++ b/src/mutations/update-shipping-address.js @@ -0,0 +1,28 @@ +import { gql } from "@apollo/client"; + +/** + * Update Customer Shipping address. + * + * This query is used for updating the customer shipping address. + */ +const UPDATE_SHIPPING_ADDRESS = gql` +mutation UPDATE_SHIPPING_ADDRESS ($input: UpdateCustomerInput!) { + updateCustomer(input: $input) { + customer { + shipping { + address1 + address2 + city + state + postcode + phone + email + firstName + lastName + } + } + } +} +`; + +export default UPDATE_SHIPPING_ADDRESS; From aebda2537a5c72f59eb026a694d94ac9ad073970 Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 16:39:50 -0300 Subject: [PATCH 03/12] Add gql mutation to update shipping method option --- src/mutations/update-shipping-method.js | 34 +++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/mutations/update-shipping-method.js diff --git a/src/mutations/update-shipping-method.js b/src/mutations/update-shipping-method.js new file mode 100644 index 00000000..90a14ec6 --- /dev/null +++ b/src/mutations/update-shipping-method.js @@ -0,0 +1,34 @@ +import { gql } from "@apollo/client"; + +/** + * Update Shipping method. + * + * This query is used for updating the selected shipping method option. + */ +export const UpdateShippingMethod = ` + updateShippingMethod(input: $shippingMethod) { + cart { + availableShippingMethods { + packageDetails + supportsShippingCalculator + rates { + id + cost + label + } + } + chosenShippingMethods + shippingTotal + shippingTax + subtotal + subtotalTax + total + } + } +`; + +export const UPDATE_SHIPPING_METHOD = gql` + mutation UPDATE_SHIPPING_METHOD ($shippingMethod: UpdateShippingMethodInput!) { + ${UpdateShippingMethod} + } +`; From 0303c6c72ca697bf11d4d1645aa9669bd4942688 Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 16:41:14 -0300 Subject: [PATCH 04/12] Add shipping info in formattedCart Fix totalProductsPrice including shipping cost, changed to subtotal --- src/functions.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/functions.js b/src/functions.js index e3b79f66..2d7b5989 100644 --- a/src/functions.js +++ b/src/functions.js @@ -237,8 +237,17 @@ export const getFormattedCart = ( data ) => { formattedCart.products.push( product ); } + formattedCart.needsShippingAddress = data?.cart?.needsShippingAddress; + formattedCart.shippingMethod = data?.cart?.chosenShippingMethods[0] ?? ''; + formattedCart.shippingMethods = data?.cart?.availableShippingMethods + ? data?.cart?.availableShippingMethods[0]?.rates + : []; + formattedCart.shippingTotal = formattedCart?.shippingMethods?.find( + ship => ship.id == formattedCart?.shippingMethod + )?.cost; + formattedCart.totalProductsCount = totalProductsCount; - formattedCart.totalProductsPrice = data?.cart?.total ?? ''; + formattedCart.totalProductsPrice = data?.cart?.subtotal ?? ''; return formattedCart; From 784e7942be9bb8bc93e0839250285feb300fd316 Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 16:44:15 -0300 Subject: [PATCH 05/12] Add ShippingSelection component --- src/components/checkout/CheckoutForm.js | 15 ++- src/components/checkout/ShippingCosts.js | 160 +++++++++++++++++++++++ 2 files changed, 173 insertions(+), 2 deletions(-) create mode 100644 src/components/checkout/ShippingCosts.js diff --git a/src/components/checkout/CheckoutForm.js b/src/components/checkout/CheckoutForm.js index c419b099..c84bee14 100644 --- a/src/components/checkout/CheckoutForm.js +++ b/src/components/checkout/CheckoutForm.js @@ -18,6 +18,7 @@ import { } from "../../utils/checkout"; import CheckboxField from "./form-elements/CheckboxField"; import CLEAR_CART_MUTATION from "../../mutations/clear-cart"; +import ShippingCosts from './ShippingCosts'; // Use this for testing purposes, so you dont have to fill the checkout form over an over again. // const defaultCustomerInfo = { @@ -79,13 +80,18 @@ const CheckoutForm = ({countriesData}) => { const [createdOrderData, setCreatedOrderData] = useState({}); // Get Cart Data. - const {data} = useQuery(GET_CART, { + const { + loading: loadingCart, + data, + refetch + } = useQuery(GET_CART, { notifyOnNetworkStatusChange: true, onCompleted: () => { // Update cart in the localStorage. const updatedCart = getFormattedCart(data); localStorage.setItem('woo-next-cart', JSON.stringify(updatedCart)); + console.log("car refetch", data, updatedCart); // Update cart data in React Context. setCart(updatedCart); } @@ -257,7 +263,12 @@ const CheckoutForm = ({countriesData}) => { {/* Order*/}

Your Order

- + {/*Payment*/} diff --git a/src/components/checkout/ShippingCosts.js b/src/components/checkout/ShippingCosts.js new file mode 100644 index 00000000..bb2ad3fc --- /dev/null +++ b/src/components/checkout/ShippingCosts.js @@ -0,0 +1,160 @@ +import { useState } from 'react'; +import { v4 } from 'uuid'; +import { useMutation, useQuery } from '@apollo/client'; +import UPDATE_SHIPPING_ADDRESS from "../../mutations/update-shipping-address"; +import { UPDATE_SHIPPING_METHOD } from "../../mutations/update-shipping-method"; +import Loading from "../icons/Loading"; +import { isEmpty } from 'lodash'; +import cx from 'classnames'; + +const ShippingSelection = ({ + cart, + refetchCart, + shippingAddress, + loadingCart, + setRequestError +}) => { + + const [ + shippingMethod, + setShippingMethod + ] = useState(cart?.shippingMethod ?? ''); + + const requestDefaultOptions = { + onCompleted: () => { + console.log("completed, refetch"); + refetchCart('cart'); + }, + onError: (error) => { + if (error) { + const errorMessage = !isEmpty(error?.graphQLErrors?.[0]) + ? error.graphQLErrors[0]?.message + : ''; + console.warn(error); + if (setRequestError) { + setRequestError(errorMessage); + } + } + } + }; + + // Update Customer Shipping Address for cart shipping calculations. + const [updateShippingAddress, { + data: updatedShippingData, + loading: updatingShippinZipcode, + error: updateShippingAddressError + }] = useMutation(UPDATE_SHIPPING_ADDRESS, requestDefaultOptions); + + // Update Shipping Method. + const [ShippingSelectionMethod, { + data: chosenShippingData, + loading: choosingShippingMethod, + error: ShippingSelectionError + }] = useMutation(UPDATE_SHIPPING_METHOD, requestDefaultOptions); + + const handleCalcShippingClick = async (event) => { + // if (cart?.customer?.shipping.address1 != shippingAddress.address1 + // || cart?.customer?.shipping.city != shippingAddress.city + // || cart?.customer?.shipping.state != shippingAddress.state + // || cart?.customer?.shipping.postcode != shippingAddress.postcode + // ) { + const { errors, ...shipping } = shippingAddress; + console.log("update shipping add", shipping); + updateShippingAddress({ + variables: { + input: { + clientMutationId: v4(), + shipping, + } + }, + }); + // } + }; + + const handleShippingSelection = (event) => { + const chosenShippingMethod = event.target.value; + + setShippingMethod(chosenShippingMethod); + + if (chosenShippingMethod != shippingMethod) { + console.log("mutate shipping method", chosenShippingMethod, shippingMethod); + ShippingSelectionMethod({ + variables: { + shippingMethod: { + clientMutationId: v4(), + shippingMethods: [chosenShippingMethod], + } + }, + }); + + }; + } + console.log("shipping method", cart?.availableShippingMethods); + return ( +
+ {cart?.needsShippingAddress && + <> +

Shipping Costs

+
+ {shippingAddress?.country && shippingAddress?.state && shippingAddress?.postcode && +
+
+ { + <> + +

+ {shippingAddress.address1} + - {shippingAddress.city} + / {shippingAddress.state} +

+ + } + {cart?.shippingMethods?.length + &&
+
+

+ Choose Shipping Method +

+ {(updatingShippinZipcode || loadingCart) && + + } +
+
+ {cart?.shippingMethods?.map(method => ( +
+ +
+ ))} +
+ } +
+
+ } + + } +
+ ) + +}; + +export default ShippingSelection; From e939007d63453aaf91f28bc57dbf91853523728f Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 17:07:21 -0300 Subject: [PATCH 06/12] Add shipping costs fields validation --- src/components/checkout/CheckoutForm.js | 51 ++++++---- src/components/checkout/ShippingCosts.js | 120 +++++++++++++---------- 2 files changed, 101 insertions(+), 70 deletions(-) diff --git a/src/components/checkout/CheckoutForm.js b/src/components/checkout/CheckoutForm.js index c84bee14..a82ba80e 100644 --- a/src/components/checkout/CheckoutForm.js +++ b/src/components/checkout/CheckoutForm.js @@ -114,40 +114,50 @@ const CheckoutForm = ({countriesData}) => { const [ clearCartMutation ] = useMutation( CLEAR_CART_MUTATION ); - /* - * Handle form submit. - * - * @param {Object} event Event Object. + /** + * Validate Billing and Shipping Details * - * @return {void} + * Note: + * 1. If billing is different than shipping address, only then validate billing. + * 2. We are passing theBillingStates?.length and theShippingStates?.length, so that + * the respective states should only be mandatory, if a country has states. */ - const handleFormSubmit = async (event) => { - event.preventDefault(); + const validateFields = () => { + let isValid= true; - /** - * Validate Billing and Shipping Details - * - * Note: - * 1. If billing is different than shipping address, only then validate billing. - * 2. We are passing theBillingStates?.length and theShippingStates?.length, so that - * the respective states should only be mandatory, if a country has states. - */ - const billingValidationResult = input?.billingDifferentThanShipping ? validateAndSanitizeCheckoutForm(input?.billing, theBillingStates?.length) : {errors: null, isValid: true}; + const billingValidationResult = input?.billingDifferentThanShipping ? validateAndSanitizeCheckoutForm(input?.billing, theBillingStates?.length) : { errors: null, isValid: true }; const shippingValidationResult = validateAndSanitizeCheckoutForm(input?.shipping, theShippingStates?.length); if (!shippingValidationResult.isValid || !billingValidationResult.isValid) { setInput({ ...input, - billing: {...input.billing, errors: billingValidationResult.errors}, - shipping: {...input.shipping, errors: shippingValidationResult.errors} + billing: { ...input.billing, errors: billingValidationResult.errors }, + shipping: { ...input.shipping, errors: shippingValidationResult.errors } }); + isValid = false; + } + + return isValid; + }; + + /* + * Handle form submit. + * + * @param {Object} event Event Object. + * + * @return {void} + */ + const handleFormSubmit = async (event) => { + event.preventDefault(); + + if( ! validateFields() ) { return; } - if ( 'stripe-mode' === input.paymentMethod ) { + if ('stripe-mode' === input.paymentMethod) { const createdOrderData = await handleStripeCheckout(input, cart?.products, setRequestError, clearCartMutation, setIsStripeOrderProcessing, setCreatedOrderData); - return null; + return null; } const checkOutData = createCheckoutData(input); @@ -268,6 +278,7 @@ const CheckoutForm = ({countriesData}) => { refetchCart={refetch} shippingAddress={input?.shipping} loadingCart={loadingCart} + validateFields={validateFields} /> {/*Payment*/} diff --git a/src/components/checkout/ShippingCosts.js b/src/components/checkout/ShippingCosts.js index bb2ad3fc..fdd204b3 100644 --- a/src/components/checkout/ShippingCosts.js +++ b/src/components/checkout/ShippingCosts.js @@ -12,7 +12,8 @@ const ShippingSelection = ({ refetchCart, shippingAddress, loadingCart, - setRequestError + validateFields, + // setRequestError }) => { const [ @@ -20,6 +21,8 @@ const ShippingSelection = ({ setShippingMethod ] = useState(cart?.shippingMethod ?? ''); + const [requestError, setRequestError] = useState(null); + const requestDefaultOptions = { onCompleted: () => { console.log("completed, refetch"); @@ -53,12 +56,24 @@ const ShippingSelection = ({ }] = useMutation(UPDATE_SHIPPING_METHOD, requestDefaultOptions); const handleCalcShippingClick = async (event) => { + + setRequestError(""); + if (!validateFields()) { + setRequestError('Please fill out all required shipping fields to calculate shipping costs.'); + return; + } // if (cart?.customer?.shipping.address1 != shippingAddress.address1 // || cart?.customer?.shipping.city != shippingAddress.city // || cart?.customer?.shipping.state != shippingAddress.state // || cart?.customer?.shipping.postcode != shippingAddress.postcode // ) { - const { errors, ...shipping } = shippingAddress; + const { + errors, + createAccount, + orderNotes, + ...shipping + } = shippingAddress; + console.log("update shipping add", shipping); updateShippingAddress({ variables: { @@ -96,60 +111,65 @@ const ShippingSelection = ({ <>

Shipping Costs

- {shippingAddress?.country && shippingAddress?.state && shippingAddress?.postcode && -
-
- { - <> - -

+

+
+ { + <> + + {requestError + ?

{requestError}

+ :

{shippingAddress.address1} - {shippingAddress.city} / {shippingAddress.state}

- - } - {cart?.shippingMethods?.length - &&
-
-

- Choose Shipping Method -

- {(updatingShippinZipcode || loadingCart) && - - } -
-
- {cart?.shippingMethods?.map(method => ( -
- -
- ))} + } + + } + {shippingAddress?.country + && shippingAddress?.state + && shippingAddress?.postcode + && cart?.shippingMethods?.length + &&
+
+

+ Choose Shipping Method +

+ {(updatingShippinZipcode || loadingCart) && + + }
- } -
+
+ {cart?.shippingMethods?.map(method => ( +
+ +
+ ))} +
+ }
- } +
+ }
From 5f6a0771b6cbf109fa35992df6e536727ae9d3ec Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 17:33:43 -0300 Subject: [PATCH 07/12] Add loading feedback in calculate shipping costs Also when cart is reloading and when choosing the shipping method --- src/components/checkout/ShippingCosts.js | 55 +++++++++++++++++------- src/functions.js | 1 + 2 files changed, 41 insertions(+), 15 deletions(-) diff --git a/src/components/checkout/ShippingCosts.js b/src/components/checkout/ShippingCosts.js index fdd204b3..af4157e2 100644 --- a/src/components/checkout/ShippingCosts.js +++ b/src/components/checkout/ShippingCosts.js @@ -44,7 +44,7 @@ const ShippingSelection = ({ // Update Customer Shipping Address for cart shipping calculations. const [updateShippingAddress, { data: updatedShippingData, - loading: updatingShippinZipcode, + loading: updatingShippingAddress, error: updateShippingAddressError }] = useMutation(UPDATE_SHIPPING_ADDRESS, requestDefaultOptions); @@ -67,14 +67,13 @@ const ShippingSelection = ({ // || cart?.customer?.shipping.state != shippingAddress.state // || cart?.customer?.shipping.postcode != shippingAddress.postcode // ) { - const { - errors, + const { + errors, createAccount, orderNotes, - ...shipping + ...shipping } = shippingAddress; - console.log("update shipping add", shipping); updateShippingAddress({ variables: { input: { @@ -104,9 +103,18 @@ const ShippingSelection = ({ }; } - console.log("shipping method", cart?.availableShippingMethods); + + const isLoading = updatingShippingAddress + || choosingShippingMethod + || loadingCart; + return ( -
+
{cart?.needsShippingAddress && <>

Shipping Costs

@@ -116,12 +124,12 @@ const ShippingSelection = ({ { <>
@@ -157,7 +169,7 @@ const ShippingSelection = ({ type="radio" name="chosenShippingMethod" className="my-2" - disabled={updatingShippinZipcode} + disabled={isLoading} value={method.id} onChange={handleShippingSelection} checked={shippingMethod == method.id} @@ -169,7 +181,20 @@ const ShippingSelection = ({ }
- + + + + + + + + + + + +
+ Shipping{cart.shippingTotal}
+ Total{cart.total}
} diff --git a/src/functions.js b/src/functions.js index 2d7b5989..8b606990 100644 --- a/src/functions.js +++ b/src/functions.js @@ -248,6 +248,7 @@ export const getFormattedCart = ( data ) => { formattedCart.totalProductsCount = totalProductsCount; formattedCart.totalProductsPrice = data?.cart?.subtotal ?? ''; + formattedCart.total = data?.cart?.total ?? ''; return formattedCart; From 4b6e98cef306b24de4432a522843a391015b94dc Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 17:41:07 -0300 Subject: [PATCH 08/12] Add spinner as loading image --- src/components/LoadingImg.js | 18 ++++++++++++++++++ src/components/checkout/ShippingCosts.js | 4 ++-- 2 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 src/components/LoadingImg.js diff --git a/src/components/LoadingImg.js b/src/components/LoadingImg.js new file mode 100644 index 00000000..fa577563 --- /dev/null +++ b/src/components/LoadingImg.js @@ -0,0 +1,18 @@ +import Image from 'next/image'; + + +const LoadingImg = (props) => { + + return ( + + Carregando... + + ); +}; + +export default LoadingImg; diff --git a/src/components/checkout/ShippingCosts.js b/src/components/checkout/ShippingCosts.js index af4157e2..8ce7855f 100644 --- a/src/components/checkout/ShippingCosts.js +++ b/src/components/checkout/ShippingCosts.js @@ -3,7 +3,7 @@ import { v4 } from 'uuid'; import { useMutation, useQuery } from '@apollo/client'; import UPDATE_SHIPPING_ADDRESS from "../../mutations/update-shipping-address"; import { UPDATE_SHIPPING_METHOD } from "../../mutations/update-shipping-method"; -import Loading from "../icons/Loading"; +import LoadingImg from "../LoadingImg"; import { isEmpty } from 'lodash'; import cx from 'classnames'; @@ -158,7 +158,7 @@ const ShippingSelection = ({ Choose Shipping Method {isLoading && - + }
From 9ea674a4fcf1cffd0f00e2661780e70df5e093de Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 23:21:29 -0300 Subject: [PATCH 09/12] Add get customer info using gql query Also add customer info into formattedCart --- src/functions.js | 9 +++++++++ src/queries/get-cart.js | 2 ++ src/queries/get-customer.js | 26 ++++++++++++++++++++++++++ 3 files changed, 37 insertions(+) create mode 100644 src/queries/get-customer.js diff --git a/src/functions.js b/src/functions.js index 8b606990..ea0bd12f 100644 --- a/src/functions.js +++ b/src/functions.js @@ -250,6 +250,15 @@ export const getFormattedCart = ( data ) => { formattedCart.totalProductsPrice = data?.cart?.subtotal ?? ''; formattedCart.total = data?.cart?.total ?? ''; + if (data?.customer) { + let customer = { + ...data?.customer, + shipping: { ...data?.customer?.shipping }, + billing: { ...data?.customer?.billing } + }; + formattedCart.customer = customer; + } + return formattedCart; }; diff --git a/src/queries/get-cart.js b/src/queries/get-cart.js index 937bd075..0d428bcd 100644 --- a/src/queries/get-cart.js +++ b/src/queries/get-cart.js @@ -1,4 +1,5 @@ import { gql } from "@apollo/client"; +import { GetCustomer } from "./get-customer"; const GET_CART = gql` query GET_CART { @@ -93,6 +94,7 @@ query GET_CART { chosenShippingMethods needsShippingAddress } + ${GetCustomer} } `; diff --git a/src/queries/get-customer.js b/src/queries/get-customer.js new file mode 100644 index 00000000..31175030 --- /dev/null +++ b/src/queries/get-customer.js @@ -0,0 +1,26 @@ +import { gql } from "@apollo/client"; + +export const GetCustomer = ` +customer { + email + shipping { + address1 + address2 + city + company + country + email + firstName + lastName + phone + postcode + state + } +} +`; + +export const GET_CUSTOMER = gql` +query GET_CUSTOMER { + ${GetCustomer} +} +`; From 1f50d15e13b729bc12fd02dc0db01b9caf575142 Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 23:34:52 -0300 Subject: [PATCH 10/12] Add currency formatter in shipping costs --- src/components/checkout/ShippingCosts.js | 18 +++++++----------- src/functions.js | 17 +++++++++++++++++ 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/src/components/checkout/ShippingCosts.js b/src/components/checkout/ShippingCosts.js index 8ce7855f..93fd44ac 100644 --- a/src/components/checkout/ShippingCosts.js +++ b/src/components/checkout/ShippingCosts.js @@ -6,6 +6,7 @@ import { UPDATE_SHIPPING_METHOD } from "../../mutations/update-shipping-method"; import LoadingImg from "../LoadingImg"; import { isEmpty } from 'lodash'; import cx from 'classnames'; +import { formatCurrency } from "../../functions"; const ShippingSelection = ({ cart, @@ -62,11 +63,7 @@ const ShippingSelection = ({ setRequestError('Please fill out all required shipping fields to calculate shipping costs.'); return; } - // if (cart?.customer?.shipping.address1 != shippingAddress.address1 - // || cart?.customer?.shipping.city != shippingAddress.city - // || cart?.customer?.shipping.state != shippingAddress.state - // || cart?.customer?.shipping.postcode != shippingAddress.postcode - // ) { + const { errors, createAccount, @@ -82,7 +79,6 @@ const ShippingSelection = ({ } }, }); - // } }; const handleShippingSelection = (event) => { @@ -134,6 +130,9 @@ const ShippingSelection = ({ > Update Shipping Costs + {isLoading && + + } {requestError ?

{requestError}

:

@@ -157,9 +156,6 @@ const ShippingSelection = ({

Choose Shipping Method

- {isLoading && - - }
{cart?.shippingMethods?.map(method => ( @@ -173,7 +169,7 @@ const ShippingSelection = ({ value={method.id} onChange={handleShippingSelection} checked={shippingMethod == method.id} - /> {method.label} - {method.cost} + /> {method.label} - {formatCurrency(method.cost)} ))} @@ -186,7 +182,7 @@ const ShippingSelection = ({ Shipping - {cart.shippingTotal} + {formatCurrency(cart.shippingTotal)} diff --git a/src/functions.js b/src/functions.js index ea0bd12f..ea9c461f 100644 --- a/src/functions.js +++ b/src/functions.js @@ -14,6 +14,23 @@ export const getFloatVal = ( string ) => { }; +/** + * Format float value as Currency string. + * + * @param {float} num The number to be formatted. + * @return {string} + */ + export const formatCurrency = (num, currency = '$') => { + let floatValue = num; + if ('string' === typeof floatValue) { + floatValue = getFloatVal(floatValue); + } + if( ! floatValue ) { + floatValue = 0; + } + return (currency + floatValue.toFixed(2)); +}; + /** * Add first product. * From 118046c85ffa8f4ae29b7986dd19ecc008e64e36 Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 23:36:22 -0300 Subject: [PATCH 11/12] Cleanup debug code --- src/components/checkout/CheckoutForm.js | 1 - src/components/checkout/ShippingCosts.js | 2 -- 2 files changed, 3 deletions(-) diff --git a/src/components/checkout/CheckoutForm.js b/src/components/checkout/CheckoutForm.js index a82ba80e..0ce5ef3c 100644 --- a/src/components/checkout/CheckoutForm.js +++ b/src/components/checkout/CheckoutForm.js @@ -91,7 +91,6 @@ const CheckoutForm = ({countriesData}) => { const updatedCart = getFormattedCart(data); localStorage.setItem('woo-next-cart', JSON.stringify(updatedCart)); - console.log("car refetch", data, updatedCart); // Update cart data in React Context. setCart(updatedCart); } diff --git a/src/components/checkout/ShippingCosts.js b/src/components/checkout/ShippingCosts.js index 93fd44ac..87c19c02 100644 --- a/src/components/checkout/ShippingCosts.js +++ b/src/components/checkout/ShippingCosts.js @@ -26,7 +26,6 @@ const ShippingSelection = ({ const requestDefaultOptions = { onCompleted: () => { - console.log("completed, refetch"); refetchCart('cart'); }, onError: (error) => { @@ -87,7 +86,6 @@ const ShippingSelection = ({ setShippingMethod(chosenShippingMethod); if (chosenShippingMethod != shippingMethod) { - console.log("mutate shipping method", chosenShippingMethod, shippingMethod); ShippingSelectionMethod({ variables: { shippingMethod: { From 34fc683de371d3ce4a4d7bc4495644ed3c562152 Mon Sep 17 00:00:00 2001 From: Fabio Jun Date: Tue, 1 Mar 2022 23:49:25 -0300 Subject: [PATCH 12/12] Fix shipping costs not using address set in cart --- src/components/checkout/ShippingCosts.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/checkout/ShippingCosts.js b/src/components/checkout/ShippingCosts.js index 87c19c02..f53b61cb 100644 --- a/src/components/checkout/ShippingCosts.js +++ b/src/components/checkout/ShippingCosts.js @@ -14,7 +14,6 @@ const ShippingSelection = ({ shippingAddress, loadingCart, validateFields, - // setRequestError }) => { const [ @@ -136,18 +135,18 @@ const ShippingSelection = ({ :

{ [ - shippingAddress.address1, - shippingAddress.city, - shippingAddress.state + cart?.customer?.shipping?.address1, + cart?.customer?.shipping?.city, + cart?.customer?.shipping?.state ].filter(val => val).join(' - ') }

} } - {shippingAddress?.country - && shippingAddress?.state - && shippingAddress?.postcode + {cart?.customer?.shipping?.country + && cart?.customer?.shipping?.state + && cart?.customer?.shipping?.postcode && cart?.shippingMethods?.length &&