@riosst100/pwa-marketplace 1.8.1 → 1.8.2

package/src/components/SellerCountry/sellerCountry.js

@@ -1,71 +1,71 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import { func, shape, string } from 'prop-types';
-import { useSellerCountry } from '@riosst100/pwa-marketplace/src/talons/SellerCountry/useSellerCountry';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Field from '@magento/venia-ui/lib/components/Field';
-import Select from '@magento/venia-ui/lib/components/Select';
-import defaultClasses from './sellerCountry.module.css';
-import { GET_SELLER_COUNTRIES_QUERY } from './sellerCountry.gql';
-import { BrowserPersistence } from '@magento/peregrine/lib/util';
-
-const storage = new BrowserPersistence();
-
-const SellerCountry = props => {
-    const talonProps = useSellerCountry({
-        queries: {
-            getSellerCountriesQuery: GET_SELLER_COUNTRIES_QUERY
-        }
-    });
-    const { countries, loading } = talonProps;
-    const {
-        classes: propClasses,
-        field,
-        label,
-        translationId,
-        ...inputProps
-    } = props;
-    const { formatMessage } = useIntl();
-
-    const classes = useStyle(defaultClasses, propClasses);
-    const websiteCode = storage.getItem('website_code') || null;
-    const currentWebsiteCountry = websiteCode && websiteCode != "base" ? websiteCode.toUpperCase() : DEFAULT_COUNTRY_CODE;
-    const selectProps = {
-        classes,
-        disabled: loading,
-        field,
-        items: countries,
-        initialValue: currentWebsiteCountry,
-        ...inputProps
-    };
-
-    return (
-        <Field
-            id={classes.root}
-            label={formatMessage({ id: translationId, defaultMessage: label })}
-            classes={{ root: classes.root }}
-        >
-            <Select {...selectProps} id={classes.root} />
-        </Field>
-    );
-};
-
-export default SellerCountry;
-
-SellerCountry.defaultProps = {
-    field: 'country',
-    label: 'Country',
-    translationId: 'country.label'
-};
-
-SellerCountry.propTypes = {
-    classes: shape({
-        root: string
-    }),
-    field: string,
-    label: string,
-    translationId: string,
-    validate: func,
-    initialValue: string
-};
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { func, shape, string } from 'prop-types';
+import { useSellerCountry } from '@riosst100/pwa-marketplace/src/talons/SellerCountry/useSellerCountry';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Field from '@magento/venia-ui/lib/components/Field';
+import Select from '@magento/venia-ui/lib/components/Select';
+import defaultClasses from './sellerCountry.module.css';
+import { GET_SELLER_COUNTRIES_QUERY } from './sellerCountry.gql';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+const SellerCountry = props => {
+    const talonProps = useSellerCountry({
+        queries: {
+            getSellerCountriesQuery: GET_SELLER_COUNTRIES_QUERY
+        }
+    });
+    const { countries, loading } = talonProps;
+    const {
+        classes: propClasses,
+        field,
+        label,
+        translationId,
+        ...inputProps
+    } = props;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const websiteCode = storage.getItem('website_code') || null;
+    const currentWebsiteCountry = websiteCode && websiteCode != "base" ? websiteCode.toUpperCase() : DEFAULT_COUNTRY_CODE;
+    const selectProps = {
+        classes,
+        disabled: loading,
+        field,
+        items: countries,
+        initialValue: currentWebsiteCountry,
+        ...inputProps
+    };
+
+    return (
+        <Field
+            id={classes.root}
+            label={formatMessage({ id: translationId, defaultMessage: label })}
+            classes={{ root: classes.root }}
+        >
+            <Select {...selectProps} id={classes.root} />
+        </Field>
+    );
+};
+
+export default SellerCountry;
+
+SellerCountry.defaultProps = {
+    field: 'country',
+    label: 'Country',
+    translationId: 'country.label'
+};
+
+SellerCountry.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    field: string,
+    label: string,
+    translationId: string,
+    validate: func,
+    initialValue: string
+};

package/src/components/SellerCountry/sellerCountry.module.css

@@ -1,3 +1,3 @@
-.root {
-    grid-area: country;
-}
+.root {
+    grid-area: country;
+}

package/src/components/ShopByCategory/index.js

@@ -1,2 +1,2 @@
-export { default } from './shopByCategory';
-export { default as ShopByCategoryShimmer } from './shopByCategory.shimmer';
+export { default } from './shopByCategory';
+export { default as ShopByCategoryShimmer } from './shopByCategory.shimmer';

package/src/components/ShopByCategory/shopByCategory.js

