@riosst100/pwa-marketplace 1.0.0 → 1.0.1

package/package.json

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

package/src/Utilities/graphQL.js

@@ -1,7 +1,7 @@
 const debug = require('@magento/pwa-buildpack/lib/util/debug').makeFileLogger(__filename);
 
 const fetch = require('node-fetch');
-const graphQLQueries = require('@riosst100/pwa-multi-website/src/queries');
+const graphQLQueries = require('@riosst100/pwa-marketplace/src/queries');
 const https = require('https');
 
 // To be used with `node-fetch` in order to allow self-signed certificates.

package/src/componentOverrideMapping.js

@@ -1,11 +1,11 @@
 module.exports = componentOverrideMapping = {
-    [`@magento/venia-ui/lib/components/Adapter/adapter.js`]: '@riosst100/pwa-multi-website/src/overwrites/venia-ui/lib/components/Adapter/adapter.js',
-    [`@magento/venia-ui/lib/components/Header/header.js`]: '@riosst100/pwa-multi-website/src/overwrites/venia-ui/lib/components/Header/header.js',
-    [`@magento/venia-ui/lib/components/Header/storeSwitcher.js`]: '@riosst100/pwa-multi-website/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.js',
-    [`@magento/venia-ui/lib/components/Header/switcherItem.js`]: '@riosst100/pwa-multi-website/src/overwrites/venia-ui/lib/components/Header/switcherItem.js',
-    [`@magento/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js`]: '@riosst100/pwa-multi-website/src/overwrites/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js',
-    [`@magento/peregrine/lib/talons/Adapter/useAdapter.js`]: '@riosst100/pwa-multi-website/src/overwrites/peregrine/lib/talons/Adapter/useAdapter.js',
-    [`@magento/peregrine/lib/talons/Header/useStoreSwitcher.js`]: '@riosst100/pwa-multi-website/src/overwrites/peregrine/lib/talons/Header/useStoreSwitcher.js',
-    [`@magento/peregrine/lib/talons/Header/storeSwitcher.gql.js`]: '@riosst100/pwa-multi-website/src/overwrites/peregrine/lib/talons/Header/storeSwitcher.gql.js',
-    [`@magento/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql`]: '@riosst100/pwa-multi-website/src/overwrites/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql'
+    [`@magento/venia-ui/lib/components/Adapter/adapter.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Adapter/adapter.js',
+    [`@magento/venia-ui/lib/components/Header/header.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/header.js',
+    [`@magento/venia-ui/lib/components/Header/storeSwitcher.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.js',
+    [`@magento/venia-ui/lib/components/Header/switcherItem.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/switcherItem.js',
+    [`@magento/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js',
+    [`@magento/peregrine/lib/talons/Adapter/useAdapter.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Adapter/useAdapter.js',
+    [`@magento/peregrine/lib/talons/Header/useStoreSwitcher.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Header/useStoreSwitcher.js',
+    [`@magento/peregrine/lib/talons/Header/storeSwitcher.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Header/storeSwitcher.gql.js',
+    [`@magento/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql`]: '@riosst100/pwa-marketplace/src/overwrites/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql'
 };

package/src/components/BecomeSeller/becomeSeller.js

@@ -0,0 +1,220 @@
+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 { 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 TextInput from '@magento/venia-ui/lib/components/TextInput';
+import defaultClasses from './becomeSeller.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,
+        handleCancel,
+        handleSubmit,
+        handleEnterKeyPress,
+        handleCancelKeyPress,
+        isDisabled,
+        initialValues,
+        recaptchaWidgetProps
+    } = talonProps;
+    const { formatMessage } = useIntl();
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const cancelButton = props.isCancelButtonHidden ? null : (
+        <Button
+            data-cy="BecomeSeller-cancelButton"
+            className={classes.cancelButton}
+            disabled={isDisabled}
+            type="button"
+            priority="low"
+            onClick={handleCancel}
+            onKeyDown={handleCancelKeyPress}
+        >
+            <FormattedMessage
+                id={'becomeSeller.cancelText'}
+                defaultMessage={'Cancel'}
+            />
+        </Button>
+    );
+
+    const submitButton = (
+        <Button
+            className={classes.submitButton}
+            disabled={isDisabled}
+            type="submit"
+            priority="high"
+            onKeyDown={handleEnterKeyPress}
+            data-cy="BecomeSeller-submitButton"
+        >
+            <FormattedMessage
+                id={'becomeSeller.becomeSellerText'}
+                defaultMessage={'Create an Account'}
+            />
+        </Button>
+    );
+
+    return (
+        <Form
+            data-cy="BecomeSeller-form"
+            className={classes.root}
+            initialValues={initialValues}
+            onSubmit={handleSubmit}
+        >
+            <h2 data-cy="BecomeSeller-title" className={classes.title}>
+                <FormattedMessage
+                    id={'becomeSeller.becomeSellerText'}
+                    defaultMessage={'Create an Account'}
+                />
+            </h2>
+            <FormError errors={Array.from(errors.values())} />
+            <Field
+                id="firstName"
+                label={formatMessage({
+                    id: 'becomeSeller.firstNameText',
+                    defaultMessage: 'First Name'
+                })}
+            >
+                <TextInput
+                    id="firstName"
+                    field="customer.firstname"
+                    autoComplete="given-name"
+                    validate={isRequired}
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="customer-firstname"
+                    aria-label={formatMessage({
+                        id: 'global.firstNameRequired',
+                        defaultMessage: 'First Name Required'
+                    })}
+                />
+            </Field>
+            <Field
+                id="lastName"
+                label={formatMessage({
+                    id: 'becomeSeller.lastNameText',
+                    defaultMessage: 'Last Name'
+                })}
+            >
+                <TextInput
+                    id="lastName"
+                    field="customer.lastname"
+                    autoComplete="family-name"
+                    validate={isRequired}
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="customer-lastname"
+                    aria-label={formatMessage({
+                        id: 'global.lastNameRequired',
+                        defaultMessage: 'Last Name Required'
+                    })}
+                />
+            </Field>
+            <Field
+                id="Email"
+                label={formatMessage({
+                    id: 'becomeSeller.emailText',
+                    defaultMessage: 'Email'
+                })}
+            >
+                <TextInput
+                    id="Email"
+                    field="customer.email"
+                    autoComplete="email"
+                    validate={isRequired}
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="customer-email"
+                    aria-label={formatMessage({
+                        id: 'global.emailRequired',
+                        defaultMessage: 'Email Required'
+                    })}
+                />
+            </Field>
+            <Password
+                id="Password"
+                autoComplete="new-password"
+                fieldName="password"
+                isToggleButtonHidden={false}
+                label={formatMessage({
+                    id: 'becomeSeller.passwordText',
+                    defaultMessage: 'Password'
+                })}
+                validate={combine([
+                    isRequired,
+                    [hasLengthAtLeast, 8],
+                    validatePassword
+                ])}
+                validateOnBlur
+                mask={value => value && value.trim()}
+                maskOnBlur={true}
+                data-cy="password"
+                aria-label={formatMessage({
+                    id: 'global.passwordRequired',
+                    defaultMessage: 'Password Required'
+                })}
+            />
+            <div className={classes.subscribe}>
+                <Checkbox
+                    field="subscribe"
+                    id="subscribe"
+                    label={formatMessage({
+                        id: 'becomeSeller.subscribeText',
+                        defaultMessage: 'Subscribe to news and updates'
+                    })}
+                />
+            </div>
+            <GoogleRecaptcha {...recaptchaWidgetProps} />
+            <div className={classes.actions}>
+                {submitButton}
+                {cancelButton}
+            </div>
+        </Form>
+    );
+};
+
+BecomeSeller.propTypes = {
+    classes: shape({
+        actions: string,
+        lead: string,
+        root: string,
+        subscribe: string
+    }),
+    initialValues: shape({
+        email: string,
+        firstName: string,
+        lastName: string
+    }),
+    isCancelButtonHidden: bool,
+    onSubmit: func,
+    onCancel: func
+};
+
+BecomeSeller.defaultProps = {
+    onCancel: () => {},
+    isCancelButtonHidden: true
+};
+
+export default BecomeSeller;

package/src/components/BecomeSeller/becomeSeller.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 '../Button/button.module.css';
+}
+
+.submitButton {
+    composes: root_highPriority from '../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/BecomeSeller/index.js

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

package/src/components/BecomeSellerPage/becomeSellerPage.js

@@ -0,0 +1,49 @@
+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 { useStyle } from '@magento/venia-ui/lib/classify';
+import BecomeSeller from '@riosst100/pwa-seller-registration/lib/components/BecomeSeller';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+
+const BecomeSellerPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { becomeSellerProps } = useBecomeSellerPage(props);
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={classes.root}>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'becomeSellerPage.title',
+                    defaultMessage: 'Become a Seller'
+                })}
+            </StoreTitle>
+            <h1 className={classes.header}>
+                <FormattedMessage
+                    id="becomeSellerPage.header"
+                    defaultMessage="Become a Seller"
+                />
+            </h1>
+            <div className={classes.contentContainer}>
+                <BecomeSeller {...becomeSellerProps} />
+            </div>
+        </div>
+    );
+}
+
+export default BecomeSellerPage;
+
+BecomeSellerPage.defaultProps = {
+    signedInRedirectUrl: '/become-seller',
+    signInPageUrl: 'https://seller-local.tcgcollective.co'
+};
+
+BecomeSellerPage.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    signedInRedirectUrl: string,
+    signInPageUrl: string
+};

package/src/components/BecomeSellerPage/index.js

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

package/src/components/Header/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/Header/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/Header/websiteSwitcher.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shape, string } from 'prop-types';
 
-import { useWebsiteSwitcher } from '@riosst100/pwa-multi-website/src/talons/Header/useWebsiteSwitcher';
+import { useWebsiteSwitcher } from '@riosst100/pwa-marketplace/src/talons/Header/useWebsiteSwitcher';
 import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';

package/src/intercept.js

@@ -47,4 +47,24 @@ module.exports = async targets => {
       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;
+  });
 };

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/Header/websiteSwitcher';
 import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
+import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/Header/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/talons/Header/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
+    };
+};