Merge pull request #280 from hyva-themes/277/payment-rest-api-hook

#277 Implement a common hook to perform save payment using REST Api
hyva-themes · Apr 6, 2022 · 9b62b24 · 9b62b24
2 parents 0050804 + 769742a
commit 9b62b24
Show file tree

Hide file tree

Showing 47 changed files with 6,630 additions and 6,550 deletions.
diff --git a/src/reactapp/package-lock.json b/src/reactapp/package-lock.json
diff --git a/src/reactapp/package.json b/src/reactapp/package.json
@@ -14,16 +14,16 @@
   "private": true,
   "proxy": "https://demo.hyva.io",
   "dependencies": {
-    "@heroicons/react": "^1.0.5",
-    "formik": "^2.2.6",
+    "@heroicons/react": "^1.0.6",
+    "formik": "^2.2.9",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "npm-run-all": "^4.1.5",
-    "preact": "^10.6.4",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-app-polyfill": "^2.0.0",
-    "react-dom": "^17.0.1",
+    "preact": "^10.7.0",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-app-polyfill": "^3.0.0",
+    "react-dom": "^17.0.2",
     "react-scripts": "^5.0.0",
     "yup": "^0.32.11"
   },
@@ -68,23 +68,23 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/eslint-parser": "^7.16.5",
-    "@babel/preset-env": "^7.16.5",
-    "@babel/preset-react": "^7.16.5",
+    "@babel/core": "^7.17.8",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
     "@tailwindcss/forms": "^0.3.4",
-    "eslint": "^7.2.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint": "^8.12.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "husky": "^7.0.4",
-    "lint-staged": "^11.2.6",
-    "prettier": "^2.5.1",
-    "react-app-rewired": "^2.1.9",
+    "lint-staged": "^12.3.7",
+    "prettier": "^2.6.1",
+    "react-app-rewired": "^2.2.1",
     "react-dev-utils": "^12.0.0",
     "tailwindcss": "^2.2.19"
   }

diff --git a/src/reactapp/src/api/sendRequest.js b/src/reactapp/src/api/sendRequest.js
@@ -16,6 +16,7 @@ const storeCode = env.storeCode || RootElement.getStoreCode();
 
 export default function sendRequest(
   dispatch,
+  // eslint-disable-next-line default-param-last
   queryParams = {},
   relativeUrl,
   responseType = 'json',

diff --git a/src/reactapp/src/components/CheckoutForm/CheckoutFormWrapper.jsx b/src/reactapp/src/components/CheckoutForm/CheckoutFormWrapper.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import _get from 'lodash.get';
 import { useFormikContext } from 'formik';
 import { bool, object, node, oneOfType } from 'prop-types';
@@ -81,7 +81,7 @@ function CheckoutFormWrapper({ initialData, children }) {
     shippingAddressValues,
   ]);
 
