@riosst100/pwa-marketplace 1.0.1 → 1.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/BecomeSeller/becomeSeller.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Form } from 'informed';
 import { func, shape, string, bool } from 'prop-types';
-import { useBecomeSeller } from '@riosst100/pwa-seller-registration/src/talons/BecomeSeller/useBecomeSeller';
+import { useBecomeSeller } from '@riosst100/pwa-marketplace/src/talons/BecomeSeller/useBecomeSeller';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import combine from '@magento/venia-ui/lib/util/combineValidators';
@@ -68,7 +68,7 @@ const BecomeSeller = props => {
         >
             <FormattedMessage
                 id={'becomeSeller.becomeSellerText'}
-                defaultMessage={'Create an Account'}
+                defaultMessage={'Become a Seller'}
             />
         </Button>
     );
@@ -83,7 +83,7 @@ const BecomeSeller = props => {
             <h2 data-cy="BecomeSeller-title" className={classes.title}>
                 <FormattedMessage
                     id={'becomeSeller.becomeSellerText'}
-                    defaultMessage={'Create an Account'}
+                    defaultMessage={'Become a Seller'}
                 />
             </h2>
             <FormError errors={Array.from(errors.values())} />

package/src/components/BecomeSeller/becomeSeller.module.css

@@ -31,11 +31,11 @@
 }
 
 .cancelButton {
-    composes: root_lowPriority from '../Button/button.module.css';
+    composes: root_lowPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
 }
 
 .submitButton {
-    composes: root_highPriority from '../Button/button.module.css';
+    composes: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
 
     composes: col-start-auto from global;
 

package/src/components/BecomeSellerLink/becomeSellerLink.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './becomeSellerLink.module.css';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { Link } from 'react-router-dom';
+import { shape, string } from 'prop-types';
+
+const BecomeSellerLink = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const becomeSellerLabel = "Become a Seller";
+
+    return (
+        <div className={classes.root} data-cy="BecomeSellerLink-root">
+            <Link
+                aria-label={becomeSellerLabel}
+                to={resourceUrl('/become-seller')}
+            >{becomeSellerLabel}</Link>
+        </div>
+    );
+};
+
+export default BecomeSellerLink;
+
+BecomeSellerLink.propTypes = {
+    classes: shape({
+        root: string
+    })
+};

package/src/components/BecomeSellerLink/becomeSellerLink.module.css

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

