@riosst100/pwa-marketplace 1.0.0 → 1.0.2

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

@@ -0,0 +1,111 @@
+.root {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-start from global;
+    composes: max-w-site from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+    composes: relative from global;
+
+    composes: sm_justify-items-end from global;
+}
+
+.trigger {
+    composes: max-w-[15rem] from global;
+    composes: overflow-ellipsis from global;
+    composes: overflow-hidden from global;
+    composes: whitespace-nowrap from global;
+
+    composes: sm_max-w-full from global;
+}
+
+.menu {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: bottom-md from global;
+    composes: left-xs from global;
+    composes: max-w-[90vw] from global;
+    composes: opacity-0 from global;
+    composes: pb-2xs from global;
+    composes: pt-2xs from global;
+    composes: right-auto from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: top-auto from global;
+    composes: w-max from global;
+    composes: z-menu from global;
+    transform: translate3d(0, -8px, 0);
+    transition-duration: 192ms;
+    transition-timing-function: var(--venia-global-anim-out);
+    transition-property: opacity, transform, visibility;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+
+    composes: sm_bottom-auto from global;
+    composes: sm_left-auto from global;
+    composes: sm_right-xs from global;
+    composes: sm_top-md from global;
+}
+
+.menu_open {
+    composes: menu;
+
+    composes: opacity-100 from global;
+    transform: translate3d(0, 4px, 0);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+}
+
+.menuItem {
+    composes: hover_bg-subtle from global;
+}
+
+.groups {
+    composes: max-h-[24rem] from global;
+    composes: overflow-auto from global;
+}
+
+.groupList {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: pb-2xs from global;
+    composes: pt-2xs from global;
+
+    composes: last_border-none from global;
+}
+
+/*
+ * Mobile-specific styles.
+ */
+
+@media (max-width: 639px) {
+    .root:only-child {
+        grid-column: 2;
+    }
+
+    /* TODO @TW: cannot compose */
+    .root:last-child .menu {
+        right: 1rem;
+        left: auto;
+    }
+
+    .menu {
+        transform: translate3d(0, 8px, 0);
+    }
+
+    .menu_open {
+        transform: translate3d(0, -4px, 0);
+    }
+}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +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;

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

@@ -0,0 +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;
+}

package/src/intercept.js

@@ -3,30 +3,24 @@ const moduleOverridePlugin = require('./moduleOverrideWebpackPlugin');
 const { DefinePlugin } = require('webpack');
 const { getAvailableWebsitesConfigData } = require('./Utilities/graphQL');
 
-/**
- * Custom intercept file for the extension
- * By default you can only use target of @magento/pwa-buildpack.
- *
- * If do want extend @magento/peregrine or @magento/venia-ui
- * you should add them to peerDependencies to your package.json
- *
- * If you want to add overwrites for @magento/venia-ui components you can use
- * moduleOverrideWebpackPlugin and componentOverrideMapping
- */
-module.exports = async targets => {
+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(flags => {
-      /**
-       *  Wee need to activated esModules and cssModules to allow build pack to load our extension
-       * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
-       */
-      flags[targets.name] = { esModules: true, cssModules: true, graphqlQueries: true };
+    flags[targets.name] = { esModules: true, cssModules: true, graphqlQueries: true };
   });
 
   targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
-      new moduleOverridePlugin(componentOverrideMapping).apply(compiler);
+    new moduleOverridePlugin(componentOverrideMapping).apply(compiler);
   });
 
-  targets.of('@magento/pwa-buildpack').envVarDefinitions.tap((defs) => {
+  targets.of('@magento/pwa-buildpack').envVarDefinitions.tap(defs => {
     defs.sections.push({
       name: "Default Website Code",
       variables: [
@@ -39,12 +33,31 @@ module.exports = async targets => {
     });
   });
 
-  const availableWebsites = await getAvailableWebsitesConfigData();
+  // Define the routes using the results of the asynchronous operation
+  const routes = [
+    {
+      name: "BecomeSellerRoute",
+      pattern: "/become-seller",
+      path: require.resolve("./components/BecomeSellerPage/index.js"),
+    },
+    // Add other routes as needed
+  ];
 
+  // 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);
   });
+
+  targets.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
+    flags[targets.name] = { esModules: true, cssModules: true, graphqlQueries: true };
+  });
+
+  // Handle the routes directly within the routes tap
+  targets.of("@magento/venia-ui").routes.tap(routesArray => {
+    routesArray.push(...routes);
+    return routesArray;
+  });
 };

package/src/overwrites/venia-ui/lib/components/Adapter/adapter.js

@@ -5,7 +5,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { useAdapter } from '@magento/peregrine/lib/talons/Adapter/useAdapter';
 import App, { AppContextProvider } from '@magento/venia-ui/lib/components/App';
 import StoreCodeRoute from '@magento/venia-ui/lib/components/StoreCodeRoute';
