@riosst100/pwa-marketplace 1.2.5 → 1.2.7

package/src/components/SellerVerificationPage/sellerVerificationPage.js

@@ -1,43 +1,43 @@
-import React from 'react';
-import { shape, string } from 'prop-types';
-import { FormattedMessage, useIntl } from 'react-intl';
-
-import { useBecomeSellerPage } from '@riosst100/pwa-marketplace/src/talons/BecomeSellerPage/useBecomeSellerPage';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import BecomeSeller from '@riosst100/pwa-marketplace/src/components/BecomeSeller';
-import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
-import defaultClasses from './sellerVerificationPage.module.css';
-
-const BecomeSellerPage = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-    const { sellerVerificationProps } = useBecomeSellerPage(props);
-    const { formatMessage } = useIntl();
-
-    return (
-        <div className={classes.root}>
-            <StoreTitle>
-                {formatMessage({
-                    id: 'sellerVerificationPage.title',
-                    defaultMessage: 'Become a Seller'
-                })}
-            </StoreTitle>
-            <div className={classes.contentContainer}>
-                <BecomeSeller {...sellerVerificationProps} />
-            </div>
-        </div>
-    );
-}
-
-export default BecomeSellerPage;
-
-BecomeSellerPage.defaultProps = {
-    signedInRedirectUrl: '/seller-verification',
-    signInPageUrl: '/become-seller'
-};
-
-BecomeSellerPage.propTypes = {
-    classes: shape({
-        root: string
-    }),
-    signedInRedirectUrl: string
-};
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useBecomeSellerPage } from '@riosst100/pwa-marketplace/src/talons/BecomeSellerPage/useBecomeSellerPage';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import BecomeSeller from '@riosst100/pwa-marketplace/src/components/BecomeSeller';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import defaultClasses from './sellerVerificationPage.module.css';
+
+const BecomeSellerPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { sellerVerificationProps } = useBecomeSellerPage(props);
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={classes.root}>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'sellerVerificationPage.title',
+                    defaultMessage: 'Become a Seller'
+                })}
+            </StoreTitle>
+            <div className={classes.contentContainer}>
+                <BecomeSeller {...sellerVerificationProps} />
+            </div>
+        </div>
+    );
+}
+
+export default BecomeSellerPage;
+
+BecomeSellerPage.defaultProps = {
+    signedInRedirectUrl: '/seller-verification',
+    signInPageUrl: '/become-seller'
+};
+
+BecomeSellerPage.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    signedInRedirectUrl: string
+};

package/src/components/SellerVerificationPage/sellerVerificationPage.module.css

@@ -1,21 +1,21 @@
-.root {
-    composes: gap-y-md from global;
-    composes: grid from global;
-    composes: justify-center from global;
-    composes: px-0 from global;
-    composes: py-md from global;
-    composes: text-center from global;
-    grid-template-columns: minmax(auto, 512px);
-}
-
-.header {
-    composes: font-serif from global;
-}
-
-.contentContainer {
-    composes: lg_border-2 from global;
-    composes: lg_border-solid from global;
-    composes: lg_border-subtle from global;
-    composes: lg_pb-md from global;
-    composes: lg_rounded-md from global;
-}
+.root {
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: justify-center from global;
+    composes: px-0 from global;
+    composes: py-md from global;
+    composes: text-center from global;
+    grid-template-columns: minmax(auto, 512px);
+}
+
+.header {
+    composes: font-serif from global;
+}
+
+.contentContainer {
+    composes: lg_border-2 from global;
+    composes: lg_border-solid from global;
+    composes: lg_border-subtle from global;
+    composes: lg_pb-md from global;
+    composes: lg_rounded-md from global;
+}

package/src/components/SortBy/index.js

@@ -1,25 +1,25 @@
-import React from 'react';
-import { ArrowDown2, Filter } from 'iconsax-react';
-
-const Sort = () => {
-    return (
-        <>
-            <div className='x-container xs_flex xs_justify-between xs_w-full xl_w-fit'>
-                <div class="xs_flex xl_hidden flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
-                    <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
-                        <Filter color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
-                        <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Filter</div>
-                    </div>
-                </div>
-                <div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
-                    <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
-                        <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
-                        <ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
-
+import React from 'react';
+import { ArrowDown2, Filter } from 'iconsax-react';
+
+const Sort = () => {
+    return (
+        <>
+            <div className='x-container xs_flex xs_justify-between xs_w-full xl_w-fit'>
+                <div class="xs_flex xl_hidden flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
+                    <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
+                        <Filter color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
+                        <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Filter</div>
+                    </div>
+                </div>
+                <div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
+                    <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
+                        <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
+                        <ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
 export default Sort;

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,65 +1,65 @@
-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}
-        </>
-    )
-}
-
+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';
  */