@riosst100/pwa-marketplace 1.0.2 → 1.0.3

package/package.json

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

package/src/componentOverrideMapping.js

@@ -7,5 +7,9 @@ module.exports = componentOverrideMapping = {
     [`@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'
+    [`@magento/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql`]: '@riosst100/pwa-marketplace/src/overwrites/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql',
+    [`@magento/peregrine/lib/store/actions/user/asyncActions.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/store/actions/user/asyncActions.js',
+    [`@magento/peregrine/lib/talons/SignIn/signIn.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/signIn.gql.js',
+    [`@magento/peregrine/lib/talons/SignIn/useSignIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js',
+    [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js'
 };

package/src/components/BecomeSeller/becomeSeller.js

@@ -14,11 +14,14 @@ import {
 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 './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';
+import Country from '@magento/venia-ui/lib/components/Country';
+import Region from '@magento/venia-ui/lib/components/Region';
+import Postcode from '@magento/venia-ui/lib/components/Postcode';
 
 const BecomeSeller = props => {
     const talonProps = useBecomeSeller({
@@ -29,34 +32,18 @@ const BecomeSeller = props => {
 
     const {
         errors,
-        handleCancel,
         handleSubmit,
+        handleChange,
+        sellerType,
         handleEnterKeyPress,
-        handleCancelKeyPress,
         isDisabled,
         initialValues,
-        recaptchaWidgetProps
+        recaptchaWidgetProps,
+        isSeller
     } = 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}
@@ -73,12 +60,28 @@ const BecomeSeller = props => {
         </Button>
     );
 
-    return (
+    const sellerTypeOptions = [
+        {
+            value: "individual",
+            label: "Individual"
+        },
+        {
+            value: "company",
+            label: "Company"
+        }
+    ];
+
+    if (isSeller) {
+        return '';
+    }
+
+    return !isSeller ? (
         <Form
             data-cy="BecomeSeller-form"
             className={classes.root}
             initialValues={initialValues}
             onSubmit={handleSubmit}
+            onChange={handleChange}
         >
             <h2 data-cy="BecomeSeller-title" className={classes.title}>
                 <FormattedMessage
@@ -88,111 +91,212 @@ const BecomeSeller = props => {
             </h2>
             <FormError errors={Array.from(errors.values())} />
             <Field
-                id="firstName"
+                id="sellerType"
+                label={formatMessage({
+                    id: 'becomeSeller.sellerTypeText',
+                    defaultMessage: 'Seller Type'
+                })}
+            >
+                <Select
+                    field="seller.seller_type"
+                    id={classes.root}
+                    items={sellerTypeOptions}
+                />
+            </Field>
+            {sellerType == "company" && (
+                <>
+                    <Field
+                        id="companyName"
+                        label={formatMessage({
+                            id: 'becomeSeller.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="companyRegistrationNumber"
+                        label={formatMessage({
+                            id: 'becomeSeller.companyRegistrationNumberText',
+                            defaultMessage: 'Company Registration Number'
+                        })}
+                    >
+                        <TextInput
+                            id="companyRegistrationNumber"
+                            field="seller.company_registration_number"
+                            validate={isRequired}
+                            validateOnBlur
+                            mask={value => value && value.trim()}
+                            maskOnBlur={true}
+                            data-cy="seller-registrationnumber"
+                            aria-label={formatMessage({
+                                id: 'global.registration_numberRequired',
+                                defaultMessage: 'Company Registration Number Required'
+                            })}
+                        />
+                    </Field>
+                </>
+            )}
+            <Field
+                id="sellerProfileName"
+                label={formatMessage({
+                    id: 'becomeSeller.sellerProfileNameText',
+                    defaultMessage: 'Store 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: 'Store Name is required.'
+                    })}
+                />
+            </Field>
+            <Field
+                id="storeURL"
                 label={formatMessage({
-                    id: 'becomeSeller.firstNameText',
-                    defaultMessage: 'First Name'
+                    id: 'becomeSeller.storeURLText',
+                    defaultMessage: 'Store URL'
                 })}
             >
                 <TextInput
-                    id="firstName"
-                    field="customer.firstname"
-                    autoComplete="given-name"
+                    id="storeUrl"
+                    field="seller.store_url"
                     validate={isRequired}
                     validateOnBlur
                     mask={value => value && value.trim()}
                     maskOnBlur={true}
-                    data-cy="customer-firstname"
+                    data-cy="seller-storeurl"
                     aria-label={formatMessage({
-                        id: 'global.firstNameRequired',
-                        defaultMessage: 'First Name Required'
+                        id: 'global.storeUrlRequired',
+                        defaultMessage: 'Store URL is required.'
                     })}
                 />
             </Field>
+            <Country
+                field="seller.country_id"
+                validate={isRequired}
+            />
             <Field
-                id="lastName"
+                id="addressLine1"
                 label={formatMessage({
-                    id: 'becomeSeller.lastNameText',
-                    defaultMessage: 'Last Name'
+                    id: 'becomeSeller.addressLine1Text',
+                    defaultMessage: 'Address Line 1'
                 })}
             >
                 <TextInput
-                    id="lastName"
-                    field="customer.lastname"
-                    autoComplete="family-name"
+                    id="addressLine1"
+                    field="seller.address_line_1"
                     validate={isRequired}
                     validateOnBlur
                     mask={value => value && value.trim()}
                     maskOnBlur={true}
-                    data-cy="customer-lastname"
+                    data-cy="seller-addressline1"
                     aria-label={formatMessage({
-                        id: 'global.lastNameRequired',
-                        defaultMessage: 'Last Name Required'
+                        id: 'global.addressLine1Required',
+                        defaultMessage: 'Address Line 1 is required'
                     })}
                 />
             </Field>
             <Field
-                id="Email"
+                id="addressLine2"
                 label={formatMessage({
-                    id: 'becomeSeller.emailText',
-                    defaultMessage: 'Email'
+                    id: 'becomeSeller.addressLine2Text',
+                    defaultMessage: 'Address Line 2'
                 })}
             >
                 <TextInput
-                    id="Email"
-                    field="customer.email"
-                    autoComplete="email"
+                    id="addressLine2"
+                    field="seller.address_line_2"
                     validate={isRequired}
                     validateOnBlur
                     mask={value => value && value.trim()}
                     maskOnBlur={true}
-                    data-cy="customer-email"
+                    data-cy="seller-addressline2"
                     aria-label={formatMessage({
-                        id: 'global.emailRequired',
-                        defaultMessage: 'Email Required'
+                        id: 'global.addressLine2Required',
+                        defaultMessage: 'Address Line 2 is required'
                     })}
                 />
             </Field>
-            <Password
-                id="Password"
-                autoComplete="new-password"
-                fieldName="password"
-                isToggleButtonHidden={false}
+            <Field
+                id="city"
                 label={formatMessage({
-                    id: 'becomeSeller.passwordText',
-                    defaultMessage: 'Password'
+                    id: 'global.city',
+                    defaultMessage: 'City'
                 })}
-                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'
+            >
+                <TextInput
+                    id="city"
+                    field="seller.city"
+                    validate={isRequired}
+                />
+            </Field>
+            <Region
+                fieldInput="seller.region"
+                fieldSelect="seller.region_id"
+                label={formatMessage({
+                    id: 'global.region',
+                    defaultMessage: 'Region'
                 })}
+                countryCodeField="seller.country_id"
+                validate={isRequired}
             />
+            <Postcode
+                validate={isRequired}
+                fieldInput="seller.postcode"
+                label={formatMessage({
+                    id: 'global.postcode',
+                    defaultMessage: 'Postal Code'
+                })}
+            />
+            <Field
+                id="contactNumber"
+                label={formatMessage({
+                    id: 'global.contactNumber',
+                    defaultMessage: 'Contact Number'
+                })}
+            >
+                <TextInput
+                    id="contactNumber"
+                    field="seller.contact_number"
+                    validate={isRequired}
+                />
+            </Field>
             <div className={classes.subscribe}>
                 <Checkbox
-                    field="subscribe"
-                    id="subscribe"
+                    field="become_seller_agreement"
+                    id="becomeSellerAgreement"
                     label={formatMessage({
-                        id: 'becomeSeller.subscribeText',
-                        defaultMessage: 'Subscribe to news and updates'
+                        id: 'becomeSeller.becomeSellerAgreementText',
+                        defaultMessage: 'I agree the Terms and Condition (Terms and Conditions)'
                     })}
                 />
             </div>
             <GoogleRecaptcha {...recaptchaWidgetProps} />
             <div className={classes.actions}>
                 {submitButton}
-                {cancelButton}
             </div>
         </Form>
-    );
+    ) : '';
 };
 
 BecomeSeller.propTypes = {
@@ -203,9 +307,8 @@ BecomeSeller.propTypes = {
         subscribe: string
     }),
     initialValues: shape({
-        email: string,
-        firstName: string,
-        lastName: string
+        sellerProfileName: string,
+        companyName: string
     }),
     isCancelButtonHidden: bool,
     onSubmit: func,

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

@@ -1,6 +1,5 @@
 .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;

package/src/components/BecomeSellerLink/becomeSellerLink.js

@@ -4,17 +4,34 @@ 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';
+import { useIntl } from 'react-intl';
+import { useBecomeSellerLink } from '@riosst100/pwa-marketplace/src/talons/BecomeSellerLink/useBecomeSellerLink';
 
 const BecomeSellerLink = props => {
     const classes = useStyle(defaultClasses, props.classes);
-    const becomeSellerLabel = "Become a Seller";
+    const { formatMessage } = useIntl();
 
-    return (
+    const {
+        isSeller
+    } = useBecomeSellerLink(props);
+
+    return isSeller ? (
+        <div className={classes.root} data-cy="BecomeSellerLink-root">
+            <a href="https://seller-local.tcgcollective.co/lofmarketplace/seller/login/">
+                {formatMessage({
+                    id: 'sellerDashboard.title',
+                    defaultMessage: 'Seller Dashboard'
+                })}
+            </a>
+        </div>
+    ) : (
         <div className={classes.root} data-cy="BecomeSellerLink-root">
             <Link
-                aria-label={becomeSellerLabel}
                 to={resourceUrl('/become-seller')}
-            >{becomeSellerLabel}</Link>
+            >{formatMessage({
+                id: 'becomeSellerPage.title',
+                defaultMessage: 'Become a Seller'
+            })}</Link>
         </div>
     );
 };

package/src/components/BecomeSellerPage/becomeSellerPage.js

@@ -13,7 +13,9 @@ const BecomeSellerPage = props => {
     const { becomeSellerProps } = useBecomeSellerPage(props);
     const { formatMessage } = useIntl();
 
-    return (
+    const { isSeller } = becomeSellerProps
+
+    return !isSeller ? (
         <div className={classes.root}>
             <StoreTitle>
                 {formatMessage({
@@ -21,30 +23,23 @@ const BecomeSellerPage = props => {
                     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'
+    signInPageUrl: '/sign-in'
 };
 
 BecomeSellerPage.propTypes = {
     classes: shape({
         root: string
     }),
-    signedInRedirectUrl: string,
-    signInPageUrl: string
+    signedInRedirectUrl: string
 };

package/src/components/SellerAccountPage/index.js

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

package/src/components/SellerAccountPage/sellerAccountPage.js

@@ -0,0 +1,138 @@
+import React, { Fragment, Suspense } from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useSellerAccountPage } from '@riosst100/pwa-marketplace/src/talons/SellerAccountPage/useSellerAccountPage';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+// import SellerAccount from '@riosst100/pwa-marketplace/src/components/SellerAccount';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import defaultClasses from './sellerAccountPage.module.css';
+import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
+import AccountInformationPageOperations from '@magento/venia-ui/lib/components/AccountInformationPage/accountInformationPage.gql.js';
+import Button from '@magento/venia-ui/lib/components/Button';
+
+const SellerAccountPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const sellerAccountProps = useSellerAccountPage({
+        ...AccountInformationPageOperations
+    });
+    const {
+        handleCancel,
+        formErrors,
+        handleChangePassword,
+        handleSubmit,
+        initialValues,
+        isDisabled,
+        isUpdateMode,
+        loadDataError,
+        shouldShowNewPassword,
+        showUpdateMode,
+        recaptchaWidgetProps
+    } = sellerAccountProps;
+    const { formatMessage } = useIntl();
+
+    let sellerAccountDetails = null;
+    let sellerLoginAccount = null;
+    if (!initialValues) {
+        return fullPageLoadingIndicator;
+    } else {
+        const { customer } = initialValues;
+        const customerName = `${customer.firstname} ${customer.lastname}`;
+        const passwordValue = 'Same as current';
+
+        sellerAccountDetails = (
+            <Fragment>
+                <div className={classes.accountDetails}>
+                    <span className={classes.nameLabel}>
+                        <FormattedMessage
+                            id={'global.sellerAccountDetailsText'}
+                            defaultMessage={'Seller Account Details'}
+                        />
+                    </span>
+                    <div className={classes.lineItemsContainer}>
+                        <span className={classes.nameLabel}>
+                            <FormattedMessage
+                                id={'global.status'}
+                                defaultMessage={'Status'}
+                            />
+                        </span>
+                        <span className={classes.nameValue}>
+                            Not Verified
+                        </span>
+                    </div>
+                </div>
+            </Fragment>
+        );
+
+        sellerLoginAccount = (
+            <Fragment>
+                <div className={classes.accountDetails}>
+                    <span className={classes.nameLabel}>
+                        <FormattedMessage
+                            id={'global.sellerDashboardLoginAccountText'}
+                            defaultMessage={'Seller Dashboard Login Account'}
+                        />
+                    </span>
+                    <div className={classes.lineItemsContainer}>
+                        <span className={classes.emailLabel}>
+                            <FormattedMessage
+                                id={'global.email'}
+                                defaultMessage={'Email'}
+                            />
+                        </span>
+                        <span className={classes.emailValue}>
+                            {customer.email}
+                        </span>
+                        <span className={classes.passwordLabel}>
+                            <FormattedMessage
+                                id={'global.password'}
+                                defaultMessage={'Password'}
+                            />
+                        </span>
+                        <span className={classes.passwordValue}>
+                            {passwordValue}
+                        </span>
+                    </div>
+                    <div className={classes.editButtonContainer}>
+                        <a href="https://seller-local.tcgcollective.co/lofmarketplace/seller/login/"
+                            className={classes.editInformationButton}
+                        >
+                            <FormattedMessage
+                                id={'global.sellerDashboardText'}
+                                defaultMessage={'Seller Dashboard'}
+                            />
+                        </a>
+                    </div>
+                </div>
+            </Fragment>
+        );
+    }
+
+    return (
+        <div className={classes.root}>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'sellerAccountPage.title',
+                    defaultMessage: 'Seller Account'
+                })}
+            </StoreTitle>
+            {sellerAccountDetails}
+            <br />
+            {sellerLoginAccount}
+        </div>
+    )
+}
+
+export default SellerAccountPage;
+
+SellerAccountPage.defaultProps = {
+    signedInRedirectUrl: '/seller-account',
+    signInPageUrl: '/sign-in'
+};
+
+SellerAccountPage.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    signedInRedirectUrl: string
+};

package/src/components/SellerAccountPage/sellerAccountPage.module.css

@@ -0,0 +1,55 @@
+.root {
+    composes: grid from global;
+    composes: gap-y-md from global;
+    composes: px-lg from global;
+    composes: py-md from global;
+}
+
+.title {
+    composes: font-bold from global;
+    composes: font-serif from global;
+    composes: justify-self-center from global;
+}
+
+.accountDetails {
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+
+    composes: lg_grid-cols-3 from global;
+}
+
+.lineItemsContainer {
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: leading-normal from global;
+    grid-column: 1 / span 1;
+
+    composes: lg_gap-xs from global;
+    composes: lg_grid-cols-2 from global;
+}
+
+.lineItemLabel {
+    composes: font-bold from global;
+}
+
+.nameLabel,
+.emailLabel,
+.passwordLabel {
+    composes: font-bold from global;
+}
+
+.nameValue,
+.emailValue,
+.passwordValue {
+}
+
+.editButtonContainer {
+    grid-column: 1 / span 1;
+    composes: text-center from global;
+}
+
+.editInformationButton {
+    composes: root_normalPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+}

package/src/components/SellerVerification/index.js

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