From ae03da74417e7bf93e6cd7e9ca1ed2de19feb2e8 Mon Sep 17 00:00:00 2001 From: Rajeev K Tomy Date: Wed, 19 Jan 2022 16:58:33 +0530 Subject: [PATCH 1/2] #259 login in dev mode not working --- .../src/context/App/customer/actions.js | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/reactapp/src/context/App/customer/actions.js b/src/reactapp/src/context/App/customer/actions.js index 4bfa74a1..f8d2cfaa 100644 --- a/src/reactapp/src/context/App/customer/actions.js +++ b/src/reactapp/src/context/App/customer/actions.js @@ -57,15 +57,25 @@ export async function ajaxLoginAction(dispatch, userCredentials) { if (!errors) { const sourceCartId = LocalStorage.getCartId(); const signInToken = _get(data, 'customer.signin_token'); - const cartId = _get(data, 'cart.cartId'); + const cartId = _get(data, 'cart.cartId') || sourceCartId; + LocalStorage.saveCartId(cartId); LocalStorage.saveCustomerToken(signInToken); - if (config.isDevelopmentMode && cartId) { - await mergeCartsRequest(dispatch, { - sourceCartId, - destinationCartId: cartId, - }); + if (config.isDevelopmentMode) { + if (cartId !== sourceCartId) { + await mergeCartsRequest(dispatch, { + sourceCartId, + destinationCartId: cartId, + }); + } + if (!signInToken) { + const { token } = await generateCustomerToken(dispatch, { + email: userCredentials?.username, + ...userCredentials, + }); + LocalStorage.saveCustomerToken(token); + } } if (typeof window !== 'undefined') { From c895e5ea0d9097fb9b4cf78f4c3608cc40e030cc Mon Sep 17 00:00:00 2001 From: Rajeev K Tomy Date: Fri, 21 Jan 2022 12:01:11 +0530 Subject: [PATCH 2/2] #64 implement save in address book feature --- .../api/cart/setBillingAddress/modifier.js | 2 +- .../api/cart/setBillingAddress/mutation.js | 23 ++++---- .../api/cart/setShippingAddress/modifier.js | 2 +- .../api/cart/setShippingAddress/mutation.js | 21 ++++---- .../fetchCustomerAddresses/modifier.js | 2 + .../CheckoutForm/CheckoutFormWrapper.jsx | 4 +- .../address/components/SaveInBookCheckbox.jsx | 34 ++++++++++++ .../address/hooks/useAddressOtherOptions.js | 2 +- .../src/components/address/utility/index.js | 9 ++-- .../components/BillingAddressForm.jsx | 51 +++++++++++------- .../BillingAddressFormikProvider.jsx | 1 + .../components/BillingAddressOthers.jsx | 2 +- .../hooks/useSaveAddressAction.js | 42 ++++----------- .../billingAddress/utility/index.js | 1 + .../components/ShippingAddressForm.jsx | 54 +++++++++++-------- .../ShippingAddressFormikProvider.jsx | 4 +- .../components/ShippingAddressOthers.jsx | 4 +- .../hooks/useSaveAddressAction.js | 39 ++++---------- .../src/hook/useFormValidateThenSubmit.js | 4 +- src/reactapp/src/utils/address.js | 8 +-- src/reactapp/src/utils/localStorage.js | 10 ++-- 21 files changed, 170 insertions(+), 149 deletions(-) create mode 100644 src/reactapp/src/components/address/components/SaveInBookCheckbox.jsx diff --git a/src/reactapp/src/api/cart/setBillingAddress/modifier.js b/src/reactapp/src/api/cart/setBillingAddress/modifier.js index eef80093..d37dd05c 100644 --- a/src/reactapp/src/api/cart/setBillingAddress/modifier.js +++ b/src/reactapp/src/api/cart/setBillingAddress/modifier.js @@ -26,7 +26,7 @@ export function modifyBillingAddressData(billingAddress) { phone, zipcode, city, - region: regionCode, + region: regionCode || '', country: countryCode, isSameAsShipping: LocalStorage.getBillingSameAsShippingInfo(), }; diff --git a/src/reactapp/src/api/cart/setBillingAddress/mutation.js b/src/reactapp/src/api/cart/setBillingAddress/mutation.js index df4799d3..fab65d04 100644 --- a/src/reactapp/src/api/cart/setBillingAddress/mutation.js +++ b/src/reactapp/src/api/cart/setBillingAddress/mutation.js @@ -2,17 +2,18 @@ import { CART_DATA_FRAGMENT } from '../utility/query/cartQueryInfo'; export const SET_CART_BILLING_ADDRESS_MUTATION = ` mutation setBillingAddress( - $cartId: String!, - $firstname: String!, - $lastname: String!, - $company: String, - $street: [String]!, - $city: String!, - $region: String, - $zipcode: String!, - $country: String!, - $phone: String!, + $cartId: String! + $firstname: String! + $lastname: String! + $company: String + $street: [String]! + $city: String! + $region: String + $zipcode: String! + $country: String! + $phone: String! $isSameAsShipping: Boolean + $saveInBook: Boolean ) { setBillingAddressOnCart( input: { @@ -29,7 +30,7 @@ mutation setBillingAddress( postcode: $zipcode country_code: $country telephone: $phone - save_in_address_book: false + save_in_address_book: $saveInBook } } } diff --git a/src/reactapp/src/api/cart/setShippingAddress/modifier.js b/src/reactapp/src/api/cart/setShippingAddress/modifier.js index 365e4a92..8f45192c 100644 --- a/src/reactapp/src/api/cart/setShippingAddress/modifier.js +++ b/src/reactapp/src/api/cart/setShippingAddress/modifier.js @@ -85,7 +85,7 @@ export function modifyShippingAddressList(addressList) { zipcode, lastname, firstname, - region: regionCode, + region: regionCode || '', country: countryCode, fullName: prepareFullName(shippingAddress), }; diff --git a/src/reactapp/src/api/cart/setShippingAddress/mutation.js b/src/reactapp/src/api/cart/setShippingAddress/mutation.js index 802e795e..abf70adf 100644 --- a/src/reactapp/src/api/cart/setShippingAddress/mutation.js +++ b/src/reactapp/src/api/cart/setShippingAddress/mutation.js @@ -2,16 +2,17 @@ import { CART_DATA_FRAGMENT } from '../utility/query/cartQueryInfo'; export const SET_SHIPPING_ADDR_MUTATION = ` mutation setShippingAddress( - $cartId: String!, - $firstname: String!, - $lastname: String!, - $company: String, - $street: [String]!, - $city: String!, - $region: String, - $zipcode: String!, - $country: String!, + $cartId: String! + $firstname: String! + $lastname: String! + $company: String + $street: [String]! + $city: String! + $region: String + $zipcode: String! + $country: String! $phone: String! + $saveInBook: Boolean ) { setShippingAddressesOnCart( input: { @@ -27,7 +28,7 @@ mutation setShippingAddress( postcode: $zipcode country_code: $country telephone: $phone - save_in_address_book: false + save_in_address_book: $saveInBook } }] } diff --git a/src/reactapp/src/api/customer/fetchCustomerAddresses/modifier.js b/src/reactapp/src/api/customer/fetchCustomerAddresses/modifier.js index 8db621da..d11c044f 100644 --- a/src/reactapp/src/api/customer/fetchCustomerAddresses/modifier.js +++ b/src/reactapp/src/api/customer/fetchCustomerAddresses/modifier.js @@ -1,5 +1,6 @@ import _get from 'lodash.get'; +import { _isObjEmpty } from '../../../utils'; import { prepareFullName } from '../../../utils/customer'; export default function modifyCustomerAddressList(response) { @@ -52,6 +53,7 @@ export default function modifyCustomerAddressList(response) { firstname, lastname, fullName: prepareFullName(customerData), + hasAddress: !_isObjEmpty(customerAddressList), }, customerAddressList, defaultBillingAddress, diff --git a/src/reactapp/src/components/CheckoutForm/CheckoutFormWrapper.jsx b/src/reactapp/src/components/CheckoutForm/CheckoutFormWrapper.jsx index 8ea5f019..4e576a42 100644 --- a/src/reactapp/src/components/CheckoutForm/CheckoutFormWrapper.jsx +++ b/src/reactapp/src/components/CheckoutForm/CheckoutFormWrapper.jsx @@ -35,7 +35,7 @@ function CheckoutFormWrapper({ initialData, children }) { return _emptyFunc(); } - const { cart } = initialData; + const { cart, customer } = initialData; const email = _get(cart, 'email', ''); const appliedCoupon = _get(cart, 'appliedCoupon'); const billingAddress = _get(cart, 'billing_address', {}); @@ -55,6 +55,7 @@ function CheckoutFormWrapper({ initialData, children }) { await setFieldValue(SHIPPING_ADDR_FORM, { ...shippingAddressValues, ...shippingAddress, + saveInBook: !!customer?.customer?.email, }); await setFieldValue(SHIPPING_METHOD, { methodCode: shippingMethod.methodCode || '', @@ -63,6 +64,7 @@ function CheckoutFormWrapper({ initialData, children }) { await setFieldValue(BILLING_ADDR_FORM, { ...billingAddressValues, ...billingAddress, + saveInBook: !!customer?.customer?.email, }); await setFieldValue(`${PAYMENT_METHOD_FORM}.code`, paymentMethod.code); await setFieldValue(`${COUPON_CODE_FORM}.couponCode`, appliedCoupon); diff --git a/src/reactapp/src/components/address/components/SaveInBookCheckbox.jsx b/src/reactapp/src/components/address/components/SaveInBookCheckbox.jsx new file mode 100644 index 00000000..f326bfc3 --- /dev/null +++ b/src/reactapp/src/components/address/components/SaveInBookCheckbox.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +import _get from 'lodash.get'; +import { shape, string } from 'prop-types'; + +import Checkbox from '../../common/Form/Checkbox'; +import { __ } from '../../../i18n'; +import useAppContext from '../../../hook/useAppContext'; +import { formikDataShape } from '../../../utils/propTypes'; + +function SaveInBookCheckbox({ fields, formikData }) { + const { isLoggedIn, customer } = useAppContext(); + const saveInAddressBook = !!_get(formikData, 'formSectionValues.saveInBook'); + + if (!isLoggedIn || !customer?.hasAddress) { + return <>; + } + + return ( +
+ +
+ ); +} + +SaveInBookCheckbox.propTypes = { + formikData: formikDataShape.isRequired, + fields: shape({ saveInBook: string }).isRequired, +}; + +export default SaveInBookCheckbox; diff --git a/src/reactapp/src/components/address/hooks/useAddressOtherOptions.js b/src/reactapp/src/components/address/hooks/useAddressOtherOptions.js index 060a40e4..a14d9f3a 100644 --- a/src/reactapp/src/components/address/hooks/useAddressOtherOptions.js +++ b/src/reactapp/src/components/address/hooks/useAddressOtherOptions.js @@ -10,7 +10,7 @@ export default function useAddressOtherOptions({ }) { const { customerAddressList } = useAppContext(); const { mostRecentAddressOptions } = useAddressWrapper(); - const mostRecentAddressList = LocalStorage.getMostlyRecentlyUsedAddressList(); + const mostRecentAddressList = LocalStorage.getMostRecentlyUsedAddressList(); let addressOptions = prepareCustomerAddressOptions({ cartAddress, diff --git a/src/reactapp/src/components/address/utility/index.js b/src/reactapp/src/components/address/utility/index.js index 93284793..45ae5cc8 100644 --- a/src/reactapp/src/components/address/utility/index.js +++ b/src/reactapp/src/components/address/utility/index.js @@ -41,18 +41,15 @@ export function prepareCountryStateOptions(stateList, countrySelected) { return _objToArray(stateListObj).sort(sortByItemLabel); } -export function prepareMostRecentAddressOptions( - stateList, - selectedAddress = '' -) { - const mostRecentAddressList = LocalStorage.getMostlyRecentlyUsedAddressList(); +export function prepareMostRecentAddressOptions(stateList) { + const mostRecentAddressList = LocalStorage.getMostRecentlyUsedAddressList(); if (_isObjEmpty(mostRecentAddressList)) { return []; } const mostRecentAddrOptions = formatAddressListToCardData( - _objToArray(_cleanObjByKeys(mostRecentAddressList, [selectedAddress])), + _objToArray(mostRecentAddressList), stateList ); diff --git a/src/reactapp/src/components/billingAddress/components/BillingAddressForm.jsx b/src/reactapp/src/components/billingAddress/components/BillingAddressForm.jsx index d8d636ea..10bb319b 100644 --- a/src/reactapp/src/components/billingAddress/components/BillingAddressForm.jsx +++ b/src/reactapp/src/components/billingAddress/components/BillingAddressForm.jsx @@ -4,10 +4,11 @@ import { SaveButton } from '../../address'; import TextInput from '../../common/Form/TextInput'; import SelectInput from '../../common/Form/SelectInput'; import CancelButton from './billingAddressForm/CancelButton'; +import SaveInBookCheckbox from '../../address/components/SaveInBookCheckbox'; import { __ } from '../../../i18n'; import { _keys } from '../../../utils'; import LocalStorage from '../../../utils/localStorage'; -import { isMostRecentAddress } from '../../../utils/address'; +import { isValidCustomerAddressId } from '../../../utils/address'; import useCountryState from '../../address/hooks/useCountryState'; import useAddressWrapper from '../../address/hooks/useAddressWrapper'; import useBillingAddressAppContext from '../hooks/useBillingAddressAppContext'; @@ -20,7 +21,6 @@ function BillingAddressForm() { formId, viewMode, formikData, - isNewAddress, submitHandler, handleKeyDown, billingValues, @@ -47,29 +47,39 @@ function BillingAddressForm() { const { selectedCountry, isBillingAddressTouched } = formikData; const saveAddressAction = async () => { - await formSubmitHandler(); + let newAddressId = selectedAddress; - if (!isLoggedIn) { - return; + // Updating mostRecentAddressList in prior to form submit; Because values + // there would be used in the submit action if the address is from + // mostRecentAddressList. + if (isLoggedIn) { + if (isValidCustomerAddressId(selectedAddress)) { + // This means a customer address been edited and now changed and submitted. + // So treat this as a new address; + const recentAddressList = LocalStorage.getMostRecentlyUsedAddressList(); + newAddressId = `new_address_${_keys(recentAddressList).length + 1}`; + LocalStorage.addAddressToMostRecentlyUsedList( + billingValues, + newAddressId + ); + } else { + LocalStorage.updateMostRecentlyAddedAddress( + newAddressId, + billingValues + ); + } } - if (isNewAddress) { - const recentAddressList = LocalStorage.getMostlyRecentlyUsedAddressList(); - const newAddressId = `new_address_${_keys(recentAddressList).length + 1}`; - LocalStorage.addAddressToMostRecentlyUsedList(billingValues); - setIsNewAddress(false); - setSelectedAddress(newAddressId); - LocalStorage.saveCustomerAddressInfo(newAddressId, isBillingSame, false); - reCalculateMostRecentAddressOptions(); - } + await formSubmitHandler(newAddressId); - if (isMostRecentAddress(selectedAddress)) { - LocalStorage.updateMostRecentlyAddedAddress( - selectedAddress, - billingValues - ); - reCalculateMostRecentAddressOptions(); + if (!isLoggedIn) { + return; } + + setIsNewAddress(false); + setSelectedAddress(newAddressId); + LocalStorage.saveCustomerAddressInfo(newAddressId, isBillingSame, false); + reCalculateMostRecentAddressOptions(); }; const handleCountryChange = (event) => { @@ -159,6 +169,7 @@ function BillingAddressForm() { onKeyDown={handleKeyDown} placeholder={__('+32 000 000 000')} /> +
diff --git a/src/reactapp/src/components/billingAddress/components/BillingAddressFormikProvider.jsx b/src/reactapp/src/components/billingAddress/components/BillingAddressFormikProvider.jsx index 62942f0e..967e7582 100644 --- a/src/reactapp/src/components/billingAddress/components/BillingAddressFormikProvider.jsx +++ b/src/reactapp/src/components/billingAddress/components/BillingAddressFormikProvider.jsx @@ -42,6 +42,7 @@ const initValidationSchema = { region: YupString().nullable(), country: YupString().required(requiredMessage), isSameAsShipping: YupBool(), + saveInBook: YupBool(), }; function BillingAddressFormikProvider({ children, formikData }) { diff --git a/src/reactapp/src/components/billingAddress/components/BillingAddressOthers.jsx b/src/reactapp/src/components/billingAddress/components/BillingAddressOthers.jsx index d2df156b..955d0876 100644 --- a/src/reactapp/src/components/billingAddress/components/BillingAddressOthers.jsx +++ b/src/reactapp/src/components/billingAddress/components/BillingAddressOthers.jsx @@ -29,7 +29,7 @@ function BillingAddressOthers({ forceHide }) { const { cartBillingAddress } = useBillingAddressCartContext(); const { isLoggedIn, customerAddressList } = useBillingAddressAppContext(); const isCartBillingAddressValid = isCartAddressValid(cartBillingAddress); - const mostRecentAddressList = LocalStorage.getMostlyRecentlyUsedAddressList(); + const mostRecentAddressList = LocalStorage.getMostRecentlyUsedAddressList(); const addressOptions = useAddressOtherOptions({ selectedAddress, diff --git a/src/reactapp/src/components/billingAddress/hooks/useSaveAddressAction.js b/src/reactapp/src/components/billingAddress/hooks/useSaveAddressAction.js index f56d2c15..2b6234dc 100644 --- a/src/reactapp/src/components/billingAddress/hooks/useSaveAddressAction.js +++ b/src/reactapp/src/components/billingAddress/hooks/useSaveAddressAction.js @@ -4,32 +4,23 @@ import { prepareFormAddressFromCartAddress, } from '../../../utils/address'; import { __ } from '../../../i18n'; +import { _makePromise } from '../../../utils'; import LocalStorage from '../../../utils/localStorage'; -import { _emptyFunc, _makePromise } from '../../../utils'; import useBillingAddressAppContext from './useBillingAddressAppContext'; import useBillingAddressCartContext from './useBillingAddressCartContext'; export default function useSaveAddressAction(billingFormikContext) { const { setCartBillingAddress, setCustomerAddressAsBillingAddress } = useBillingAddressCartContext(); + const { setMessage, setPageLoader, setErrorMessage, setSuccessMessage } = + useBillingAddressAppContext(); const { - isLoggedIn, - setMessage, - setPageLoader, - setErrorMessage, - setSuccessMessage, - updateCustomerAddress, - } = useBillingAddressAppContext(); - const { - editMode, - regionData, billingValues, isBillingSame, setFieldValue, selectedAddress, setFormToViewMode, setSelectedAddress, - customerAddressSelected, setCustomerAddressSelected, setBillingAddressFormFields, } = billingFormikContext; @@ -39,10 +30,9 @@ export default function useSaveAddressAction(billingFormikContext) { const addressIdContext = addressId || selectedAddress; const isCustomerAddress = isValidCustomerAddressId(addressId); - const mostRecentAddresses = LocalStorage.getMostlyRecentlyUsedAddressList(); + const mostRecentAddresses = LocalStorage.getMostRecentlyUsedAddressList(); const recentAddressInUse = mostRecentAddresses[addressId]; const billingToSave = recentAddressInUse || billingValues; - let updateCustomerAddrPromise = _emptyFunc(); let updateCartAddressPromise = _makePromise( setCartBillingAddress, billingToSave @@ -56,31 +46,19 @@ export default function useSaveAddressAction(billingFormikContext) { ); } - if (isLoggedIn && customerAddressSelected && editMode) { - updateCustomerAddrPromise = _makePromise( - updateCustomerAddress, - selectedAddress, - billingValues, - regionData - ); - } - try { setPageLoader(true); - const result = await updateCartAddressPromise(); - const addressToSet = prepareFormAddressFromCartAddress( - result?.billing_address - ); - setBillingAddressFormFields(addressToSet); - // we don't need to await customer address update operation; - // it can happen in background - updateCustomerAddrPromise(); + const result = await updateCartAddressPromise(); + const addressToSet = { + ...prepareFormAddressFromCartAddress(result?.billing_address), + saveInBook: billingToSave?.saveInBook, + }; + setBillingAddressFormFields(addressToSet); setFormToViewMode(false); setSelectedAddress(addressIdContext); setCustomerAddressSelected(isValidCustomerAddressId(addressIdContext)); - LocalStorage.saveCustomerAddressInfo( addressIdContext, isBillingSame, diff --git a/src/reactapp/src/components/billingAddress/utility/index.js b/src/reactapp/src/components/billingAddress/utility/index.js index ffd492b5..8bbbebed 100644 --- a/src/reactapp/src/components/billingAddress/utility/index.js +++ b/src/reactapp/src/components/billingAddress/utility/index.js @@ -18,6 +18,7 @@ export const billingAddressFormInitValues = { region: '', country: initialCountry, isSameAsShipping: LocalStorage.getBillingSameAsShippingInfo(), + saveInBook: false, }; export function selectedAddressTitle(isLoggedIn, customerAddressList) { diff --git a/src/reactapp/src/components/shippingAddress/components/ShippingAddressForm.jsx b/src/reactapp/src/components/shippingAddress/components/ShippingAddressForm.jsx index a5461e01..77b4ea93 100644 --- a/src/reactapp/src/components/shippingAddress/components/ShippingAddressForm.jsx +++ b/src/reactapp/src/components/shippingAddress/components/ShippingAddressForm.jsx @@ -4,13 +4,11 @@ import { SaveButton } from '../../address'; import TextInput from '../../common/Form/TextInput'; import SelectInput from '../../common/Form/SelectInput'; import CancelButton from './shippingAddressForm/CancelButton'; -import { - isMostRecentAddress, - isValidCustomerAddressId, -} from '../../../utils/address'; +import SaveInBookCheckbox from '../../address/components/SaveInBookCheckbox'; import { __ } from '../../../i18n'; import { _keys } from '../../../utils'; import LocalStorage from '../../../utils/localStorage'; +import { isValidCustomerAddressId } from '../../../utils/address'; import useCountryState from '../../address/hooks/useCountryState'; import useAddressWrapper from '../../address/hooks/useAddressWrapper'; import useFormValidateThenSubmit from '../../../hook/useFormValidateThenSubmit'; @@ -23,7 +21,6 @@ function ShippingAddressForm() { formId, viewMode, formikData, - isNewAddress, handleKeyDown, submitHandler, isBillingSame, @@ -51,29 +48,39 @@ function ShippingAddressForm() { }); const saveAddressAction = async () => { - await formSubmitHandler(); + let newAddressId = selectedAddress; - if (!isLoggedIn || isValidCustomerAddressId(selectedAddress)) { - return; + // Updating mostRecentAddressList in prior to form submit; Because values + // there would be used in the submit action if the address is from + // mostRecentAddressList. + if (isLoggedIn) { + if (isValidCustomerAddressId(selectedAddress)) { + // This means a customer address been edited and now changed and submitted. + // So treat this as a new address; + const recentAddressList = LocalStorage.getMostRecentlyUsedAddressList(); + newAddressId = `new_address_${_keys(recentAddressList).length + 1}`; + LocalStorage.addAddressToMostRecentlyUsedList( + shippingValues, + newAddressId + ); + } else { + LocalStorage.updateMostRecentlyAddedAddress( + newAddressId, + shippingValues + ); + } } - if (isNewAddress) { - const recentAddressList = LocalStorage.getMostlyRecentlyUsedAddressList(); - const newAddressId = `new_address_${_keys(recentAddressList).length + 1}`; - LocalStorage.addAddressToMostRecentlyUsedList(shippingValues); - setIsNewAddress(false); - setSelectedAddress(newAddressId); - LocalStorage.saveCustomerAddressInfo(newAddressId, isBillingSame); - reCalculateMostRecentAddressOptions(); - } + await formSubmitHandler(newAddressId); - if (isMostRecentAddress(selectedAddress)) { - LocalStorage.updateMostRecentlyAddedAddress( - selectedAddress, - shippingValues - ); - reCalculateMostRecentAddressOptions(); + if (!isLoggedIn) { + return; } + + setIsNewAddress(false); + setSelectedAddress(newAddressId); + LocalStorage.saveCustomerAddressInfo(newAddressId, isBillingSame); + reCalculateMostRecentAddressOptions(); }; const handleCountryChange = (event) => { @@ -166,6 +173,7 @@ function ShippingAddressForm() { onKeyDown={handleKeyDown} placeholder={__('+32 000 000 000')} /> +
diff --git a/src/reactapp/src/components/shippingAddress/components/ShippingAddressFormikProvider.jsx b/src/reactapp/src/components/shippingAddress/components/ShippingAddressFormikProvider.jsx index fa5b95f7..f86d72a4 100644 --- a/src/reactapp/src/components/shippingAddress/components/ShippingAddressFormikProvider.jsx +++ b/src/reactapp/src/components/shippingAddress/components/ShippingAddressFormikProvider.jsx @@ -25,11 +25,11 @@ import { customerHasAddress } from '../../../utils/customer'; import useRegionData from '../../address/hooks/useRegionData'; import useSaveAddressAction from '../hooks/useSaveAddressAction'; import useEnterActionInForm from '../../../hook/useEnterActionInForm'; +import useFillDefaultAddresses from '../hooks/useFillDefaultAddresses'; import useRegionValidation from '../../address/hooks/useRegionValidation'; import ShippingAddressFormContext from '../context/ShippingAddressFormikContext'; import useShippingAddressAppContext from '../hooks/useShippingAddressAppContext'; import useShippingAddressCartContext from '../hooks/useShippingAddressCartContext'; -import useFillDefaultAddresses from '../hooks/useFillDefaultAddresses'; const initialValues = { company: '', @@ -41,6 +41,7 @@ const initialValues = { city: '', region: '', country: initialCountry, + saveInBook: false, }; const requiredMessage = __('%1 is required'); @@ -60,6 +61,7 @@ const initValidationSchema = { region: YupString().nullable(), country: YupString().required(requiredMessage), isSameAsShipping: YupBoolean(), + saveInBook: YupBoolean(), }; const addressIdInCache = _toString(LocalStorage.getCustomerShippingAddressId()); diff --git a/src/reactapp/src/components/shippingAddress/components/ShippingAddressOthers.jsx b/src/reactapp/src/components/shippingAddress/components/ShippingAddressOthers.jsx index 4b0dd938..47859e78 100644 --- a/src/reactapp/src/components/shippingAddress/components/ShippingAddressOthers.jsx +++ b/src/reactapp/src/components/shippingAddress/components/ShippingAddressOthers.jsx @@ -26,10 +26,10 @@ function ShippingAddressOthers({ forceHide }) { shippingOtherOptionSelected, setShippingAddressFormFields, } = useShippingAddressFormikContext(); - const { isLoggedIn, customerAddressList } = useShippingAddressAppContext(); const { cartShippingAddress } = useShippingAddressCartContext(); + const { isLoggedIn, customerAddressList } = useShippingAddressAppContext(); const isCartShippingAddressValid = isCartAddressValid(cartShippingAddress); - const mostRecentAddressList = LocalStorage.getMostlyRecentlyUsedAddressList(); + const mostRecentAddressList = LocalStorage.getMostRecentlyUsedAddressList(); const addressOptions = useAddressOtherOptions({ selectedAddress, cartAddress: cartShippingAddress, diff --git a/src/reactapp/src/components/shippingAddress/hooks/useSaveAddressAction.js b/src/reactapp/src/components/shippingAddress/hooks/useSaveAddressAction.js index 742f1f69..4bb94b73 100644 --- a/src/reactapp/src/components/shippingAddress/hooks/useSaveAddressAction.js +++ b/src/reactapp/src/components/shippingAddress/hooks/useSaveAddressAction.js @@ -15,37 +15,28 @@ import { billingAddressFormInitValues } from '../../billingAddress/utility'; export default function useSaveAddressAction(shippingAddressFormContext) { const { - editMode, - regionData, setFieldValue, isBillingSame, selectedAddress, setFormToViewMode, setSelectedAddress, - customerAddressSelected, setCustomerAddressSelected, setShippingAddressFormFields, shippingValues: shippingAddressToSave, } = shippingAddressFormContext; - const { - isLoggedIn, - setMessage, - setPageLoader, - setErrorMessage, - setSuccessMessage, - updateCustomerAddress, - } = useShippingAddressAppContext(); const { setCartBillingAddress, addCartShippingAddress, setCustomerAddressAsBillingAddress, setCustomerAddressAsShippingAddress, } = useShippingAddressCartContext(); + const { setMessage, setPageLoader, setErrorMessage, setSuccessMessage } = + useShippingAddressAppContext(); const { setBillingSelected, setIsBillingCustomerAddress } = useAddressWrapper(); const submitHandler = async (customerAddressId) => { - const mostRecentAddresses = LocalStorage.getMostlyRecentlyUsedAddressList(); + const mostRecentAddresses = LocalStorage.getMostRecentlyUsedAddressList(); const recentAddressInUse = mostRecentAddresses[customerAddressId]; const addressToSave = recentAddressInUse || shippingAddressToSave; const useCustomerAddressInSave = customerAddressId && !recentAddressInUse; @@ -85,9 +76,12 @@ export default function useSaveAddressAction(shippingAddressFormContext) { const shippingAddrResponse = await updateShippingAddress(); await updateBillingAddress(); - const addressToSet = prepareFormAddressFromCartAddress( - _get(shippingAddrResponse, 'shipping_address') - ); + const addressToSet = { + ...prepareFormAddressFromCartAddress( + _get(shippingAddrResponse, 'shipping_address') + ), + saveInBook: addressToSave?.saveInBook, + }; setShippingAddressFormFields(addressToSet); if (isBillingSame) { @@ -106,28 +100,15 @@ export default function useSaveAddressAction(shippingAddressFormContext) { const addressIdContext = addressId || selectedAddress; const isCustomerAddress = isValidCustomerAddressId(addressIdContext); - let updateCustomerAddrPromise = _emptyFunc(); const updateCartAddressPromise = _makePromise( submitHandler, isCustomerAddress && addressId ); - if (isLoggedIn && customerAddressSelected && editMode) { - updateCustomerAddrPromise = _makePromise( - updateCustomerAddress, - addressIdContext, - shippingAddressToSave, - regionData - ); - } - try { setPageLoader(true); - await updateCartAddressPromise(); - // we don't need to await customer address update operation; - // it can happen in background - updateCustomerAddrPromise(); + await updateCartAddressPromise(); setFormToViewMode(false); setSelectedAddress(addressIdContext); diff --git a/src/reactapp/src/hook/useFormValidateThenSubmit.js b/src/reactapp/src/hook/useFormValidateThenSubmit.js index 0ef76305..f882abdd 100644 --- a/src/reactapp/src/hook/useFormValidateThenSubmit.js +++ b/src/reactapp/src/hook/useFormValidateThenSubmit.js @@ -21,7 +21,7 @@ export default function useFormValidateThenSubmit({ isFormSectionTouched, } = formikData || {}; - return async () => { + return async (...args) => { if (isFormSectionTouched && !_isObjEmpty(formSectionErrors)) { setErrorMessage( prepareFormSectionErrorMessage( @@ -37,7 +37,7 @@ export default function useFormValidateThenSubmit({ const isValid = await validationRules.validate(formSectionValues); if (isValid) { - await submitHandler(); + await submitHandler(...args); } }; } diff --git a/src/reactapp/src/utils/address.js b/src/reactapp/src/utils/address.js index c3ec40c9..cc1738c4 100644 --- a/src/reactapp/src/utils/address.js +++ b/src/reactapp/src/utils/address.js @@ -4,6 +4,7 @@ import env from './env'; import { __ } from '../i18n'; import RootElement from './rootElement'; import LocalStorage from './localStorage'; +import { prepareFullName } from './customer'; import { _cleanObjByKeys, _toString } from './index'; import { BILLING_ADDR_FORM, config } from '../config'; @@ -35,7 +36,8 @@ export function formatAddressListToCardData(addressList, stateList) { zipcode = '', company = '', country = '', - fullName = '', + firstname = '', + lastname = '', regionLabel = '', countryCode = '', } = addr; @@ -44,7 +46,7 @@ export function formatAddressListToCardData(addressList, stateList) { return { id: _toString(id), address: [ - fullName, + prepareFullName({ firstname, lastname }), company, ...street, __('%1 %1', zipcode, city), @@ -99,7 +101,7 @@ export function prepareFormAddressFromCartAddress(address, selectedAddressId) { } export function isMostRecentAddress(addressId) { - const recentAddressList = LocalStorage.getMostlyRecentlyUsedAddressList(); + const recentAddressList = LocalStorage.getMostRecentlyUsedAddressList(); return !!recentAddressList[addressId]; } diff --git a/src/reactapp/src/utils/localStorage.js b/src/reactapp/src/utils/localStorage.js index 47a9c78f..6b76e96b 100644 --- a/src/reactapp/src/utils/localStorage.js +++ b/src/reactapp/src/utils/localStorage.js @@ -78,7 +78,7 @@ const LocalStorage = { return _get(LocalStorage.getHyvaCheckoutStorage(), source.value, true); }, - getMostlyRecentlyUsedAddressList() { + getMostRecentlyUsedAddressList() { return ( _get( LocalStorage.getHyvaCheckoutStorage(), @@ -200,7 +200,7 @@ const LocalStorage = { }, addAddressToMostRecentlyUsedList(newAddress) { - const existingAddrList = LocalStorage.getMostlyRecentlyUsedAddressList(); + const existingAddrList = LocalStorage.getMostRecentlyUsedAddressList(); const newAddressId = `new_address_${_keys(existingAddrList).length + 1}`; _set(newAddress, 'id', newAddressId); @@ -217,9 +217,9 @@ const LocalStorage = { }, updateMostRecentlyAddedAddress(addressId, addressToUpdate) { - const existingAddrList = LocalStorage.getMostlyRecentlyUsedAddressList(); + const existingAddrList = LocalStorage.getMostRecentlyUsedAddressList(); - _set(existingAddrList, addressId, addressToUpdate); + _set(existingAddrList, addressId, { ...addressToUpdate, id: addressId }); const storageData = _set( LocalStorage.getHyvaCheckoutStorage(), @@ -231,7 +231,7 @@ const LocalStorage = { }, removeMostRecentlyUsedAddress(addressId) { - const existingAddrList = LocalStorage.getMostlyRecentlyUsedAddressList(); + const existingAddrList = LocalStorage.getMostRecentlyUsedAddressList(); const storageData = _set( LocalStorage.getHyvaCheckoutStorage(),