@riosst100/pwa-marketplace 1.4.6 → 1.4.8

package/src/intercept.js

@@ -23,38 +23,38 @@ module.exports = targets => {
 
   // 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 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;
+      // 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);
+        // 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];
+              }
             }
+          });
 
-            // Override mergeLocales with your custom hook
-            localizationPlugin.mergeLocales = myCustomMergeLocalesHook;
+          // Return the modified mergedLocales
+          return originalMergeLocales.call(localizationPlugin, current, update);
         }
+
+        // Override mergeLocales with your custom hook
+        localizationPlugin.mergeLocales = myCustomMergeLocalesHook;
+      }
     }
   });
 
@@ -103,6 +103,20 @@ module.exports = targets => {
       path: require.resolve("./components/CollectibleGameSetsPage/index.js"),
       authed: false,
     },
+    {
+      exact: true,
+      name: "BrandListPage",
+      pattern: "/brands",
+      path: require.resolve("./components/BrandListPage/index.js"),
+      authed: false,
+    },
+    {
+      exact: true,
+      name: "BrandLandingPage",
+      pattern: "/brand",
+      path: require.resolve("./components/BrandLandingPage/index.js"),
+      authed: false,
+    },
   ];
 
   // Apply DefinePlugin using the results of the asynchronous operation

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js