package/src/components/BecomeSellerPage/becomeSellerPage.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { shape, string } from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import { useBecomeSellerPage } from '@riosst100/pwa-seller-registration/src/talons/BecomeSellerPage/useBecomeSellerPage';
+import { useBecomeSellerPage } from '@riosst100/pwa-marketplace/src/talons/BecomeSellerPage/useBecomeSellerPage';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import BecomeSeller from '@riosst100/pwa-seller-registration/lib/components/BecomeSeller';
+import BecomeSeller from '@riosst100/pwa-marketplace/src/components/BecomeSeller';
 import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import defaultClasses from './becomeSellerPage.module.css';
 
 const BecomeSellerPage = props => {
     const classes = useStyle(defaultClasses, props.classes);

package/src/components/BecomeSellerPage/becomeSellerPage.module.css

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

package/src/components/WebsiteSwitcher/websiteSwitcher.js

@@ -0,0 +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(({ storeGroupName, 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}`;
+
+    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/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,32 +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/venia-ui").routes.tap(routes => {
-  //   routes.push({
-  //     name: "Become Seller",
-  //     pattern: "/become-seller",
-  //     path: require.resolve("../components/BecomeSeller/index.js")
-  //   });
-  //   return routes;
-  // });
-};
 
-module.exports = (targets) => {
-  targets.of("@magento/venia-ui").routes.tap((routes) => {
-    routes.push({
-      name: "BecomeSellerRoute",
-      pattern: "/become-seller",
-      path: require.resolve("./components/BecomeSellerPage/index.js"),
-    });
-    return routes;
+  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/Header/header.js

@@ -14,9 +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-marketplace/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/Header/becomeSellerLink';
+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';

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
+};

package/src/talons/BecomeSeller/useBecomeSeller.js

@@ -0,0 +1,288 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useApolloClient, useMutation } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import { retrieveCartId } from '@magento/peregrine/lib/store/actions/cart';
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+
+import DEFAULT_OPERATIONS from './becomeSeller.gql';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+/**
+ * Returns props necessary to render BecomeSeller component. In particular this
+ * talon handles the submission flow by first doing a pre-submisson validation
+ * and then, on success, invokes the `onSubmit` prop, which is usually the action.
+ *
+ * @param {BecomeSellerQueries} props.queries queries used by the talon
+ * @param {BecomeSellerMutations} props.mutations mutations used by the talon
+ * @param {InitialValues} props.initialValues initial values to sanitize and seed the form
+ * @param {Function} props.onSubmit the post submit callback
+ * @param {Function} props.onCancel the cancel callback
+ *
+ * @returns {BecomeSellerProps}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import { useForgotPassword } from '@magento/peregrine/lib/talons/BecomeSeller/useBecomeSeller.js';
+ */
+export const useBecomeSeller = props => {
+    const { initialValues = {}, onSubmit, onCancel } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const {
+        becomeSellerMutation,
+        createCartMutation,
+        getCartDetailsQuery,
+        getCustomerQuery,
+        mergeCartsMutation,
+        signInMutation
+    } = operations;
+    const apolloClient = useApolloClient();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [
+        { cartId },
+        { createCart, removeCart, getCartDetails }
+    ] = useCartContext();
+    const [
+        { isGettingDetails },
+        { getUserDetails, setToken }
+    ] = useUserContext();
+
+    const [, { dispatch }] = useEventingContext();
+
+    const [fetchCartId] = useMutation(createCartMutation);
+
+    const [mergeCarts] = useMutation(mergeCartsMutation);
+
+    // For create account and sign in mutations, we don't want to cache any
+    // personally identifiable information (PII). So we set fetchPolicy to 'no-cache'.
+    const [becomeSeller, { error: becomeSellerError }] = useMutation(
+        becomeSellerMutation,
+        {
+            fetchPolicy: 'no-cache'
+        }
+    );
+
+    const [signIn, { error: signInError }] = useMutation(signInMutation, {
+        fetchPolicy: 'no-cache'
+    });
+
+    const fetchUserDetails = useAwaitQuery(getCustomerQuery);
+    const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
+
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_CREATE',
+        formAction: 'becomeSeller'
+    });
+
+    const handleCancel = useCallback(() => {
+        onCancel();
+    }, [onCancel]);
+
+    const handleCancelKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleCancel();
+            }
+        };
+    }, [handleCancel]);
+
+    const handleSubmit = useCallback(
+        async formValues => {
+            setIsSubmitting(true);
+            try {
+                // Get source cart id (guest cart id).
+                const sourceCartId = cartId;
+
+                // Get reCaptchaV3 Data for becomeSeller mutation
+                const recaptchaDataForBecomeSeller = await generateReCaptchaData();
+
+                // Create the account and then sign in.
+                await becomeSeller({
+                    variables: {
+                        email: formValues.customer.email,
+                        firstname: formValues.customer.firstname,
+                        lastname: formValues.customer.lastname,
+                        password: formValues.password,
+                        is_subscribed: !!formValues.subscribe
+                    },
+                    ...recaptchaDataForBecomeSeller
+                });
+
+                dispatch({
+                    type: 'USER_CREATE_ACCOUNT',
+                    payload: {
+                        email: formValues.customer.email,
+                        firstName: formValues.customer.firstname,
+                        lastName: formValues.customer.lastname,
+                        isSubscribed: !!formValues.subscribe
+                    }
+                });
+
+                // Get reCaptchaV3 Data for signIn mutation
+                const recaptchaDataForSignIn = await generateReCaptchaData();
+
+                const signInResponse = await signIn({
+                    variables: {
+                        email: formValues.customer.email,
+                        password: formValues.password
+                    },
+                    ...recaptchaDataForSignIn
+                });
+                const token = signInResponse.data.generateCustomerToken.token;
+                await setToken(token);
+
+                // Clear all cart/customer data from cache and redux.
+                await apolloClient.clearCacheData(apolloClient, 'cart');
+                await apolloClient.clearCacheData(apolloClient, 'customer');
+                await removeCart();
+
+                // Create and get the customer's cart id.
+                await createCart({
+                    fetchCartId
+                });
+                const destinationCartId = await retrieveCartId();
+
+                // Merge the guest cart into the customer cart.
+                await mergeCarts({
+                    variables: {
+                        destinationCartId,
+                        sourceCartId
+                    }
+                });
+
+                // Ensure old stores are updated with any new data.
+                await getUserDetails({ fetchUserDetails });
+                await getCartDetails({
+                    fetchCartId,
+                    fetchCartDetails
+                });
+
+                // Finally, invoke the post-submission callback.
+                if (onSubmit) {
+                    onSubmit();
+                }
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+                setIsSubmitting(false);
+            }
+        },
+
+        [
+            cartId,
+            generateReCaptchaData,
+            becomeSeller,
+            signIn,
+            setToken,
+            apolloClient,
+            removeCart,
+            createCart,
+            fetchCartId,
+            mergeCarts,
+            getUserDetails,
+            fetchUserDetails,
+            getCartDetails,
+            fetchCartDetails,
+            onSubmit,
+            dispatch
+        ]
+    );
+
+    const sanitizedInitialValues = useMemo(() => {
+        const { email, firstName, lastName, ...rest } = initialValues;
+
+        return {
+            customer: { email, firstname: firstName, lastname: lastName },
+            ...rest
+        };
+    }, [initialValues]);
+
+    const errors = useMemo(
+        () =>
+            new Map([
+                ['becomeSellerQuery', becomeSellerError],
+                ['signInMutation', signInError]
+            ]),
+        [becomeSellerError, signInError]
+    );
+
+    return {
+        errors,
+        handleCancel,
+        handleSubmit,
+        handleCancelKeyPress,
+        initialValues: sanitizedInitialValues,
+        isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
+        recaptchaWidgetProps
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * GraphQL queries for the create account form.
+ * This is a type used by the {@link useBecomeSeller} talon.
+ *
+ * @typedef {Object} BecomeSellerQueries
+ *
+ * @property {GraphQLAST} customerQuery query to fetch customer details
+ * @property {GraphQLAST} getCartDetailsQuery query to get cart details
+ */
+
+/**
+ * GraphQL mutations for the create account form.
+ * This is a type used by the {@link useBecomeSeller} talon.
+ *
+ * @typedef {Object} BecomeSellerMutations
+ *
+ * @property {GraphQLAST} becomeSellerMutation mutation for creating new account
+ * @property {GraphQLAST} createCartMutation mutation for creating new cart
+ * @property {GraphQLAST} mergeCartsMutation mutation for merging carts
+ * @property {GraphQLAST} signInMutation mutation for signing
+ */
+
+/**
+ * Initial values for the create account form.
+ * This is a type used by the {@link useBecomeSeller} talon.
+ *
+ * @typedef {Object} InitialValues
+ *
+ * @property {String} email email id of the user
+ * @property {String} firstName first name of the user
+ * @property {String} lastName last name of the user
+ */
+
+/**
+ * Sanitized initial values for the create account form.
+ * This is a type used by the {@link useBecomeSeller} talon.
+ *
+ * @typedef {Object} SanitizedInitialValues
+ *
+ * @property {String} email email id of the user
+ * @property {String} firstname first name of the user
+ * @property {String} lastname last name of the user
+ */
+
+/**
+ * Object type returned by the {@link useBecomeSeller} talon.
+ * It provides props data to use when rendering the create account form component.
+ *
+ * @typedef {Object} BecomeSellerProps
+ *
+ * @property {Map} errors a map of errors to their respective mutations
+ * @property {Function} handleCancel callback function to handle form cancellations
+ * @property {Function} handleSubmit callback function to handle form submission
+ * @property {SanitizedInitialValues} initialValues initial values for the create account form
+ * @property {Boolean} isDisabled true if either details are being fetched or form is being submitted. False otherwise.
+ * @property {Object} recaptchaWidgetProps - Props for the GoogleReCaptcha component.
+ * @property {Function} recaptchaWidgetProps.containerElement - Container reference callback.
+ * @property {Boolean} recaptchaWidgetProps.shouldRender - Checks if component should be rendered.
+ */

package/src/talons/BecomeSellerLink/useBecomeSellerLink.js

@@ -0,0 +1,13 @@
+import { useCallback, useMemo } from 'react';
+
+export const useWebsiteSwitcher = (props = {}) => {
+    const handleTriggerClick = useCallback(() => {
+        // Toggle Stores Menu.
+        // setStoreMenuIsOpen(isOpen => !isOpen);
+        // globalThis.location.assign(`${newPath || ''}`);
+    }, []);
+
+    return {
+        handleTriggerClick
+    };
+};

package/src/talons/BecomeSellerPage/useBecomeSellerPage.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+const validBecomeSellerParams = ['email', 'firstName', 'lastName'];
+
+const getBecomeSellerInitialValues = search => {
+    const params = new URLSearchParams(search);
+
+    return validBecomeSellerParams.reduce(
+        (values, param) => ({ ...values, [param]: params.get(param) }),
+        {}
+    );
+};
+
+/**
+ * @typedef {function} useBecomeSellerPage
+ *
+ * @param {String} props.signedInRedirectUrl - Url to push when user is signed in
+ * @param {String} props.signInPageUrl - Sign In Page url
+ *
+ * @returns {{
+ *   becomeSellerProps: object
+ * }}
+ */
+export const useBecomeSellerPage = props => {
+    const { signedInRedirectUrl, signInPageUrl } = props;
+    const history = useHistory();
+    const [{ isSignedIn }] = useUserContext();
+    const { search } = useLocation();
+
+    // Keep location state in memory when pushing history and redirect to
+    // the `from` url instead when creating an account
+    const historyState = useMemo(() => {
+        return history && history.location.state ? history.location.state : {};
+    }, [history]);
+    const fromRedirectUrl = historyState.from || null;
+
+    // Redirect if user is signed in
+    useEffect(() => {
+        if (isSignedIn) {
+            if (fromRedirectUrl || signedInRedirectUrl) {
+                history.push(fromRedirectUrl || signedInRedirectUrl);
+            }
+        }
+    }, [fromRedirectUrl, history, isSignedIn, signedInRedirectUrl]);
+
+    const handleOnCancel = useCallback(() => {
+        if (signInPageUrl) {
+            history.push(signInPageUrl, historyState);
+        }
+    }, [history, historyState, signInPageUrl]);
+
+    const initialValues = useMemo(() => getBecomeSellerInitialValues(search), [
+        search
+    ]);
+
+    const becomeSellerProps = {
+        initialValues,
+        isCancelButtonHidden: false,
+        onCancel: handleOnCancel
+    };
+
+    return {
+        becomeSellerProps
+    };
+};

package/src/talons/WebsiteSwitcher/useWebsiteSwitcher.js

@@ -0,0 +1,218 @@
+import { useQuery } from '@apollo/client';
+import { useCallback, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './websiteSwitcher.gql';
+
+const storage = new BrowserPersistence();
+
+const mapAvailableOptions = (config, stores) => {
+    const { store_code: configCode } = config;
+
+    return stores.reduce((map, store) => {
+        const {
+            default_display_currency_code: currency,
+            locale,
+            secure_base_media_url,
+            store_code: storeCode,
+            store_group_code: storeGroupCode,
+            store_group_name: storeGroupName,
+            website_name: websiteName,
+            website_code: websiteCode,
+            store_sort_order: sortOrder
+        } = store;
+
+        const isCurrent = storeCode === configCode;
+        const option = {
+            currency,
+            isCurrent,
+            locale,
+            secure_base_media_url,
+            sortOrder,
+            storeCode,
+            storeGroupCode,
+            storeGroupName,
+            websiteName,
+            websiteCode
+        };
+
+        return map.set(storeCode, option);
+    }, new Map());
+};
+
+/**
+ * The useWebsiteSwitcher talon complements the WebsiteSwitcher component.
+ *
+ * @param {Array<Object>} [props.availableRoutes] - Hardcoded app routes.
+ * @param {Object} [props.operations] - GraphQL operations to be run by the hook.
+ *
+ * @returns {Map}    talonProps.availableStores - Details about the available store views.
+ * @returns {String}    talonProps.currentWebsiteName - Name of the current store view.
+ * @returns {Boolean}   talonProps.storeMenuIsOpen - Whether the menu that this trigger toggles is open or not.
+ * @returns {Ref}       talonProps.storeMenuRef - A React ref to the menu that this trigger toggles.
+ * @returns {Ref}       talonProps.storeMenuTriggerRef - A React ref to the trigger element itself.
+ * @returns {Function}  talonProps.handleTriggerClick - A function for handling when the trigger is clicked.
+ * @returns {Function}  talonProps.handleSwitchWebsite - A function for handling when the menu item is clicked.
+ */
+
+export const useWebsiteSwitcher = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { availableRoutes = [] } = props;
+    const internalRoutes = useMemo(() => {
+        return availableRoutes.map(path => {
+            if (path.exact) {
+                return path.pattern;
+            }
+        });
+    }, [availableRoutes]);
+
+    const {
+        getStoreConfigData,
+        getRouteData,
+        getAvailableWebsitesData
+    } = operations;
+    const { pathname, search: searchParams } = useLocation();
+    const {
+        elementRef: storeMenuRef,
+        expanded: storeMenuIsOpen,
+        setExpanded: setStoreMenuIsOpen,
+        triggerRef: storeMenuTriggerRef
+    } = useDropdown();
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const fetchRouteData = useAwaitQuery(getRouteData);
+
+    const { data: availableStoresData } = useQuery(getAvailableWebsitesData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const currentWebsiteName = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.website_name;
+        }
+    }, [storeConfigData]);
+
+    const currentGroupName = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.store_group_name;
+        }
+    }, [storeConfigData]);
+
+    // availableStores => mapped options or empty map if undefined.
+    const availableStores = useMemo(() => {
+        return (
+            (storeConfigData &&
+                availableStoresData &&
+                mapAvailableOptions(
+                    storeConfigData.storeConfig,
+                    availableStoresData.availableStoresByUserIp
+                )) ||
+            new Map()
+        );
+    }, [storeConfigData, availableStoresData]);
+
+    // Create a map of sorted store views for each group.
+    const storeGroups = useMemo(() => {
+        const groups = new Map();
+
+        availableStores.forEach(store => {
+            const groupCode = store.storeGroupCode;
+            if (!groups.has(groupCode)) {
+                const groupViews = [store];
+                groups.set(groupCode, groupViews);
+            } else {
+                const groupViews = groups.get(groupCode);
+                // Insert store at configured position
+                groupViews.splice(store.sortOrder, 0, store);
+            }
+        });
+
+        return groups;
+    }, [availableStores]);
+
+    const getPathname = useCallback(
+        async storeCode => {
+            if (pathname === '' || pathname === '/') return '';
+            let newPath = '';
+            if (internalRoutes.includes(pathname)) {
+                newPath = pathname;
+            } else {
+                const { data: routeData } = await fetchRouteData({
+                    fetchPolicy: 'no-cache',
+                    variables: {
+                        url: pathname
+                    },
+                    context: { headers: { store: storeCode } }
+                });
+                if (routeData.route) {
+                    newPath = routeData.route.relative_url;
+                }
+            }
+            return newPath.startsWith('/') ? newPath.substr(1) : newPath;
+        },
+        [pathname, fetchRouteData, internalRoutes]
+    );
+
+    const handleSwitchWebsite = useCallback(
+        // Change store view code and currency to be used in Apollo link request headers
+        async (storeCode, websiteCode) => {
+            // Do nothing when store view is not present in available stores
+            if (!availableStores.has(storeCode)) return;
+
+            storage.setItem('store_view_code', storeCode);
+            storage.setItem(
+                'store_view_currency',
+                availableStores.get(storeCode).currency
+            );
+            storage.setItem(
+                'store_view_secure_base_media_url',
+                availableStores.get(storeCode).secure_base_media_url
+            );
+            const pathName = await getPathname(storeCode);
+            
+            let accessBaseWebsite = null;
+            let newSearchParams = searchParams;
+            let newWebsiteCode = websiteCode;
+
+            if (newWebsiteCode == process.env.WEBSITE_CODE) {
+                newWebsiteCode = null;
+                newSearchParams = searchParams ? searchParams+'&access_base_website=1' : '?access_base_website=1';
+                accessBaseWebsite = '?access_base_website=1';
+            }
+
+            const newPath = pathName ? `/${pathName}${newSearchParams}` : (accessBaseWebsite ? `/${pathName}${accessBaseWebsite}` : '');
+
+            if (newWebsiteCode) {
+                globalThis.location.assign(`/${newWebsiteCode}${newPath || ''}`);
+            } else {
+                globalThis.location.assign(`${newPath || ''}`);
+            }
+        },
+        [availableStores, getPathname, searchParams]
+    );
+
+    const handleTriggerClick = useCallback(() => {
+        // Toggle Stores Menu.
+        setStoreMenuIsOpen(isOpen => !isOpen);
+    }, [setStoreMenuIsOpen]);
+
+    return {
+        availableStores,
+        currentGroupName,
+        currentWebsiteName,
+        storeGroups,
+        storeMenuRef,
+        storeMenuTriggerRef,
+        storeMenuIsOpen,
+        handleTriggerClick,
+        handleSwitchWebsite
+    };
+};

package/src/talons/WebsiteSwitcher/websiteSwitcher.gql.js

@@ -0,0 +1,45 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            store_name
+            store_group_name
+            website_name
+        }
+    }
+`;
+
+export const GET_ROUTE_DATA = gql`
+    query getRouteData($url: String!) {
+        route(url: $url) {
+            relative_url
+        }
+    }
+`;
+
+export const GET_AVAILABLE_WEBSITES_DATA = gql`
+    query availableStoresByUserIp {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        availableStoresByUserIp {
+            default_display_currency_code
+            locale
+            secure_base_media_url
+            store_code
+            store_group_code
+            store_group_name
+            store_name
+            store_sort_order
+            website_name
+            website_code
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getRouteData: GET_ROUTE_DATA,
+    getAvailableWebsitesData: GET_AVAILABLE_WEBSITES_DATA
+};