-import { useWebsiteByIp } from '@riosst100/pwa-multi-website/src/talons/WebsiteByIp/useWebsiteByIp';
+import { useWebsiteByIp } from '@riosst100/pwa-marketplace/src/talons/WebsiteByIp/useWebsiteByIp';
 import { BrowserPersistence } from '@magento/peregrine/lib/util';
 
 const storage = new BrowserPersistence();

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -14,8 +14,9 @@ import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from '@magento/venia-ui/lib/components/Header/header.module.css';
 import StoreSwitcher from '@magento/venia-ui/lib/components/Header/storeSwitcher';
-import WebsiteSwitcher from '@riosst100/pwa-multi-website/src/components/Header/websiteSwitcher';
+import WebsiteSwitcher from '@riosst100/pwa-marketplace/src/components/WebsiteSwitcher/websiteSwitcher';
 import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
+import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/BecomeSellerLink/becomeSellerLink';
 import MegaMenu from '@magento/venia-ui/lib/components/MegaMenu';
 import PageLoadingIndicator from '@magento/venia-ui/lib/components/PageLoadingIndicator';
 import { useIntl } from 'react-intl';
@@ -60,6 +61,7 @@ const Header = props => {
         <Fragment>
             <div className={classes.switchersContainer}>
                 <div className={classes.switchers} data-cy="Header-switchers">
+                    <BecomeSellerLink />
                     <WebsiteSwitcher />
                     <StoreSwitcher />
                     <CurrencySwitcher />

package/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.js

@@ -84,13 +84,13 @@ const StoreSwitcher = props => {
             <button
                 data-cy="StoreSwitcher-triggerButton"
                 className={classes.trigger}
-                aria-label={currentStoreName || ''}
+                aria-label={currentStoreName}
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
                 data-cy="StoreSwitcher-trigger"
                 aria-expanded={storeMenuIsOpen}
             >
-                {triggerLabel}
+                {triggerLabel || ''}
             </button>
             <div
                 ref={storeMenuRef}

package/src/talons/BecomeSeller/becomeSeller.gql.js

@@ -0,0 +1,136 @@
+import { gql } from '@apollo/client';
+import { CheckoutPageFragment } from '@magento/peregrine/lib/talons/CheckoutPage/checkoutPageFragments.gql';
+
+export const CREATE_ACCOUNT = gql`
+    mutation BecomeSeller(
+        $email: String!
+        $firstname: String!
+        $lastname: String!
+        $password: String!
+        $is_subscribed: Boolean!
+    ) {
+        createCustomer(
+            input: {
+                email: $email
+                firstname: $firstname
+                lastname: $lastname
+                password: $password
+                is_subscribed: $is_subscribed
+            }
+        ) {
+            # The createCustomer mutation returns a non-nullable CustomerOutput type
+            # which requires that at least one of the sub fields be returned.
+
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            customer {
+                email
+            }
+        }
+    }
+`;
+
+export const GET_CUSTOMER = gql`
+    query GetCustomerAfterCreate {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        customer {
+            email
+            firstname
+            lastname
+            is_subscribed
+        }
+    }
+`;
+
+export const SIGN_IN = gql`
+    mutation SignInAfterCreate($email: String!, $password: String!) {
+        generateCustomerToken(email: $email, password: $password) {
+            token
+        }
+    }
+`;
+
+export const CREATE_CART = gql`
+    mutation CreateCartAfterAccountCreation {
+        cartId: createEmptyCart
+    }
+`;
+
+export const GET_CART_DETAILS = gql`
+    query GetCartDetailsAfterAccountCreation($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                prices {
+                    price {
+                        value
+                    }
+                }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                product {
+                    uid
+                    name
+                    sku
+                    small_image {
+                        url
+                        label
+                    }
+                    price {
+                        regularPrice {
+                            amount {
+                                value
+                            }
+                        }
+                    }
+                }
+                quantity
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                ... on ConfigurableCartItem {
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                    configurable_options {
+                        configurable_product_option_uid
+                        option_label
+                        configurable_product_option_value_uid
+                        value_label
+                    }
+                }
+            }
+            prices {
+                grand_total {
+                    value
+                    currency
+                }
+            }
+        }
+    }
+`;
+
+export const MERGE_CARTS = gql`
+    mutation MergeCartsAfterAccountCreation(
+        $sourceCartId: String!
+        $destinationCartId: String!
+    ) {
+        mergeCarts(
+            source_cart_id: $sourceCartId
+            destination_cart_id: $destinationCartId
+        ) {
+            id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+            }
+            ...CheckoutPageFragment
+        }
+    }
+    ${CheckoutPageFragment}
+`;
+
+export default {
+    becomeSellerMutation: CREATE_ACCOUNT,
+    createCartMutation: CREATE_CART,
+    getCartDetailsQuery: GET_CART_DETAILS,
+    getCustomerQuery: GET_CUSTOMER,
+    mergeCartsMutation: MERGE_CARTS,
+    signInMutation: SIGN_IN
+};