@@ -37,7 +37,7 @@ const CurrentFilter = props => {
                 aria-label={ariaLabel}
                 data-cy="CurrentFilter-trigger"
             >
-                <Icon size={15} src={Remove} />
+                <Icon size={14} src={Remove} />
             </Trigger>
             <span className={classes.text}>
                 {item.label ? item.label : item.title}

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.module.css

@@ -1,14 +1,15 @@
 .root {
     min-height: 24px;
-    composes: bg-blue-700 from global;
-    /* composes: font-semibold from global; */
+    composes: border from global;
+    composes: border-gray-100 from global;
+    composes: font-semibold from global;
     composes: gap-2xs from global;
     composes: grid-flow-col from global;
     composes: inline-grid from global;
     composes: items-center from global;
     composes: justify-center from global;
     composes: px-2 from global;
-    composes: py-2 from global;
+    composes: py-1 from global;
     composes: rounded-md from global;
     /* composes: text-white from global; */
     composes: text-base from global;
@@ -17,5 +18,5 @@
 /* TODO @TW: cannot compose */
 .root svg {
     /* composes: stroke-white from global; */
-    stroke: white;
+    stroke: rgb(var(--venia-global-color-gray-600));
 }

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.module.css

@@ -2,7 +2,9 @@
     composes: px-[10px] from global;
     composes: py-2 from global;
     composes: overflow-auto from global;
-    composes: text-white from global;
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: gap-2 from global;
 }
 
 /* TODO @TW: cannot compose */

package/src/overwrites/venia-ui/lib/components/Footer/footer.js

@@ -0,0 +1,147 @@
+import React, { Fragment } from 'react';
+import { Facebook, Instagram, Twitter, Linkedin } from 'react-feather';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { shape, string } from 'prop-types';
+import { useFooter } from '@magento/peregrine/lib/talons/Footer/useFooter';
+
+import Logo from '@magento/venia-ui/lib/components/Logo';
+import Newsletter from '@magento/venia-ui/lib/components/Newsletter';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './footer.module.css';
+import { DEFAULT_LINKS, LOREM_IPSUM } from './sampleData';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const Footer = props => {
+    const { links } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const talonProps = useFooter();
+
+    const { copyrightText } = talonProps;
+    const { formatMessage } = useIntl();
+    const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
+
+    const linkGroups = Array.from(links, ([groupKey, linkProps]) => {
+        const linkElements = Array.from(linkProps, ([text, pathInfo]) => {
+            let path = pathInfo;
+            let Component = Fragment;
+            if (pathInfo && typeof pathInfo === 'object') {
+                path = pathInfo.path;
+                Component = pathInfo.Component;
+            }
+
+            const itemKey = `text: ${text} path:${path}`;
+            const child = path ? (
+                <Link data-cy="Footer-link" className={classes.link} to={path}>
+                    <FormattedMessage id={text} defaultMessage={text} />
+                </Link>
+            ) : (
+                <span data-cy="Footer-label" className={classes.label}>
+                    <FormattedMessage id={text} defaultMessage={text} />
+                </span>
+            );
+
+            return (
+                <Component key={itemKey}>
+                    <li className={classes.linkItem}>{child}</li>
+                </Component>
+            );
+        });
+
+        return (
+            <ul key={groupKey} className={classes.linkGroup}>
+                {linkElements}
+            </ul>
+        );
+    });
+
+    return (
+        <footer
+            data-cy="Footer-root"
+            className={cn(
+                classes.root,
+                '!pt-[50px] !px-0'
+            )}
+        >
+            <div className={classes.links}>
+                {linkGroups}
+                <div>
+                    <Newsletter />
+                </div>
+                <div className={classes.callout}>
+                    <span
+                        data-cy="Footer-calloutHeading"
+                        className={classes.calloutHeading}
+                    >
+                        Follow Us
+                    </span>
+                    <ul className={classes.socialLinks}>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Instagram size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Facebook size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Twitter size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M12.9311 4.27218C12.8573 4.19836 12.7835 4.19836 12.6358 4.19836C12.4144 4.19836 12.2667 4.19836 12.0453 4.12454C10.7903 3.82925 9.90442 2.86957 9.8306 1.61459V1.31931C9.8306 1.09784 9.68295 0.950195 9.46148 0.950195H7.173C6.95154 0.950195 6.80389 1.09784 6.80389 1.31931V10.5471C6.80389 11.4329 6.06567 12.0973 5.25363 12.0973C4.73688 12.0973 4.29395 11.8758 3.99866 11.5067C3.4819 10.8423 3.62955 9.80883 4.29395 9.29208C4.58923 9.07061 4.88452 9.07061 5.4751 9.07061C5.54892 9.07061 5.69656 9.07061 5.77039 8.99679C5.84421 8.92297 5.91803 8.84915 5.91803 8.7015V6.26538C5.91803 6.11773 5.77039 5.89627 5.62274 5.89627C4.44159 5.74862 3.26044 6.04391 2.37457 6.78213C1.56253 7.52035 0.971956 8.55386 0.824312 9.80883C0.602846 11.2115 1.1196 12.6879 2.07929 13.6476C2.96515 14.6073 4.22012 15.0502 5.40128 15.0502C6.58243 15.0502 7.76358 14.6073 8.64944 13.7214C9.53531 12.8355 10.0521 11.6544 10.0521 10.3994V6.3392C10.9379 6.78213 11.8976 7.07742 12.8573 7.07742C13.0788 7.07742 13.2264 6.92978 13.2264 6.70831V4.49365C13.0788 4.41983 13.0049 4.34601 12.9311 4.27218Z" fill="white" />
+                                </svg>
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Linkedin size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div className="flex flex-row justify-between py-2 border-t border-gray-100">
+                <p className="text-colorDefault">{copyrightText || null}</p>
+                <ul className="flex flex-row gap-x-2.5">
+                    <li data-cy="Footer-terms" className={classes.terms}>
+                        <Link to="/" className="text-colorDefault underline">
+                            <FormattedMessage
+                                id={'footer.termsText'}
+                                defaultMessage={'Terms of Use'}
+                            />
+                        </Link>
+                    </li>
+                    <Divider className="w-[1px] !h-[20px]" />
+                    <li data-cy="Footer-privacy" className={classes.privacy}>
+                        <Link to="/" className="text-colorDefault underline">
+                            <FormattedMessage
+                                id={'footer.privacyText'}
+                                defaultMessage={'Privacy Policy'}
+                            />
+                        </Link>
+                    </li>
+                </ul>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
+
+Footer.defaultProps = {
+    links: DEFAULT_LINKS
+};
+
+Footer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};

package/src/overwrites/venia-ui/lib/components/Footer/footer.module.css

@@ -0,0 +1,70 @@
+.root {
+    composes: border-t from global;
+    composes: border-solid from global;
+    composes: border-gray-100 from global;
+    composes: gap-y-16 from global;
+    composes: grid from global;
+    composes: leading-normal from global;
+    composes: max-w-site from global;
+    composes: min-h-[15rem] from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: pt-16 from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
+    composes: w-full from global;
+}
+
+.links {
+    composes: gap-x-md from global;
+    composes: gap-y-lg from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: md_grid-cols-1 from global;
+    composes: grid-flow-row-dense from global;
+    composes: lg_gap-x-sm from global;
+    composes: lg_gap-y-md from global;
+    composes: lg_grid-cols-4 from global;
+}
+
+.linkGroup {
+    /* composes: col-span-3 from global; */
+    composes: content-start from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+
+    /* composes: xs_col-span-2 from global; */
+}
+
+.linkItem {
+    composes: first_text-colorDefault from global;
+    composes: first_font-semibold from global;
+}
+
+.callout {
+    /* composes: col-span-3 from global; */
+    composes: leading-normal from global;
+    composes: max-w-[20rem] from global;
+    composes: text-sm from global;
+    composes: flex from global;
+    composes: flex-col from global;
+    composes: gap-y-[15px] from global;
+}
+
+.calloutHeading {
+    composes: font-semibold from global;
+    composes: text-colorDefault from global;
+    composes: text-sm from global;
+}
+
+.calloutBody {
+    composes: mx-0 from global;
+    composes: my-xs from global;
+}
+
+.socialLinks {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-start from global;
+}

package/src/overwrites/venia-ui/lib/components/Footer/index.js

@@ -0,0 +1 @@
+export { default } from './footer';

package/src/overwrites/venia-ui/lib/components/Footer/sampleData.js

@@ -0,0 +1,48 @@
+import { ContactLink } from '@magento/venia-ui/lib/components/ContactPage';
+
+const accountLinks = new Map()
+    .set('Account', null)
+    .set('Sign In', '/')
+    .set('Register', '/')
+    .set('Tracking Order', '/')
+
+const getToKnowUsLinks = new Map()
+    .set('About TCG Collective', null)
+    .set('Career', '/')
+    .set('Contact Us', '/')
+    .set('Help Center', '/')
+    .set('Intelectual Property Claims', '/');
+
+const aboutLinks = new Map()
+    .set('About Us', '/about-us')
+    .set('Our Story', null)
+    .set('Email Signup', null)
+    .set('Give Back', null);
+
+const sitesLinks = new Map()
+    .set('Sites', null)
+    .set('International', '/')
+    .set('Singapore', '/')
+    .set('Malaysia', '/')
+    .set('Indonesia', '/')
+    .set('Thailand', '/')
+    .set('Philippines', '/')
+    .set('Vietnam', '/')
+
+const helpLinks = new Map()
+    .set('Help', null)
+    .set('Customer Service', '/customer-service')
+    .set('Contact Us', {
+        path: '/contact-us',
+        Component: ContactLink
+    })
+    .set('Order Status', null)
+    .set('Returns', null);
+
+export const DEFAULT_LINKS = new Map()
+    .set('us', getToKnowUsLinks)
+    .set('account', accountLinks)
+    .set('sites', sitesLinks);
+
+export const LOREM_IPSUM =
+    'Lorem ipsum dolor sit amet, consectetur adipsicing elit, sed do eiusmod tempor incididunt ut labore et dolore.';

package/src/overwrites/venia-ui/lib/components/Gallery/gallery.module.css

@@ -15,7 +15,7 @@
     grid-template-columns: repeat(4, 1fr);
 }
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 1023px) {
     .items {
         grid-template-columns: repeat(3, 1fr);
     }

package/src/overwrites/venia-ui/lib/components/Main/index.js

@@ -0,0 +1 @@
+export { default } from './main';

package/src/overwrites/venia-ui/lib/components/Main/main.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { bool, shape, string } from 'prop-types';
+import { useScrollLock } from '@magento/peregrine';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Footer from '@magento/venia-ui/lib/components/Footer';
+import Header from '@magento/venia-ui/lib/components/Header';
+import defaultClasses from './main.module.css';
+import cn from 'classnames';
+
+const Main = props => {
+    const { children, isMasked } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const rootClass = isMasked ? classes.root_masked : classes.root;
+    const pageClass = isMasked ? classes.page_masked : classes.page;
+
+    useScrollLock(isMasked);
+
+    return (
+        <main className={rootClass}>
+            <Header />
+            <div className={cn(pageClass, 'main-content-container pb-16')}>{children}</div>
+            <Footer />
+        </main>
+    );
+};
+
+export default Main;
+
+Main.propTypes = {
+    classes: shape({
+        page: string,
+        page_masked: string,
+        root: string,
+        root_masked: string
+    }),
+    isMasked: bool
+};

package/src/overwrites/venia-ui/lib/components/Main/main.module.css

@@ -0,0 +1,41 @@
+.root {
+    composes: bg-white from global;
+    composes: relative from global;
+    composes: text-colorDefault from global;
+    composes: z-foreground from global;
+}
+
+.root_masked {
+    composes: root;
+}
+
+.page {
+    composes: md_max-w-screen-md from global;
+    composes: lg_max-w-[1210px] from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-[15px] from global;
+    min-height: 40rem;
+}
+
+.page_masked {
+    composes: page;
+}
+
+@media (min-height: 640px) {
+    .page {
+        min-height: 48rem;
+    }
+}
+
+@media (min-height: 768px) {
+    .page {
+        min-height: 60rem;
+    }
+}
+
+@media (min-height: 960px) {
+    .page {
+        min-height: 72rem;
+    }
+}

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.js

@@ -76,17 +76,27 @@ const SubmenuColumn = props => {
                 <li key={index} className={classes.submenuChildItem}>
                     {customMenuItems.length ? (
                         <>
-                            <div
-                                // {...keyboardProps}
+                            <Link
+                                {...keyboardProps}
                                 className={isActive ? classes.linkActive : classes.link}
                                 data-cy="MegaMenu-SubmenuColumn-link"
+                                to={categoryUrl}
                                 onClick={() => {
-                                    toggleCustomMenu();
+                                    handleCloseSubMenu();
+                                    onNavigate();
                                 }}
                             >
                                 {name}
+                            </Link>
+                            <span
+                                className={isActive ? classes.linkActive : classes.link}
+                                data-cy="MegaMenu-SubmenuColumn-link"
+                                onClick={() => {
+                                    toggleCustomMenu();
+                                }}
+                            >
                                 {arrow}
-                            </div>
+                            </span>
                             {showCustomMenu ? customSubMenus : ''}
                         </>
                     ) : (

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.module.css

@@ -15,13 +15,13 @@
     composes: hover_underline from global;
 
     align-items: center;
-    composes: flex from global;
+    composes: inline-flex from global;
 }
 
 .linkActive {
     composes: underline from global;
     align-items: center;
-    composes: flex from global;
+    composes: inline-flex from global;
 }
 
 .submenuChild {

package/src/overwrites/venia-ui/lib/components/Newsletter/index.js

@@ -0,0 +1 @@
+export { default } from './newsletter';