Merge pull request #32 from hyva-themes/port-1.1.2

1.1.2 release related changes

Author: rajeev-k-tomy

reactapp/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   parser: '@babel/eslint-parser',
-  extends: ['airbnb', 'plugin:prettier/recommended'],
+  extends: ['airbnb', 'airbnb/hooks', 'plugin:prettier/recommended'],
   env: {
     es6: true,
     node: true,

reactapp/scripts/configureCheckoutIntegrations.js

@@ -0,0 +1,11 @@
+const configurePaymentMethods = require('./integrations/configurePaymentMethods');
+const configureShippingMethods = require('./integrations/configureShippingMethods');
+
+module.exports = (async () => {
+  try {
+    await configurePaymentMethods();
+    await configureShippingMethods();
+  } catch (error) {
+    console.error(error);
+  }
+})();

reactapp/scripts/configurePaymentMethods.js reactapp/scripts/integrations/configurePaymentMethods.js

@@ -13,7 +13,7 @@ const paymentDirectoryPath = './src/paymentMethods/';
  * It will also populate `src/paymentMethods/customRenderers.js` which can be
  * used to port custom payment renderers into the react app.
  */
-module.exports = (async () => {
+const configurePaymentMethods = async () => {
   const paymentRepos = util.collectConfiguredReposFromEnv('paymentMethodsRepo');
   const paymentMethodList = Object.keys(paymentRepos);
 
@@ -50,4 +50,6 @@ module.exports = (async () => {
   }
 
   console.log('Payment methods successfully added');
-})();
+};
+
+module.exports = configurePaymentMethods;

reactapp/scripts/integrations/configureShippingMethods.js

@@ -0,0 +1,57 @@
+const fs = require('fs');
+const util = require('./utility');
+
+const shippingDirectoryPath = './src/shippingMethods/';
+
+/**
+ * Setting up custom shipping methods into the react app section
+ *
+ * This will clone the shipping methods repository specified under
+ * `config.shippingMethodsRepo` section in package.json file into the
+ * `src/shippingMethods`
+ *
+ * It will also populate `src/shippingMethods/customRenderers.js` which can be
+ * used to port custom shipping renderers into the react app.
+ */
+const configureShippingMethods = async () => {
+  const shippingRepos = util.collectConfiguredReposFromEnv(
+    'shippingMethodsRepo'
+  );
+  const shippingMethodList = Object.keys(shippingRepos);
+
+  await util.cloneAndConfigureRepos(
+    shippingRepos,
+    shippingDirectoryPath,
+    'shipping method'
+  );
+
+  if (shippingMethodList.length) {
+    let content = `/**
+ * 📢 📢 📢 This file is autogenerated and may be overwritten. Handle with care. 🙅🏽 🙅🏽 🙅🏽
+ *
+ * When you have custom shipping repo integration, then the content of this file
+ * will be overwritten during performing "npm install". So, in most of the cases,
+ * you don't need to alter the content of this file.
+ *
+ * But, if you have your own custom shipping methods locally, then you need to
+ * include them here as well. That is the only time you need to touch this file.
+ */\n\n`;
+    content += shippingMethodList
+      .map(
+        (method) => `import ${method}Renderers from './${method}/renderers';\n`
+      )
+      .join('');
+    content += '\n';
+    content += `export default {\n`;
+    content += shippingMethodList
+      .map((method) => `  ...${method}Renderers,\n`)
+      .join('');
+    content += '};\n';
+
+    fs.writeFileSync(`${shippingDirectoryPath}customRenderers.js`, content);
+  }
+
+  console.log('Shipping methods successfully added');
+};
+
+module.exports = configureShippingMethods;

reactapp/scripts/utility/index.js reactapp/scripts/integrations/utility/index.js

@@ -16,9 +16,9 @@ module.exports = {
 
     Object.keys(env).forEach((envProp) => {
       if (envProp.startsWith(configPrefix)) {
-        const paymentCode = envProp.replace(configPrefix, '');
-        if (paymentCode) {
-          repos[paymentCode] = env[envProp];
+        const integrationCode = envProp.replace(configPrefix, '');
+        if (integrationCode) {
+          repos[integrationCode] = env[envProp];
         }
       }
     });
@@ -27,10 +27,10 @@ module.exports = {
   },
 
   async cloneAndConfigureRepos(repoList, installationPath, repoType) {
-    const paymentMethodList = Object.keys(repoList);
+    const integrationMethodList = Object.keys(repoList);
 
     await Promise.all(
-      paymentMethodList.map(async (repo) => {
+      integrationMethodList.map(async (repo) => {
         if (!fs.existsSync(`${installationPath}${repo}`)) {
           await this.installRepo(
             installationPath,

reactapp/scripts/react-app-rewire/postcss-applier.js

@@ -8,30 +8,30 @@
  * version of postcss. Hence, we go for custom script to give the ability to configure
  * postcss.config.js file with cra-5
  */
- const customPostCssSettings = require('../../postcss.config');
+const customPostCssSettings = require('../../postcss.config');
 
- // return a filtered array that includes postcss-loader
- const filterPostCSSLoader = (array) =>
-   array.filter((object) => JSON.stringify(object).includes('postcss-loader'));
+// return a filtered array that includes postcss-loader
+const filterPostCSSLoader = (array) =>
+  array.filter((object) => JSON.stringify(object).includes('postcss-loader'));
 
- module.exports = (config) => {
-   // find any first matching rule that contains postcss-loader
-   filterPostCSSLoader(config.module.rules).forEach((rule) => {
-     filterPostCSSLoader(rule.oneOf).forEach((oneOf) => {
-       filterPostCSSLoader(oneOf.use || oneOf.loader).forEach((use) => {
-         // use the latest version of postcss-loader
-         use.loader = require.resolve('postcss-loader');
-         use.options = {
-           ...use.options,
-           postcssOptions: {
-             ...use.options.postcssOptions,
-             ...customPostCssSettings,
-           },
-         };
-       });
-     });
-   });
+module.exports = (config) => {
+  // find any first matching rule that contains postcss-loader
+  filterPostCSSLoader(config.module.rules).forEach((rule) => {
+    filterPostCSSLoader(rule.oneOf).forEach((oneOf) => {
+      filterPostCSSLoader(oneOf.use || oneOf.loader).forEach((use) => {
+        // use the latest version of postcss-loader
+        use.loader = require.resolve('postcss-loader');
+        use.options = {
+          ...use.options,
+          postcssOptions: {
+            ...use.options.postcssOptions,
+            ...customPostCssSettings,
+          },
+        };
+      });
+    });
+  });
 
-   // return the mutated configuration
-   return config;
- };
+  // return the mutated configuration
+  return config;
+};

reactapp/src/index.jsx

@@ -4,7 +4,6 @@ import { createRoot } from 'react-dom/client';
 
 import RootElement from '@hyva/react-checkout/utils/rootElement';
 import CheckoutForm from '@hyva/react-checkout/components/CheckoutForm';
-import StepProvider from '@hyva/react-checkout/context/Form/Step/StepProvider';
 import AppDataProvider from '@hyva/react-checkout/context/App/AppDataProvider';
 import CartDataProvider from '@hyva/react-checkout/context/Cart/CartDataProvider';
 import CheckoutFormProvider from '@hyva/react-checkout/context/Form/CheckoutFormProvider';
@@ -16,9 +15,7 @@ function Checkout() {
     <AppDataProvider>
       <CartDataProvider>
         <CheckoutFormProvider>
-          <StepProvider>
-            <CheckoutForm />
-          </StepProvider>
+          <CheckoutForm />
         </CheckoutFormProvider>
       </CartDataProvider>
     </AppDataProvider>

reactapp/src/shippingMethods/customRenderers.js

@@ -0,0 +1,12 @@
+/**
+ * 📢 📢 📢 This file is autogenerated and may be overwritten. Handle with care. 🙅🏽 🙅🏽 🙅🏽
+ *
+ * When you have custom shipping repo integration, then the content of this file
+ * will be overwritten during performing "npm install". So, in most of the cases,
+ * you don't need to alter the content of this file.
+ *
+ * But, if you have your own custom shipping methods locally, then you need to
+ * include them here as well. That is the only time you need to touch this file.
+ */
+
+export default {};