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

#277 Implement a common hook to perform save payment using REST Api

Author: wigman

src/reactapp/package-lock.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"
   }

src/reactapp/package.json

@@ -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',

src/reactapp/src/api/sendRequest.js

@@ -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 = {

src/reactapp/src/components/CheckoutForm/CheckoutFormWrapper.jsx

@@ -66,7 +66,7 @@ AddressCard.propTypes = {
 
 AddressCard.defaultProps = {
   title: '',
-  billingSameCheckbox: <></>,
+  billingSameCheckbox: null,
 };
 
 export default AddressCard;

src/reactapp/src/components/address/components/AddressCard.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,

src/reactapp/src/components/address/components/AddressWrapper/AddressWrapperMemorized.jsx

@@ -11,7 +11,7 @@ function CreateNewAddressLink({ actions, forceHide }) {
   const { isLoggedIn } = useAppContext();
 
   if (!isLoggedIn || forceHide) {
-    return <></>;
+    return null;
   }
 
   return (

src/reactapp/src/components/address/components/CreateNewAddressLink.jsx

@@ -12,7 +12,7 @@ function SaveInBookCheckbox({ fields, formikData }) {
   const saveInAddressBook = !!_get(formikData, 'formSectionValues.saveInBook');
 
   if (!isLoggedIn || !customer?.hasAddress) {
-    return <></>;
+    return null;
   }
 
   return (

src/reactapp/src/components/address/components/SaveInBookCheckbox.jsx

@@ -22,9 +22,7 @@ const BillingAddressMemorized = React.memo(({ formikData }) => {
             <BillingAddressView />
           </ToggleBox>
         </Card>
-      ) : (
-        <></>
-      )}
+      ) : null}
     </BillingAddressFormikProvider>
   );
 });

src/reactapp/src/components/billingAddress/BillingAddressMemorized.jsx

@@ -91,7 +91,7 @@ function BillingAddressForm() {
   };
 
   if (viewMode) {
-    return <></>;
+    return null;
   }
 
   return (