@riosst100/pwa-marketplace 1.2.6 → 1.2.7

package/src/components/WebsiteSwitcher/websiteSwitcher.js

@@ -1,109 +1,109 @@
-import React from 'react';
-import { shape, string } from 'prop-types';
-
-import { useWebsiteSwitcher } from '@riosst100/pwa-marketplace/src/talons/WebsiteSwitcher/useWebsiteSwitcher';
-import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './websiteSwitcher.module.css';
-import WebsiteSwitcherItem from './websiteSwitcherItem';
-import Shimmer from './websiteSwitcher.shimmer';
-
-const WebsiteSwitcher = props => {
-    const {
-        availableStores,
-        currentGroupName,
-        currentWebsiteName,
-        handleSwitchWebsite,
-        storeGroups,
-        storeMenuRef,
-        storeMenuTriggerRef,
-        storeMenuIsOpen,
-        handleTriggerClick
-    } = useWebsiteSwitcher({ availableRoutes });
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const menuClassName = storeMenuIsOpen ? classes.menu_open : classes.menu;
-
-    if (!availableStores) return <Shimmer />;
-
-    if (availableStores.size <= 1) return null;
-
-    const groups = [];
-    const hasOnlyOneGroup = storeGroups.size === 1;
-
-    storeGroups.forEach((group, key) => {
-        const stores = [];
-        group.forEach(({ websiteCode, websiteName, isCurrent, storeCode }) => {
-            let label = `${websiteName}`;
-            stores.push(
-                <li
-                    aria-selected={currentWebsiteName}
-                    role="option"
-                    key={storeCode}
-                    className={classes.menuItem}
-                    data-cy="WebsiteSwitcher-view"
-                >
-                    <WebsiteSwitcherItem
-                        active={isCurrent}
-                        onClick={handleSwitchWebsite}
-                        option={storeCode}
-                        option2={websiteCode}
-                    >
-                        {label}
-                    </WebsiteSwitcherItem>
-                </li>
-            );
-        });
-
-        groups.push(
-            <ul
-                role="listbox"
-                className={classes.groupList}
-                key={key}
-                data-cy="WebsiteSwitcher-group"
-            >
-                {stores}
-            </ul>
-        );
-    });
-
-    let triggerLabel = currentWebsiteName ? `${currentWebsiteName}` : '';
-
-    return (
-        <div className={classes.root} data-cy="WebsiteSwitcher-root">
-            <button
-                data-cy="WebsiteSwitcher-triggerButton"
-                className={classes.trigger}
-                aria-label={currentWebsiteName || ''}
-                onClick={handleTriggerClick}
-                ref={storeMenuTriggerRef}
-                data-cy="WebsiteSwitcher-trigger"
-                aria-expanded={storeMenuIsOpen}
-            >
-                {triggerLabel || ''}
-            </button>
-            <div
-                ref={storeMenuRef}
-                className={menuClassName}
-                data-cy="WebsiteSwitcher-menu"
-            >
-                <div className={classes.groups}>{groups}</div>
-            </div>
-        </div>
-    );
-};
-
-export default WebsiteSwitcher;
-
-WebsiteSwitcher.propTypes = {
-    classes: shape({
-        groupList: string,
-        groups: string,
-        menu: string,
-        menu_open: string,
-        menuItem: string,
-        root: string,
-        trigger: string
-    })
-};
+import React from 'react';
+import { shape, string } from 'prop-types';
+
+import { useWebsiteSwitcher } from '@riosst100/pwa-marketplace/src/talons/WebsiteSwitcher/useWebsiteSwitcher';
+import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './websiteSwitcher.module.css';
+import WebsiteSwitcherItem from './websiteSwitcherItem';
+import Shimmer from './websiteSwitcher.shimmer';
+
+const WebsiteSwitcher = props => {
+    const {
+        availableStores,
+        currentGroupName,
+        currentWebsiteName,
+        handleSwitchWebsite,
+        storeGroups,
+        storeMenuRef,
+        storeMenuTriggerRef,
+        storeMenuIsOpen,
+        handleTriggerClick
+    } = useWebsiteSwitcher({ availableRoutes });
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const menuClassName = storeMenuIsOpen ? classes.menu_open : classes.menu;
+
+    if (!availableStores) return <Shimmer />;
+
+    if (availableStores.size <= 1) return null;
+
+    const groups = [];
+    const hasOnlyOneGroup = storeGroups.size === 1;
+
+    storeGroups.forEach((group, key) => {
+        const stores = [];
+        group.forEach(({ websiteCode, websiteName, isCurrent, storeCode }) => {
+            let label = `${websiteName}`;
+            stores.push(
+                <li
+                    aria-selected={currentWebsiteName}
+                    role="option"
+                    key={storeCode}
+                    className={classes.menuItem}
+                    data-cy="WebsiteSwitcher-view"
+                >
+                    <WebsiteSwitcherItem
+                        active={isCurrent}
+                        onClick={handleSwitchWebsite}
+                        option={storeCode}
+                        option2={websiteCode}
+                    >
+                        {label}
+                    </WebsiteSwitcherItem>
+                </li>
+            );
+        });
+
+        groups.push(
+            <ul
+                role="listbox"
+                className={classes.groupList}
+                key={key}
+                data-cy="WebsiteSwitcher-group"
+            >
+                {stores}
+            </ul>
+        );
+    });
+
+    let triggerLabel = currentWebsiteName ? `${currentWebsiteName}` : '';
+
+    return (
+        <div className={classes.root} data-cy="WebsiteSwitcher-root">
+            <button
+                data-cy="WebsiteSwitcher-triggerButton"
+                className={classes.trigger}
+                aria-label={currentWebsiteName || ''}
+                onClick={handleTriggerClick}
+                ref={storeMenuTriggerRef}
+                data-cy="WebsiteSwitcher-trigger"
+                aria-expanded={storeMenuIsOpen}
+            >
+                {triggerLabel || ''}
+            </button>
+            <div
+                ref={storeMenuRef}
+                className={menuClassName}
+                data-cy="WebsiteSwitcher-menu"
+            >
+                <div className={classes.groups}>{groups}</div>
+            </div>
+        </div>
+    );
+};
+
+export default WebsiteSwitcher;
+
+WebsiteSwitcher.propTypes = {
+    classes: shape({
+        groupList: string,
+        groups: string,
+        menu: string,
+        menu_open: string,
+        menuItem: string,
+        root: string,
+        trigger: string
+    })
+};