@@ -1,69 +1,69 @@
-import React from 'react';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './shopByCategory.module.css';
-import { useShopByCategory } from '@riosst100/pwa-marketplace/src/talons/ShopByCategory';
-import { Link } from 'react-router-dom';
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-
-const ShopByCategory = props => {
-    const { categoryName, children, parent } = props;
-
-    const talonProps = useShopByCategory({ children, parent });
-
-    const {
-        childrenNormalizedData,
-        parentNormalizedData
-    } = talonProps;
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const childrenList = [];
-
-    childrenList.push(
-        <span><b>{categoryName}</b></span>
-    );
-
-    childrenNormalizedData ? childrenNormalizedData.map(({ text, path }) => {
-        childrenList.push(
-            <Link
-                to={resourceUrl(path)}
-            >
-                <div>{text}</div>
-            </Link>
-        )
-    }) : ''
-
-    const parentList = [];
-    parentNormalizedData ? parentNormalizedData.map(({ text, path }) => {
-        parentList.push(
-            <Link
-                to={resourceUrl(path)}
-            >
-                <div>{text}</div>
-            </Link>
-        )
-    }) : ''
-
-    return (
-        <aside
-            className={classes.root}
-            data-cy="ShopByCategory-root"
-            aria-busy="false"
-        >
-            <br />
-            <br />
-            {/* <div className={classes.body}> */}
-                {/* <ul> */}
-                    <li>
-                        <div><b>Shop By Category</b></div>
-                        {parentList}
-                        <ul className={classes.blocks}>{childrenList}</ul>
-                    </li>
-                {/* </ul> */}
-            {/* </div> */}
-        </aside>
-    );
-};
-
-export default ShopByCategory;
+import React from 'react';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './shopByCategory.module.css';
+import { useShopByCategory } from '@riosst100/pwa-marketplace/src/talons/ShopByCategory';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+const ShopByCategory = props => {
+    const { categoryName, children, parent } = props;
+
+    const talonProps = useShopByCategory({ children, parent });
+
+    const {
+        childrenNormalizedData,
+        parentNormalizedData
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const childrenList = [];
+
+    childrenList.push(
+        <span><b>{categoryName}</b></span>
+    );
+
+    childrenNormalizedData ? childrenNormalizedData.map(({ text, path }) => {
+        childrenList.push(
+            <Link
+                to={resourceUrl(path)}
+            >
+                <div>{text}</div>
+            </Link>
+        )
+    }) : ''
+
+    const parentList = [];
+    parentNormalizedData ? parentNormalizedData.map(({ text, path }) => {
+        parentList.push(
+            <Link
+                to={resourceUrl(path)}
+            >
+                <div>{text}</div>
+            </Link>
+        )
+    }) : ''
+
+    return (
+        <aside
+            className={classes.root}
+            data-cy="ShopByCategory-root"
+            aria-busy="false"
+        >
+            <br />
+            <br />
+            {/* <div className={classes.body}> */}
+                {/* <ul> */}
+                    <li>
+                        <div><b>Shop By Category</b></div>
+                        {parentList}
+                        <ul className={classes.blocks}>{childrenList}</ul>
+                    </li>
+                {/* </ul> */}
+            {/* </div> */}
+        </aside>
+    );
+};
+
+export default ShopByCategory;

package/src/components/ShopByCategory/shopByCategory.module.css

@@ -1,58 +1,58 @@
-.root {
-    composes: bg-white from global;
-    composes: bottom-0 from global;
-    composes: hidden from global;
-    composes: max-w-modal from global;
-    composes: w-full from global;
-    composes: z-foreground from global;
-    grid-template-rows: 1fr 7rem;
-
-    composes: lg_grid from global;
-}
-
-.body {
-    composes: overflow-auto from global;
-}
-
-.header {
-    composes: flex from global;
-    composes: justify-between from global;
-    composes: pb-0 from global;
-    composes: pt-5 from global;
-    composes: px-5 from global;
-}
-
-.headerTitle {
-    composes: flex from global;
-    composes: items-center from global;
-    composes: leading-none from global;
-    composes: text-lg from global;
-}
-
-.action {
-    composes: pb-0 from global;
-    composes: pt-xs from global;
-    composes: px-xs from global;
-}
-
-/* TODO @TW: cannot compose */
-.action button {
-    /* composes: text-base from global; */
-    font-size: 0.875rem;
-    /* composes: no-underline from global; */
-    text-decoration: none;
-}
-
-.blocks {
-    composes: pb-0 from global;
-    composes: pt-xs from global;
-    composes: px-xs from global;
-}
-
-/* TODO @TW: cannot compose */
-.blocks > li:last-child {
-    /* composes: border-b-2 from global; */
-    /* composes: border-solid from global; */
-    /* composes: border-subtle from global; */
-    border-bottom: 2px solid rgb(var(--venia-global-color-border));
-}
+.root {
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: hidden from global;
+    composes: max-w-modal from global;
+    composes: w-full from global;
+    composes: z-foreground from global;
+    grid-template-rows: 1fr 7rem;
+
+    composes: lg_grid from global;
+}
+
+.body {
+    composes: overflow-auto from global;
+}
+
+.header {
+    composes: flex from global;
+    composes: justify-between from global;
+    composes: pb-0 from global;
+    composes: pt-5 from global;
+    composes: px-5 from global;
+}
+
+.headerTitle {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: leading-none from global;
+    composes: text-lg from global;
+}
+
+.action {
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.action button {
+    /* composes: text-base from global; */
+    font-size: 0.875rem;
+    /* composes: no-underline from global; */
+    text-decoration: none;
+}
+
+.blocks {
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.blocks > li:last-child {
+    /* composes: border-b-2 from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
+    border-bottom: 2px solid rgb(var(--venia-global-color-border));
+}

package/src/components/ShopByCategory/shopByCategory.shimmer.js

@@ -1,24 +1,24 @@
-import React from 'react';
-import { shape, string } from 'prop-types';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-
-import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
-import defaultClasses from './shopByCategory.module.css';
-
-const ShopByCategory = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-
-    return (
-        <aside className={classes.root} aria-live="polite" aria-busy="true">
-            <Shimmer width="95%" height="70vh" style={{ marginBottom: 25 }} />
-        </aside>
-    );
-};
-
-ShopByCategory.propTypes = {
-    classes: shape({
-        root: string
-    })
-};
-
-export default ShopByCategory;
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './shopByCategory.module.css';
+
+const ShopByCategory = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <aside className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width="95%" height="70vh" style={{ marginBottom: 25 }} />
+        </aside>
+    );
+};
+
+ShopByCategory.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default ShopByCategory;

package/src/components/SubCategory/subCategory.js

@@ -16,7 +16,7 @@ const SubCategory = props => {
         normalizedData
     } = talonProps;
 
-    const maxSubCategory = 7;
+    const maxSubCategory = 8;
     
     const subCategory = [];
     

package/src/components/WebsiteSwitcher/websiteSwitcher.shimmer.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
-
-export default () => {
-    return <Shimmer width={6} height={2.25} />;
-};
+import React from 'react';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+
+export default () => {
+    return <Shimmer width={6} height={2.25} />;
+};

package/src/components/WebsiteSwitcher/websiteSwitcherItem.js

@@ -1,47 +1,47 @@
-import React, { useCallback } from 'react';
-import { Check } from 'react-feather';
-import { bool, func, shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon/icon';
-import defaultClasses from './websiteSwitcherItem.module.css';
-
-const WebsiteSwitcherItem = props => {
-    const { active, onClick, option, option2, children } = props;
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const handleClick = useCallback(() => {
-        onClick(option, option2);
-    }, [option, option2, onClick]);
-
-    const activeIcon = active ? (
-        <Icon data-cy="WebsiteSwitcherItem-activeIcon" size={20} src={Check} />
-    ) : null;
-
-    return (
-        <button
-            data-cy="WebsiteSwitcherItem-button"
-            className={classes.root}
-            disabled={active}
-            onClick={handleClick}
-        >
-            <span className={classes.content}>
-                <span className={classes.text}>{children}</span>
-                {activeIcon}
-            </span>
-        </button>
-    );
-};
-
-WebsiteSwitcherItem.propTypes = {
-    active: bool,
-    classes: shape({
-        content: string,
-        root: string,
-        text: string
-    }),
-    onClick: func,
-    option: string
-};
-
-export default WebsiteSwitcherItem;
+import React, { useCallback } from 'react';
+import { Check } from 'react-feather';
+import { bool, func, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon/icon';
+import defaultClasses from './websiteSwitcherItem.module.css';
+
+const WebsiteSwitcherItem = props => {
+    const { active, onClick, option, option2, children } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleClick = useCallback(() => {
+        onClick(option, option2);
+    }, [option, option2, onClick]);
+
+    const activeIcon = active ? (
+        <Icon data-cy="WebsiteSwitcherItem-activeIcon" size={20} src={Check} />
+    ) : null;
+
+    return (
+        <button
+            data-cy="WebsiteSwitcherItem-button"
+            className={classes.root}
+            disabled={active}
+            onClick={handleClick}
+        >
+            <span className={classes.content}>
+                <span className={classes.text}>{children}</span>
+                {activeIcon}
+            </span>
+        </button>
+    );
+};
+
+WebsiteSwitcherItem.propTypes = {
+    active: bool,
+    classes: shape({
+        content: string,
+        root: string,
+        text: string
+    }),
+    onClick: func,
+    option: string
+};
+
+export default WebsiteSwitcherItem;

package/src/components/WebsiteSwitcher/websiteSwitcherItem.module.css

@@ -1,20 +1,20 @@
-.root {
-    composes: flex from global;
-    composes: items-center from global;
-    composes: w-full from global;
-}
-
-.content {
-    composes: gap-3 from global;
-    composes: grid from global;
-    composes: grid-cols-[1fr] from global;
-    composes: grid-flow-col from global;
-    composes: items-center from global;
-    composes: px-xs from global;
-    composes: py-2xs from global;
-    composes: w-full from global;
-}
-
-.text {
-    composes: text-left from global;
-}
+.root {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: w-full from global;
+}
+
+.content {
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-cols-[1fr] from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+    composes: w-full from global;
+}
+
+.text {
+    composes: text-left from global;
+}