-  return <>{children}</>;
+  return children;
 }
 
 CheckoutFormWrapper.propTypes = {

diff --git a/src/reactapp/src/components/address/components/AddressCard.jsx b/src/reactapp/src/components/address/components/AddressCard.jsx
@@ -66,7 +66,7 @@ AddressCard.propTypes = {
 
 AddressCard.defaultProps = {
   title: '',
-  billingSameCheckbox: <></>,
+  billingSameCheckbox: null,
 };
 
 export default AddressCard;
diff --git a/src/reactapp/src/components/address/components/AddressWrapper/AddressWrapperMemorized.jsx b/src/reactapp/src/components/address/components/AddressWrapper/AddressWrapperMemorized.jsx
@@ -121,6 +121,7 @@ const AddressWrapperMemorized = React.memo(({ children, formikData }) => {
     setMostRecentAddressOptions(addressOptions);
   }, [stateList]);
 
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
   const context = {
     billingSelected,
     setBillingSelected,

diff --git a/src/reactapp/src/components/address/components/CreateNewAddressLink.jsx b/src/reactapp/src/components/address/components/CreateNewAddressLink.jsx
@@ -11,7 +11,7 @@ function CreateNewAddressLink({ actions, forceHide }) {
   const { isLoggedIn } = useAppContext();
 
   if (!isLoggedIn || forceHide) {
-    return <></>;
+    return null;
   }
 
   return (

diff --git a/src/reactapp/src/components/address/components/SaveInBookCheckbox.jsx b/src/reactapp/src/components/address/components/SaveInBookCheckbox.jsx
@@ -12,7 +12,7 @@ function SaveInBookCheckbox({ fields, formikData }) {
   const saveInAddressBook = !!_get(formikData, 'formSectionValues.saveInBook');
 
   if (!isLoggedIn || !customer?.hasAddress) {
-    return <></>;
+    return null;
   }
 
   return (

diff --git a/src/reactapp/src/components/billingAddress/BillingAddressMemorized.jsx b/src/reactapp/src/components/billingAddress/BillingAddressMemorized.jsx
@@ -22,9 +22,7 @@ const BillingAddressMemorized = React.memo(({ formikData }) => {
             <BillingAddressView />
           </ToggleBox>
         </Card>
-      ) : (
-        <></>
-      )}
+      ) : null}
     </BillingAddressFormikProvider>
   );
 });

diff --git a/src/reactapp/src/components/billingAddress/components/BillingAddressForm.jsx b/src/reactapp/src/components/billingAddress/components/BillingAddressForm.jsx
@@ -91,7 +91,7 @@ function BillingAddressForm() {
   };
 
   if (viewMode) {
-    return <></>;
+    return null;
   }
 
   return (

diff --git a/src/reactapp/src/components/billingAddress/components/BillingAddressFormikProvider.jsx b/src/reactapp/src/components/billingAddress/components/BillingAddressFormikProvider.jsx
@@ -127,6 +127,7 @@ function BillingAddressFormikProvider({ children, formikData }) {
     cartHasBillingAddress,
   ]);
 
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
   let context = {
     ...regionData,
     ...formikData,
@@ -168,8 +169,12 @@ function BillingAddressFormikProvider({ children, formikData }) {
 }
 
 BillingAddressFormikProvider.propTypes = {
-  children: node.isRequired,
+  children: node,
   formikData: formikDataShape.isRequired,
 };
 
+BillingAddressFormikProvider.defaultProps = {
+  children: null,
+};
+
 export default BillingAddressFormikProvider;
diff --git a/src/reactapp/src/components/billingAddress/components/BillingAddressOthers.jsx b/src/reactapp/src/components/billingAddress/components/BillingAddressOthers.jsx
@@ -70,7 +70,7 @@ function BillingAddressOthers({ forceHide }) {
   };
 
   if (!isLoggedIn || forceHide) {
-    return <></>;
+    return null;
   }
 
   const submitButtonLabel = (

diff --git a/src/reactapp/src/components/billingAddress/components/BillingAddressSelected.jsx b/src/reactapp/src/components/billingAddress/components/BillingAddressSelected.jsx
@@ -36,7 +36,7 @@ function BillingAddressSelected() {
   };
 
   if (!isCartAddressValid(cartBillingAddress)) {
-    return <></>;
+    return null;
   }
 
   return (

diff --git a/src/reactapp/src/components/billingAddress/components/BillingAddressView.jsx b/src/reactapp/src/components/billingAddress/components/BillingAddressView.jsx
@@ -43,7 +43,7 @@ function BillingAddressView() {
   };
 
   if (editMode) {
-    return <></>;
+    return null;
   }
 
   return (

diff --git a/src/reactapp/src/components/billingAddress/components/billingAddressForm/CancelButton.jsx b/src/reactapp/src/components/billingAddress/components/billingAddressForm/CancelButton.jsx
@@ -32,7 +32,7 @@ function CancelButton() {
   };
 
   if (!isCartAddressValid(cartBillingAddress)) {
-    return <></>;
+    return null;
   }
 
   return (

diff --git a/src/reactapp/src/components/checkoutAgreements/CheckoutAgreementsMemorized.jsx b/src/reactapp/src/components/checkoutAgreements/CheckoutAgreementsMemorized.jsx
@@ -15,9 +15,7 @@ const CheckoutAgreementsMemorized = React.memo(({ formikData }) => {
 
   return (
     <CheckoutAgreementFormikProvider formikData={formikData}>
-      {_isObjEmpty(checkoutAgreements) ? (
-        <></>
-      ) : (
+      {_isObjEmpty(checkoutAgreements) ? null : (
         <CheckoutAgreementModalWrapper>
           <Card>
             <ToggleBox show title={__('Checkout Agreements')}>

diff --git a/src/reactapp/src/components/checkoutAgreements/components/CheckoutAgreementModalWrapper.jsx b/src/reactapp/src/components/checkoutAgreements/components/CheckoutAgreementModalWrapper.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import { node } from 'prop-types';
 
 import CheckoutAgreementModal from './CheckoutAgreementModal';
@@ -38,7 +38,10 @@ function CheckoutAgreementModalWrapper({ children }) {
     };
   }, [activeModalId]);
 
-  const context = { activeModalId, setActiveModalId };
+  const context = useMemo(
+    () => ({ activeModalId, setActiveModalId }),
+    [activeModalId]
+  );
 
   return (
     <CheckoutAgreementsModalContext.Provider value={context}>

diff --git a/...eactapp/src/components/checkoutAgreements/components/CheckoutAgreementsFormikProvider.jsx b/...eactapp/src/components/checkoutAgreements/components/CheckoutAgreementsFormikProvider.jsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import { Form } from 'formik';
+import React, { useEffect, useState, useMemo } from 'react';
 import { node } from 'prop-types';
+import { Form, FormikContext } from 'formik';
 
 import {
   prepareAgreementsFormData,
@@ -44,7 +44,10 @@ function CheckoutAgreementFormikProvider({ children, formikData }) {
     id: CHECKOUT_AGREEMENTS_FORM,
   });
 
-  const context = { ...formContext, ...formikData, formikData };
+  const context = useMemo(
+    () => ({ ...formContext, ...formikData, formikData }),
+    [formikData, FormikContext]
+  );
 
   return (
     <CheckoutAgreementsFormikContext.Provider value={context}>
@@ -54,8 +57,12 @@ function CheckoutAgreementFormikProvider({ children, formikData }) {
 }
 
 CheckoutAgreementFormikProvider.propTypes = {
-  children: node.isRequired,
+  children: node,
   formikData: formikDataShape.isRequired,
 };
 
+CheckoutAgreementFormikProvider.defaultProps = {
+  children: null,
+};
+
 export default CheckoutAgreementFormikProvider;
diff --git a/src/reactapp/src/components/common/Card/Card.jsx b/src/reactapp/src/components/common/Card/Card.jsx
@@ -24,7 +24,7 @@ Card.propTypes = {
 Card.defaultProps = {
   bg: '',
   classes: '',
-  children: <></>,
+  children: null,
 };
 
 export default Card;
diff --git a/src/reactapp/src/components/common/Header/Header.jsx b/src/reactapp/src/components/common/Header/Header.jsx
@@ -26,7 +26,7 @@ Header.propTypes = {
 
 Header.defaultProps = {
   small: false,
-  extra: <></>,
+  extra: null,
 };
 
 export default Header;
diff --git a/src/reactapp/src/components/common/Message/Message.jsx b/src/reactapp/src/components/common/Message/Message.jsx
@@ -24,7 +24,7 @@ function Message() {
   }, [message, msgType, setMessage]);
 
   if (!message) {
-    return <></>;
+    return null;
   }
 
   return (

diff --git a/src/reactapp/src/components/couponCode/components/CouponCodeFormikManager.jsx b/src/reactapp/src/components/couponCode/components/CouponCodeFormikManager.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Form } from 'formik';
 import { node } from 'prop-types';
 import { string as YupString } from 'yup';
@@ -19,18 +19,21 @@ const validationSchema = {
 function CouponCodeFormikManager({ children, formikData }) {
   const formSubmit = () => {};
 
-  const context = useFormSection({
+  const formContext = useFormSection({
     formikData,
     initialValues,
     validationSchema,
     id: COUPON_CODE_FORM,
     submitHandler: formSubmit,
   });
 
+  const context = useMemo(
+    () => ({ ...formContext, ...formikData, formikData }),
+    [formContext, formikData]
+  );
+
   return (
-    <CouponCodeFormikContext.Provider
-      value={{ ...context, ...formikData, formikData }}
-    >
+    <CouponCodeFormikContext.Provider value={context}>
       <Form id={COUPON_CODE_FORM}>{children}</Form>
     </CouponCodeFormikContext.Provider>
   );

diff --git a/src/reactapp/src/components/items/components/CartItemsFormManager/CartItemsFormManager.jsx b/src/reactapp/src/components/items/components/CartItemsFormManager/CartItemsFormManager.jsx
@@ -89,6 +89,7 @@ function CartItemsFormManager({ children, formikData }) {
     submitHandler: formSubmit,
   });
 
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
   const context = {
     ...formSectionContext,
     ...formikData,

diff --git a/src/reactapp/src/components/login/components/LoginForm.jsx b/src/reactapp/src/components/login/components/LoginForm.jsx
@@ -29,7 +29,7 @@ function LoginForm() {
   });
 
   if (!editMode) {
-    return <></>;
+    return null;
   }
 
   return (

diff --git a/src/reactapp/src/components/login/components/LoginFormManager.jsx b/src/reactapp/src/components/login/components/LoginFormManager.jsx
@@ -117,6 +117,7 @@ function LoginFormManager({ children, formikData }) {
     }
   }, [cartEmail, setFormToViewMode]);
 
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
   const context = {
     ...formikData,
     ...formSectionContext,

diff --git a/src/reactapp/src/components/login/components/LoginInfoBox.jsx b/src/reactapp/src/components/login/components/LoginInfoBox.jsx
@@ -10,7 +10,7 @@ function LoginInfoBox() {
   const customerWantsToSignIn = _get(loginFormValues, 'customerWantsToSignIn');
 
   if (!editMode) {
-    return <></>;
+    return null;
   }
 
   if (customerWantsToSignIn) {

diff --git a/src/reactapp/src/components/login/components/UserInfoBox.jsx b/src/reactapp/src/components/login/components/UserInfoBox.jsx
@@ -13,7 +13,7 @@ function UserInfoBox() {
   const customerEmail = _get(customer, 'email', '');
 
   if (editMode) {
-    return <></>;
+    return null;
   }
 
   return (

diff --git a/src/reactapp/src/components/paymentMethod/components/PaymentMethodFormManager.jsx b/src/reactapp/src/components/paymentMethod/components/PaymentMethodFormManager.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Form } from 'formik';
 import { node } from 'prop-types';
 import { string as YupString } from 'yup';
@@ -49,18 +49,21 @@ function PaymentMethodFormManager({ children, formikData }) {
     }
   };
 
-  const context = useFormSection({
+  const formContext = useFormSection({
     formikData,
     initialValues,
     validationSchema,
     id: PAYMENT_METHOD_FORM,
     submitHandler: formSubmit,
   });
 
+  const context = useMemo(
+    () => ({ ...formContext, ...formikData, formikData }),
+    [formContext, formikData]
+  );
+
   return (
-    <PaymentMethodFormContext.Provider
-      value={{ ...context, ...formikData, formikData }}
-    >
+    <PaymentMethodFormContext.Provider value={context}>
       <Form id={PAYMENT_METHOD_FORM}>{children}</Form>
     </PaymentMethodFormContext.Provider>
   );