@riosst100/pwa-marketplace 1.0.1 → 1.0.3

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,41 @@ module.exports = async targets => {
     });
   });
 
-  const availableWebsites = await getAvailableWebsitesConfigData();
+  // Define the routes using the results of the asynchronous operation
+  const routes = [
+    {
+      exact: true,
+      name: "BecomeSellerRoute",
+      pattern: "/become-seller",
+      path: require.resolve("./components/BecomeSellerPage/index.js"),
+      authed: true,
+      redirectTo: "/sign-in"
+    },
+    {
+      exact: true,
+      name: "SellerAccountRoute",
+      pattern: "/seller-account",
+      path: require.resolve("./components/SellerAccountPage/index.js"),
+      authed: true,
+      redirectTo: "/become-seller"
+    },
+  ];
 
+  // 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/peregrine/lib/store/actions/user/asyncActions.js

@@ -0,0 +1,96 @@
+import BrowserPersistence from '@magento/peregrine/lib/util/simplePersistence';
+import { removeCart } from '@magento/peregrine/lib/store/actions/cart';
+import { clearCheckoutDataFromStorage } from '@magento/peregrine/lib/store/actions/checkout';
+
+import actions from '@magento/peregrine/lib/store/actions/user/actions';
+
+const storage = new BrowserPersistence();
+
+export const signOut = (payload = {}) =>
+    async function thunk(dispatch, getState, { apolloClient }) {
+        const { revokeToken } = payload;
+
+        if (revokeToken) {
+            // Send mutation to revoke token.
+            try {
+                await revokeToken();
+            } catch (error) {
+                console.error('Error Revoking Token', error);
+            }
+        }
+
+        // Remove token from local storage and Redux.
+        await dispatch(clearToken());
+        await dispatch(actions.reset());
+        await clearCheckoutDataFromStorage();
+        await apolloClient.clearCacheData(apolloClient, 'cart');
+        await apolloClient.clearCacheData(apolloClient, 'customer');
+
+        // Now that we're signed out, forget the old (customer) cart.
+        // We don't need to create a new cart here because we're going to refresh
+        // the page immediately after.
+        await dispatch(removeCart());
+    };
+
+export const getUserDetails = ({ fetchUserDetails }) =>
+    async function thunk(...args) {
+        const [dispatch, getState] = args;
+        const { user } = getState();
+
+        if (user.isSignedIn) {
+            dispatch(actions.getDetails.request());
+
+            try {
+                const { data } = await fetchUserDetails();
+                
+                if (data.customer) {
+                    const isSeller = data.customer.is_seller;
+                    if (isSeller) {
+                        storage.setItem('is_seller', true);
+                    }
+                }
+
+                dispatch(actions.getDetails.receive(data.customer));
+            } catch (error) {
+                dispatch(actions.getDetails.receive(error));
+            }
+        }
+    };
+
+export const resetPassword = ({ email }) =>
+    async function thunk(...args) {
+        const [dispatch] = args;
+
+        dispatch(actions.resetPassword.request());
+
+        // TODO: actually make the call to the API.
+        // For now, just return a resolved promise.
+        await Promise.resolve(email);
+
+        dispatch(actions.resetPassword.receive());
+    };
+
+export const setToken = token =>
+    async function thunk(...args) {
+        const [dispatch] = args;
+
+        // Store token in local storage.
+        // TODO: Get correct token expire time from API
+        storage.setItem('signin_token', token, 3600);
+
+        // Persist in store
+        dispatch(actions.setToken(token));
+    };
+
+export const clearToken = () =>
+    async function thunk(...args) {
+        const [dispatch] = args;
+
+        // Clear token from local storage
+        storage.removeItem('signin_token');
+
+        storage.removeItem('is_seller');
+
+        // Remove from store
+        dispatch(actions.clearToken());
+    };

package/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js

@@ -0,0 +1,65 @@
+import { useCallback } from 'react';
+
+/**
+ * @param {Object}      props
+ * @param {Function}    props.onSignOut - A function to call when sign out occurs.
+ *
+ * @returns {Object}    result
+ * @returns {Function}  result.handleSignOut - The function to handle sign out actions.
+ */
+export const useAccountMenuItems = props => {
+    const { onSignOut } = props;
+
+    const handleSignOut = useCallback(() => {
+        onSignOut();
+    }, [onSignOut]);
+
+    const MENU_ITEMS = [
+        {
+            name: 'Seller Account Information',
+            id: 'accountMenu.sellerAccountInfoLink',
+            url: '/seller-account'
+        },
+        {
+            name: 'Order History',
+            id: 'accountMenu.orderHistoryLink',
+            url: '/order-history'
+        },
+        // Hide links until features are completed
+        // {
+        //     name: 'Store Credit & Gift Cards',
+        //     id: 'accountMenu.storeCreditLink',
+        //     url: ''
+        // },
+        {
+            name: 'Favorites Lists',
+            id: 'accountMenu.favoritesListsLink',
+            url: '/wishlist'
+        },
+        {
+            name: 'Address Book',
+            id: 'accountMenu.addressBookLink',
+            url: '/address-book'
+        },
+        {
+            name: 'Saved Payments',
+            id: 'accountMenu.savedPaymentsLink',
+            url: '/saved-payments'
+        },
+        {
+            name: 'Communications',
+            id: 'accountMenu.communicationsLinak',
+            url: '/communications'
+        },
+        {
+            name: 'Account Information',
+            id: 'accountMenu.accountInfoLink',
+            url: '/account-information'
+        }
+    ];
+
+    return {
+        handleSignOut,
+        menuItems: MENU_ITEMS
+    };
+};

package/src/overwrites/peregrine/lib/talons/SignIn/signIn.gql.js

@@ -0,0 +1,56 @@
+import { gql } from '@apollo/client';
+import { CheckoutPageFragment } from '@magento/peregrine/lib/talons/CheckoutPage/checkoutPageFragments.gql';
+
+export const GET_CUSTOMER = gql`
+    query GetCustomerAfterSignIn {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        customer {
+            email
+            firstname
+            lastname
+            is_subscribed
+            is_seller
+        }
+    }
+`;
+
+export const SIGN_IN = gql`
+    mutation SignIn($email: String!, $password: String!) {
+        generateCustomerToken(email: $email, password: $password) {
+            token
+        }
+    }
+`;
+
+export const CREATE_CART = gql`
+    mutation CreateCartAfterSignIn {
+        cartId: createEmptyCart
+    }
+`;
+
+export const MERGE_CARTS = gql`
+    mutation MergeCartsAfterSignIn(
+        $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 {
+    createCartMutation: CREATE_CART,
+    getCustomerQuery: GET_CUSTOMER,
+    mergeCartsMutation: MERGE_CARTS,
+    signInMutation: SIGN_IN
+};