@riosst100/pwa-marketplace 1.0.2 → 1.0.3

package/src/components/SellerVerification/sellerVerification.js

@@ -0,0 +1,198 @@
+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-marketplace/src/talons/BecomeSeller/useBecomeSeller';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import combine from '@magento/venia-ui/lib/util/combineValidators';
+import {
+    hasLengthAtLeast,
+    isRequired,
+    validatePassword
+} from '@magento/venia-ui/lib/util/formValidators';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
+import Field from '@magento/venia-ui/lib/components/Field';
+import Select from '@magento/venia-ui/lib/components/Select';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import defaultClasses from './sellerVerification.module.css';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import Password from '@magento/venia-ui/lib/components/Password';
+import GoogleRecaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
+
+const BecomeSeller = props => {
+    const talonProps = useBecomeSeller({
+        initialValues: props.initialValues,
+        onSubmit: props.onSubmit,
+        onCancel: props.onCancel
+    });
+
+    const {
+        errors,
+        handleSubmit,
+        handleEnterKeyPress,
+        isDisabled,
+        initialValues,
+        recaptchaWidgetProps
+    } = talonProps;
+    const { formatMessage } = useIntl();
+    const classes = useStyle(defaultClasses, props.classes);
+    
+    const submitButton = (
+        <Button
+            className={classes.submitButton}
+            disabled={isDisabled}
+            type="submit"
+            priority="high"
+            onKeyDown={handleEnterKeyPress}
+            data-cy="BecomeSeller-submitButton"
+        >
+            <FormattedMessage
+                id={'sellerVerification.sellerVerificationText'}
+                defaultMessage={'Become a Seller'}
+            />
+        </Button>
+    );
+
+    const sellerTypeOptions = [
+        {
+            value: "individual",
+            label: "Individual"
+        },
+        {
+            value: "company",
+            label: "Company"
+        }
+    ];
+
+    return (
+        <Form
+            data-cy="BecomeSeller-form"
+            className={classes.root}
+            initialValues={initialValues}
+            onSubmit={handleSubmit}
+        >
+            <h2 data-cy="BecomeSeller-title" className={classes.title}>
+                <FormattedMessage
+                    id={'sellerVerification.sellerVerificationText'}
+                    defaultMessage={'Become a Seller'}
+                />
+            </h2>
+            <FormError errors={Array.from(errors.values())} />
+            <Field
+                id="sellerType"
+                label={formatMessage({
+                    id: 'sellerVerification.sellerTypeText',
+                    defaultMessage: 'Seller Type'
+                })}
+            >
+                <Select
+                    field="seller.seller_type"
+                    id={classes.root}
+                    items={sellerTypeOptions}
+                />
+            </Field>
+            <Field
+                id="sellerProfileName"
+                label={formatMessage({
+                    id: 'sellerVerification.sellerProfileNameText',
+                    defaultMessage: 'Seller Profile Name'
+                })}
+            >
+                <TextInput
+                    id="sellerProfileName"
+                    field="seller.seller_profile_name"
+                    validate={isRequired}
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="seller-profilename"
+                    aria-label={formatMessage({
+                        id: 'global.sellerProfileNameRequired',
+                        defaultMessage: 'Seller Profile Name is required.'
+                    })}
+                />
+            </Field>
+            <Field
+                id="companyName"
+                label={formatMessage({
+                    id: 'sellerVerification.companyNameText',
+                    defaultMessage: 'Company Name'
+                })}
+            >
+                <TextInput
+                    id="companyName"
+                    field="seller.company_name"
+                    validate={isRequired}
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="seller-companyname"
+                    aria-label={formatMessage({
+                        id: 'global.companyNameRequired',
+                        defaultMessage: 'Company Name Required'
+                    })}
+                />
+            </Field>
+            <Field
+                id="storeURL"
+                label={formatMessage({
+                    id: 'sellerVerification.storeURLText',
+                    defaultMessage: 'Store URL'
+                })}
+            >
+                <TextInput
+                    id="storeUrl"
+                    field="seller.store_url"
+                    validate={isRequired}
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="seller-storeurl"
+                    aria-label={formatMessage({
+                        id: 'global.storeUrlRequired',
+                        defaultMessage: 'Store URL is required.'
+                    })}
+                />
+            </Field>
+            <div className={classes.subscribe}>
+                <Checkbox
+                    field="become_seller_agreement"
+                    id="sellerVerificationAgreement"
+                    label={formatMessage({
+                        id: 'sellerVerification.sellerVerificationAgreementText',
+                        defaultMessage: 'I agree the Terms and Condition (Terms and Conditions)'
+                    })}
+                />
+            </div>
+            <GoogleRecaptcha {...recaptchaWidgetProps} />
+            <div className={classes.actions}>
+                {submitButton}
+            </div>
+        </Form>
+    );
+};
+
+BecomeSeller.propTypes = {
+    classes: shape({
+        actions: string,
+        lead: string,
+        root: string,
+        subscribe: string
+    }),
+    initialValues: shape({
+        sellerProfileName: string,
+        companyName: string
+    }),
+    isCancelButtonHidden: bool,
+    onSubmit: func,
+    onCancel: func
+};
+
+BecomeSeller.defaultProps = {
+    onCancel: () => {},
+    isCancelButtonHidden: true
+};
+
+export default BecomeSeller;

package/src/components/SellerVerification/sellerVerification.module.css

@@ -0,0 +1,47 @@
+.root {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: justify-items-stretch from global;
+    composes: px-sm from global;
+    composes: py-xs from global;
+}
+
+.message {
+    composes: bg-subtle from global;
+    composes: leading-tight from global;
+    composes: p-xs from global;
+    composes: rounded from global;
+    composes: text-sm from global;
+}
+
+/* TODO @TW: cannot compose */
+.message:empty {
+    display: none;
+}
+
+.actions {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-center from global;
+    composes: mt-xs from global;
+    composes: text-center from global;
+
+    composes: lg_grid-flow-col from global;
+}
+
+.cancelButton {
+    composes: root_lowPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+}
+
+.submitButton {
+    composes: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    composes: col-start-auto from global;
+
+    composes: lg_col-start-2 from global;
+}
+
+.subscribe {
+    composes: -ml-1.5 from global;
+}

package/src/components/SellerVerificationPage/index.js

@@ -0,0 +1 @@
+export {default} from './sellerVerificationPage';

package/src/components/SellerVerificationPage/sellerVerificationPage.js

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

package/src/components/SellerVerificationPage/sellerVerificationPage.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

@@ -68,14 +68,14 @@ const WebsiteSwitcher = props => {
         );
     });
 
-    let triggerLabel = `${currentWebsiteName}`;
+    let triggerLabel = currentWebsiteName ? `${currentWebsiteName}` : '';
 
     return (
         <div className={classes.root} data-cy="WebsiteSwitcher-root">
             <button
                 data-cy="WebsiteSwitcher-triggerButton"
                 className={classes.trigger}
-                aria-label={currentWebsiteName}
+                aria-label={currentWebsiteName || ''}
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
                 data-cy="WebsiteSwitcher-trigger"

package/src/intercept.js

@@ -36,11 +36,21 @@ module.exports = targets => {
   // 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"
     },
-    // Add other routes as needed
   ];
 
   // Apply DefinePlugin using the results of the asynchronous operation

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