Merge pull request #261 from hyva-themes/259/login-problem

Implement save in address book feature

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(),
   };

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
         }
       }
     }

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),
   };

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
         }
       }]
     }

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,

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);

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 (
+    <div className="mt-4">
+      <Checkbox
+        name={fields.saveInBook}
+        checked={saveInAddressBook}
+        label={__('Save in address book')}
+      />
+    </div>
+  );
+}
+
+SaveInBookCheckbox.propTypes = {
+  formikData: formikDataShape.isRequired,
+  fields: shape({ saveInBook: string }).isRequired,
+};
+
+export default SaveInBookCheckbox;

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,

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
   );
 

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')}
         />
+        <SaveInBookCheckbox fields={fields} formikData={formikData} />
       </div>
 
       <div className="flex items-center justify-around mt-2">

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 }) {

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,

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,

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) {