package/src/components/commons/Slider/index.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import cx from 'classnames';
-
-const Slider = (props) => {
-    const { rootClassname = '', seller } = props
-    const rootClass = cx('slider-container', rootClassname)
-    return (
-        <div className={rootClass}>
-            <img src={seller ? seller.image : ''} />
-        </div>
-    )
-}
-
+import React from 'react';
+import cx from 'classnames';
+
+const Slider = (props) => {
+    const { rootClassname = '', seller } = props
+    const rootClass = cx('slider-container', rootClassname)
+    return (
+        <div className={rootClass}>
+            <img src={seller ? seller.image : ''} />
+        </div>
+    )
+}
+
 export default Slider

package/src/components/commons/Tabs/index.js

@@ -1,63 +1,65 @@
-import React from 'react';
-import cx from 'classnames';
-
-const Tabs = (props) => {
-    const {
-        data = [],
-        onChange = () => { },
-        hasContent = false,
-        rootClassName = '',
-        tabTitleClassName = '',
-        tabContentContainerClassName = '',
-        tabContentWrapperClassName = '',
-        tabActiveClassName = '',
-    } = props
-
-    const [activeTabs, setActiveTabs] = React.useState(0);
-    const rootClass = cx('mb-4 border-b border-gray-200 dark:border-gray-700', rootClassName);
-    const tabTitleClass = cx('inline-block p-4 rounded-t-lg', tabTitleClassName);
-    const tabContainerClass = cx('tab-content-container', tabContentContainerClassName);
-    const tabContentWrapperClass = cx('tab-content-wrapper', tabContentWrapperClassName);
-    const tabActiveClass = cx('border-solid border-b-2', tabActiveClassName)
-
-    const handleSwicthTab = (index) => {
-        setActiveTabs(index);
-    }
-
-    return (
-        <>
-            <div className={rootClass}>
-                <ul className='flex flex-wrap -mb-px text-sm font-medium text-center' role='tablist'>
-                    {data.map((item, index) => (
-                        <li className='me-2' role='presentation'>
-                            <button
-                                className={cx(tabTitleClass, index === activeTabs ? tabActiveClass : '')}
-                                id={item.id}
-                                role='tab'
-                                aria-controls={`${item.id}-tab`}
-                                aria-selected='false'
-                                onClick={(e) => {
-                                    hasContent ? handleSwicthTab(index) : onChange(index, e);
-                                    e.preventDefault();
-                                }}
-                            >
-                                {item.title}
-                            </button>
-                        </li>
-                    ))}
-                </ul>
-            </div>
-            {hasContent ? (
-                <div className={tabContainerClass}>
-                    {data.map((item, index) => (
-                        <div className={cx(index !== activeTabs ? 'hidden' : '', tabContentWrapperClass)} role='tabpanel' aria-labelledby={`${item.id}-tab`}>
-                            {item.content}
-                        </div>
-                    ))}
-                </div>
-            ) : null}
-        </>
-    )
-}
-
+import React from 'react';
+import cn from 'classnames';
+
+const Tabs = (props) => {
+    const {
+        data = [],
+        onChange = () => { },
+        hasContent = false,
+        rootClassName = '',
+        tabTitleClassName = '',
+        tabContentContainerClassName = '',
+        tabContentWrapperClassName = '',
+        tabActiveClassName = '',
+        tabWrapperClassName = '',
+    } = props
+
+    const [activeTabs, setActiveTabs] = React.useState(0);
+    const rootClass = cn('mb-4 border-b border-gray-100', rootClassName);
+    const tabTitleClass = cn('inline-block p-[10px] rounded-t-lg text-[16px] font-semibold', tabTitleClassName);
+    const tabContainerClass = cn('tab-content-container', tabContentContainerClassName);
+    const tabContentWrapperClass = cn('tab-content-wrapper', tabContentWrapperClassName);
+    const tabActiveClass = cn('border-solid border-b-2', tabActiveClassName);
+    const tabWrapperClass = cn('flex flex-wrap -mb-px text-sm font-medium text-center gap-4', tabWrapperClassName);
+
+    const handleSwicthTab = (index) => {
+        setActiveTabs(index);
+    }
+
+    return (
+        <>
+            <div className={rootClass}>
+                <ul className={tabWrapperClass} role='tablist'>
+                    {data.map((item, index) => (
+                        <li className='me-2' role='presentation'>
+                            <button
+                                className={cn(tabTitleClass, index === activeTabs ? tabActiveClass : '')}
+                                id={item.id}
+                                role='tab'
+                                aria-controls={`${item.id}-tab`}
+                                aria-selected='false'
+                                onClick={(e) => {
+                                    hasContent ? handleSwicthTab(index) : onChange(index, e);
+                                    e.preventDefault();
+                                }}
+                            >
+                                {item.title}
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+            {hasContent ? (
+                <div className={tabContainerClass}>
+                    {data.map((item, index) => (
+                        <div className={cn(index !== activeTabs ? 'hidden' : '', tabContentWrapperClass)} role='tabpanel' aria-labelledby={`${item.id}-tab`}>
+                            {item.content}
+                        </div>
+                    ))}
+                </div>
+            ) : null}
+        </>
+    )
+}
+
 export default Tabs

package/src/index.js

@@ -1,7 +1,7 @@
-/**
- * Custom index for the extension attention this file should be not delete!
- * It is use as main file but this can be empty by default only need to exits.
- *
- * A project index.js should contain default exports like:
- * export { default } from './components/main';
+/**
+ * Custom index for the extension attention this file should be not delete!
+ * It is use as main file but this can be empty by default only need to exits.
+ *
+ * A project index.js should contain default exports like:
+ * export { default } from './components/main';
  */

package/src/intercept.js

@@ -1,114 +1,114 @@
-const componentOverrideMapping = require('./componentOverrideMapping');
-const moduleOverridePlugin = require('./moduleOverrideWebpackPlugin');
-const { DefinePlugin } = require('webpack');
-const { getAvailableWebsitesConfigData } = require('./Utilities/graphQL');
-const LocalizationPlugin = require('@magento/pwa-buildpack/lib/WebpackTools/plugins/LocalizationPlugin');
-
-module.exports = targets => {
-  // Perform the asynchronous operation outside the tap
-  let availableWebsites;
-
-  // Use an IIFE (Immediately Invoked Function Expression) to enable async/await
-  (async () => {
-    availableWebsites = await getAvailableWebsitesConfigData();
-  })();
-
-  targets.of('@magento/pwa-buildpack').specialFeatures.tap(features => {
-    features[targets.name] = { i18n: true, esModules: true, cssModules: true, graphqlQueries: true };
-  });
-
-  targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
-    new moduleOverridePlugin(componentOverrideMapping).apply(compiler);
-  });
-
-  // Tap into webpackCompiler
-  targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
-      // Check if the LocalizationPlugin is present
-      if (compiler.options.plugins) {
-        const localizationPlugin = compiler.options.plugins.find(
-            plugin => plugin instanceof LocalizationPlugin
-        );
-
-        // Check if LocalizationPlugin is found
-        if (localizationPlugin) {
-            // Store the original mergeLocales function
-            const originalMergeLocales = localizationPlugin.mergeLocales;
-
-            // Define your custom hook
-            function myCustomMergeLocalesHook(current, update) {
-                // Modify the mergedLocales data here
-                Object.keys(update).forEach(key => {
-                  if (typeof current[key] === 'undefined') {
-                      current[key] = [];
-                  }
-                  if (Array.isArray(current[key]) && Array.isArray(update[key])) {
-                    if (update[key].toString().includes("venia-ui")) {
-                      delete update[key];
-                    }
-                  }
-              });
-
-                // Return the modified mergedLocales
-                return originalMergeLocales.call(localizationPlugin, current, update);
-            }
-
-            // Override mergeLocales with your custom hook
-            localizationPlugin.mergeLocales = myCustomMergeLocalesHook;
-        }
-    }
-  });
-
-  targets.of('@magento/pwa-buildpack').envVarDefinitions.tap(defs => {
-    defs.sections.push({
-      name: "Default Website Code",
-      variables: [
-        {
-          name: "WEBSITE_CODE",
-          type: "str",
-          desc: "Default Website Code for Multi Website Extension",
-        },
-      ],
-    });
-  });
-
-  // Define the routes using the results of the asynchronous operation
-  const routes = [
-    {
-      exact: true,
-      name: "BecomeSellerRoute",
-      pattern: "/become-seller",
-      path: require.resolve("./components/BecomeSellerPage/index.js"),
-      authed: true,
-      redirectTo: "/sign-in"
-    },
-    {
-      exact: true,
-      name: "SellerAccountRoute",
-      pattern: "/seller-account",
-      path: require.resolve("./components/SellerAccountPage/index.js"),
-      authed: true,
-      redirectTo: "/become-seller"
-    },
-    {
-      exact: true,
-      name: "SellerPage",
-      pattern: "/seller/:urlKey",
-      path: require.resolve("./components/SellerPage/index.js"),
-      authed: false,
-    },
-  ];
-
-  // Apply DefinePlugin using the results of the asynchronous operation
-  targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
-    new DefinePlugin({
-      AVAILABLE_WEBSITES: JSON.stringify(availableWebsites.availableStoresByUserIp),
-      WEBSITE_CODE: process.env.WEBSITE_CODE
-    }).apply(compiler);
-  });
-
-  // Handle the routes directly within the routes tap
-  targets.of("@magento/venia-ui").routes.tap(routesArray => {
-    routesArray.push(...routes);
-    return routesArray;
-  });
+const componentOverrideMapping = require('./componentOverrideMapping');
+const moduleOverridePlugin = require('./moduleOverrideWebpackPlugin');
+const { DefinePlugin } = require('webpack');
+const { getAvailableWebsitesConfigData } = require('./Utilities/graphQL');
+const LocalizationPlugin = require('@magento/pwa-buildpack/lib/WebpackTools/plugins/LocalizationPlugin');
+
+module.exports = targets => {
+  // Perform the asynchronous operation outside the tap
+  let availableWebsites;
+
+  // Use an IIFE (Immediately Invoked Function Expression) to enable async/await
+  (async () => {
+    availableWebsites = await getAvailableWebsitesConfigData();
+  })();
+
+  targets.of('@magento/pwa-buildpack').specialFeatures.tap(features => {
+    features[targets.name] = { i18n: true, esModules: true, cssModules: true, graphqlQueries: true };
+  });
+
+  targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
+    new moduleOverridePlugin(componentOverrideMapping).apply(compiler);
+  });
+
+  // Tap into webpackCompiler
+  targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
+      // Check if the LocalizationPlugin is present
+      if (compiler.options.plugins) {
+        const localizationPlugin = compiler.options.plugins.find(
+            plugin => plugin instanceof LocalizationPlugin
+        );
+
+        // Check if LocalizationPlugin is found
+        if (localizationPlugin) {
+            // Store the original mergeLocales function
+            const originalMergeLocales = localizationPlugin.mergeLocales;
+
+            // Define your custom hook
+            function myCustomMergeLocalesHook(current, update) {
+                // Modify the mergedLocales data here
+                Object.keys(update).forEach(key => {
+                  if (typeof current[key] === 'undefined') {
+                      current[key] = [];
+                  }
+                  if (Array.isArray(current[key]) && Array.isArray(update[key])) {
+                    if (update[key].toString().includes("venia-ui")) {
+                      delete update[key];
+                    }
+                  }
+              });
+
+                // Return the modified mergedLocales
+                return originalMergeLocales.call(localizationPlugin, current, update);
+            }
+
+            // Override mergeLocales with your custom hook
+            localizationPlugin.mergeLocales = myCustomMergeLocalesHook;
+        }
+    }
+  });
+
+  targets.of('@magento/pwa-buildpack').envVarDefinitions.tap(defs => {
+    defs.sections.push({
+      name: "Default Website Code",
+      variables: [
+        {
+          name: "WEBSITE_CODE",
+          type: "str",
+          desc: "Default Website Code for Multi Website Extension",
+        },
+      ],
+    });
+  });
+
+  // Define the routes using the results of the asynchronous operation
+  const routes = [
+    {
+      exact: true,
+      name: "BecomeSellerRoute",
+      pattern: "/become-seller",
+      path: require.resolve("./components/BecomeSellerPage/index.js"),
+      authed: true,
+      redirectTo: "/sign-in"
+    },
+    {
+      exact: true,
+      name: "SellerAccountRoute",
+      pattern: "/seller-account",
+      path: require.resolve("./components/SellerAccountPage/index.js"),
+      authed: true,
+      redirectTo: "/become-seller"
+    },
+    {
+      exact: true,
+      name: "SellerPage",
+      pattern: "/seller/:urlKey",
+      path: require.resolve("./components/SellerPage/index.js"),
+      authed: false,
+    },
+  ];
+
+  // Apply DefinePlugin using the results of the asynchronous operation
+  targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
+    new DefinePlugin({
+      AVAILABLE_WEBSITES: JSON.stringify(availableWebsites.availableStoresByUserIp),
+      WEBSITE_CODE: process.env.WEBSITE_CODE
+    }).apply(compiler);
+  });
+
+  // Handle the routes directly within the routes tap
+  targets.of("@magento/venia-ui").routes.tap(routesArray => {
+    routesArray.push(...routes);
+    return routesArray;
+  });
 };