@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/components/BecomeSeller/becomeSeller.js

@@ -24,6 +24,7 @@ import Region from '@magento/venia-ui/lib/components/Region';
 import Postcode from '@magento/venia-ui/lib/components/Postcode';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import { Link } from 'react-router-dom';
+import cn from 'classnames';
 
 const BecomeSeller = props => {
     const talonProps = useBecomeSeller({
@@ -45,19 +46,22 @@ const BecomeSeller = props => {
     } = talonProps;
     const { formatMessage } = useIntl();
     const classes = useStyle(defaultClasses, props.classes);
-    
+
     const submitButton = (
         <Button
-            className={classes.submitButton}
+            className={cn(classes.submitButton, 'w-full')}
             disabled={isDisabled}
             type="submit"
             priority="high"
             onKeyDown={handleEnterKeyPress}
             data-cy="BecomeSeller-submitButton"
+            classes={{
+                content: 'font-medium text-[16px] capitalize',
+            }}
         >
             <FormattedMessage
                 id={'becomeSeller.becomeSellerText'}
-                defaultMessage={'Become a Seller'}
+                defaultMessage={'Register'}
             />
         </Button>
     );
@@ -85,201 +89,299 @@ const BecomeSeller = props => {
             onSubmit={handleSubmit}
             onChange={handleChange}
         >
-            <h2 data-cy="BecomeSeller-title" className={classes.title}>
+            <h2 data-cy="BecomeSeller-title" className="capitalize text-lg font-medium mb-[70px]">
                 <FormattedMessage
                     id={'becomeSeller.becomeSellerText'}
-                    defaultMessage={'Become a Seller'}
+                    defaultMessage={'Register as Seller'}
                 />
             </h2>
             <FormError errors={Array.from(errors.values())} />
-            <Field
-                id="sellerType"
-                label={formatMessage({
-                    id: 'becomeSeller.sellerTypeText',
-                    defaultMessage: 'Seller Type'
-                })}
-            >
-                <Select
-                    field="seller.seller_type"
-                    id={classes.root}
-                    items={sellerTypeOptions}
+            <h3 className='text-[16px] leading-5 font-medium text-left mb-[30px]'>
+                <FormattedMessage
+                    id={'becomeSeller.storeInformation'}
+                    defaultMessage={'Store Information'}
                 />
-            </Field>
-            {sellerType == "company" && (
-                <>
-                    <Field
-                        id="companyName"
-                        label={formatMessage({
-                            id: 'becomeSeller.companyNameText',
-                            defaultMessage: 'Company Name'
-                        })}
-                    >
-                        <TextInput
+            </h3>
+            <div className='md_grid md_grid-cols-2 md_gap-6'>
+                <Field
+                    id="sellerType"
+                    label={formatMessage({
+                        id: 'becomeSeller.sellerTypeText',
+                        defaultMessage: 'Seller Type'
+                    })}
+                    classes={{
+                        label: "font-normal text-left mb-2 text-[14px] block mb-2"
+                    }}
+                >
+                    <Select
+                        field="seller.seller_type"
+                        id={classes.root}
+                        items={sellerTypeOptions}
+                    />
+                </Field>
+                {sellerType == "company" && (
+                    <>
+                        <Field
                             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'
+                            label={formatMessage({
+                                id: 'becomeSeller.companyNameText',
+                                defaultMessage: 'Company Name'
                             })}
-                        />
-                    </Field>
-                    <Field
-                        id="companyRegistrationNumber"
-                        label={formatMessage({
-                            id: 'becomeSeller.companyRegistrationNumberText',
-                            defaultMessage: 'Company Registration Number'
-                        })}
-                    >
-                        <TextInput
+                            classes={{
+                                label: "font-normal text-left mb-2 text-[14px] block mb-2"
+                            }}
+                        >
+                            <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'
+                                })}
+                                placeholder={formatMessage({
+                                    id: 'becomeSeller.placeholder.companyName',
+                                    defaultMessage: 'Your company name'
+                                })}
+                            />
+                        </Field>
+                        <Field
                             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'
+                            label={formatMessage({
+                                id: 'becomeSeller.companyRegistrationNumberText',
+                                defaultMessage: 'Company Registration Number'
                             })}
-                        />
-                    </Field>
-                </>
-            )}
-            <Field
-                id="sellerProfileName"
-                label={formatMessage({
-                    id: 'becomeSeller.sellerProfileNameText',
-                    defaultMessage: 'Store Name'
-                })}
-            >
-                <TextInput
+                            classes={{
+                                label: "font-normal text-left mb-2 text-[14px] block mb-2"
+                            }}
+                        >
+                            <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'
+                                })}
+                                placeholder={formatMessage({
+                                    id: 'becomeSeller.placeholder.registrationNumber',
+                                    defaultMessage: 'Your company registration number'
+                                })}
+                            />
+                        </Field>
+                    </>
+                )}
+                <Field
                     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.'
+                    label={formatMessage({
+                        id: 'becomeSeller.sellerProfileNameText',
+                        defaultMessage: 'Store Name'
                     })}
-                />
-            </Field>
-            <Field
-                id="storeURL"
-                label={formatMessage({
-                    id: 'becomeSeller.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.'
+                    classes={{
+                        label: "font-normal text-left mb-2 text-[14px] block mb-2"
+                    }}
+                >
+                    <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.'
+                        })}
+                        placeholder={formatMessage({
+                            id: 'becomeSeller.placeholder.storeTitle',
+                            defaultMessage: 'Your store title'
+                        })}
+                    />
+                </Field>
+                <Field
+                    id="storeURL"
+                    label={formatMessage({
+                        id: 'becomeSeller.storeURLText',
+                        defaultMessage: 'Store URL'
                     })}
+                    classes={{
+                        label: "font-normal text-left mb-2 text-[14px] block"
+                    }}
+                >
+                    <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.'
+                        })}
+                        placeholder={formatMessage({
+                            id: 'becomeSeller.placeholder.storeUrl',
+                            defaultMessage: 'Your store url'
+                        })}
+                    />
+                    <label className='text-left text-xs font-normal text-gray-400 mt-2'>
+                        <FormattedMessage
+                            id={'becomeSeller.urlNotes'}
+                            defaultMessage={`Please enter a valid Store URL (Ex: "tcg-collective").
+                                Your Store URL will be https://tcg.com/seller/tcg-collective.html`}
+                        />
+                    </label>
+                </Field>
+            </div>
+            <p className='text-left text-xs font-normal text-red-600 mt-6'>
+                <FormattedMessage
+                    id={'becomeSeller.requiredField'}
+                    defaultMessage={'* Required fields must be filled in.'}
                 />
-            </Field>
-            <SellerCountry
-                field="seller.country_id"
-                validate={isRequired}
-            />
-            <Field
-                id="addressLine1"
-                label={formatMessage({
-                    id: 'becomeSeller.addressLine1Text',
-                    defaultMessage: 'Address Line 1'
-                })}
-            >
-                <TextInput
+            </p>
+            <h3 className='text-[16px] leading-5 font-medium text-left mt-[60px] mb-[30px]'>
+                <FormattedMessage
+                    id={'becomeSeller.storeInformation'}
+                    defaultMessage={'Store Information'}
+                />
+            </h3>
+            <div className='md_grid md_grid-cols-2 md_gap-6'>
+                <Field
                     id="addressLine1"
-                    field="seller.address_line_1"
-                    validate={isRequired}
-                    validateOnBlur
-                    mask={value => value && value.trim()}
-                    maskOnBlur={true}
-                    data-cy="seller-addressline1"
-                    aria-label={formatMessage({
-                        id: 'global.addressLine1Required',
-                        defaultMessage: 'Address Line 1 is required'
+                    label={formatMessage({
+                        id: 'becomeSeller.addressLine1Text',
+                        defaultMessage: 'Address Line 1'
                     })}
-                />
-            </Field>
-            <Field
-                id="addressLine2"
-                label={formatMessage({
-                    id: 'becomeSeller.addressLine2Text',
-                    defaultMessage: 'Address Line 2'
-                })} optional={true}
-            >
-                <TextInput
+                    classes={{
+                        label: "font-normal text-left mb-2 text-[14px] block"
+                    }}
+                >
+                    <TextInput
+                        id="addressLine1"
+                        field="seller.address_line_1"
+                        validate={isRequired}
+                        validateOnBlur
+                        mask={value => value && value.trim()}
+                        maskOnBlur={true}
+                        data-cy="seller-addressline1"
+                        aria-label={formatMessage({
+                            id: 'global.addressLine1Required',
+                            defaultMessage: 'Address Line 1 is required'
+                        })}
+                        placeholder={formatMessage({
+                            id: 'becomeSeller.placeholder.addressLine1',
+                            defaultMessage: 'Address line 1'
+                        })}
+                    />
+                </Field>
+                <Field
                     id="addressLine2"
-                    field="seller.address_line_2"
-                    validateOnBlur
-                    mask={value => value && value.trim()}
-                    maskOnBlur={true}
-                    data-cy="seller-addressline2"
+                    label={formatMessage({
+                        id: 'becomeSeller.addressLine2Text',
+                        defaultMessage: 'Address Line 2'
+                    })} optional={true}
+                    classes={{
+                        label: "flex items-center justify-between text-colorDefault font-normal text-left mb-2 text-[14px] mb-2"
+                    }}
+                >
+                    <TextInput
+                        id="addressLine2"
+                        field="seller.address_line_2"
+                        validateOnBlur
+                        mask={value => value && value.trim()}
+                        maskOnBlur={true}
+                        data-cy="seller-addressline2"
+                        placeholder={formatMessage({
+                            id: 'becomeSeller.placeholder.addressLine2',
+                            defaultMessage: 'Address line 2'
+                        })}
+                    />
+                </Field>
+                <SellerCountry
+                    field="seller.country_id"
+                    validate={isRequired}
                 />
-            </Field>
-            <Field
-                id="city"
-                label={formatMessage({
-                    id: 'global.city',
-                    defaultMessage: 'City'
-                })}
-            >
-                <TextInput
+                <div>
+                    <Region
+                        fieldInput="seller.region"
+                        fieldSelect="seller.region_id"
+                        label={formatMessage({
+                            id: 'global.region',
+                            defaultMessage: 'State / Province'
+                        })}
+                        translationId="global.region"
+                        countryCodeField="seller.country_id"
+                        validate={isRequired}
+                        placeholder={formatMessage({
+                            id: 'global.region',
+                            defaultMessage: 'State / Province'
+                        })}
+                    />
+                </div>
+                <Field
                     id="city"
-                    field="seller.city"
+                    label={formatMessage({
+                        id: 'global.city',
+                        defaultMessage: 'City'
+                    })}
+                    classes={{
+                        label: "font-normal text-left mb-2 text-[14px] block mb-2"
+                    }}
+                >
+                    <TextInput
+                        id="city"
+                        field="seller.city"
+                        validate={isRequired}
+                        placeholder={formatMessage({
+                            id: 'becomeSeller.placeholder.city',
+                            defaultMessage: 'City'
+                        })}
+                    />
+                </Field>
+                <Postcode
                     validate={isRequired}
+                    fieldInput="seller.postcode"
+                    label={formatMessage({
+                        id: 'global.postcode',
+                        defaultMessage: 'Postal Code'
+                    })}
+                    placeholder={formatMessage({
+                        id: 'global.postcode',
+                        defaultMessage: 'Postal Code'
+                    })}
                 />
-            </Field>
-            <Region
-                fieldInput="seller.region"
-                fieldSelect="seller.region_id"
-                label={formatMessage({
-                    id: 'global.region',
-                    defaultMessage: 'State / Province'
-                })}
-                translationId="global.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
+                <Field
                     id="contactNumber"
-                    field="seller.contact_number"
-                    validate={isRequired}
-                />
-            </Field>
-            <div className={classes.subscribe}>
+                    label={formatMessage({
+                        id: 'global.contactNumber',
+                        defaultMessage: 'Contact Number'
+                    })}
+                    classes={{
+                        label: "font-normal text-left mb-2 text-[14px] block mb-2"
+                    }}
+                >
+                    <TextInput
+                        id="contactNumber"
+                        field="seller.contact_number"
+                        validate={isRequired}
+                        placeholder={formatMessage({
+                            id: 'becomeSeller.placeholder.phoneNumber',
+                            defaultMessage: 'Your phone number'
+                        })}
+                    />
+                </Field>
+            </div>
+            <div className={cn(classes.subscribe, 'ml-0 mt-5')}>
                 <Checkbox
                     field="become_seller_agreement"
                     id="becomeSellerAgreement"
@@ -303,10 +405,34 @@ const BecomeSeller = props => {
                     )}
                 />
             </div>
+            <p className='text-left text-xs font-normal text-red-600 mt-6'>
+                <FormattedMessage
+                    id={'becomeSeller.requiredField'}
+                    defaultMessage={'* Required fields must be filled in.'}
+                />
+            </p>
             <GoogleRecaptcha {...recaptchaWidgetProps} />
-            <div className={classes.actions}>
+            <div className="max-w-[490px] mx-auto relative mt-[60px] mb-6 block">
                 {submitButton}
             </div>
+            <div className='block'>
+                <span className='text-xs font-normal'>
+                    <FormattedMessage
+                        id={'createAccount.alreadyHaveAccount'}
+                        defaultMessage={"Already have an account ?"}
+                    />
+                </span>
+                {' '}
+                <Link
+                    to={'/sign-in'}
+                    className='text-xs font-normal text-blue-700 underline'
+                >
+                    <FormattedMessage
+                        id={'createAccount.SignInAsSeller'}
+                        defaultMessage={"Sign in as seller now "}
+                    />
+                </Link>
+            </div>
         </Form>
     ) : '';
 };
@@ -328,7 +454,7 @@ BecomeSeller.propTypes = {
 };
 
 BecomeSeller.defaultProps = {
-    onCancel: () => {},
+    onCancel: () => { },
     isCancelButtonHidden: true
 };
 

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

@@ -1,8 +1,8 @@
 .root {
     composes: gap-xs from global;
     composes: justify-items-stretch from global;
-    composes: px-sm from global;
-    composes: py-xs from global;
+    composes: px-[30px] from global;
+    composes: py-[30px] from global;
 }
 
 .message {
@@ -10,7 +10,7 @@
     composes: leading-tight from global;
     composes: p-xs from global;
     composes: rounded from global;
-    composes: text-sm from global;
+    composes: text-base from global;
 }
 
 /* TODO @TW: cannot compose */
@@ -43,4 +43,4 @@
 
 .subscribe {
     composes: -ml-1.5 from global;
-}
+}

package/src/components/BecomeSellerLink/becomeSellerLink.js

@@ -6,7 +6,6 @@ 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';
-
 import { BrowserPersistence } from '@magento/peregrine/lib/util';
 
 const storage = new BrowserPersistence();
@@ -35,6 +34,7 @@ const BecomeSellerLink = props => {
         <div className={classes.root} data-cy="BecomeSellerLink-root">
             <Link
                 to={resourceUrl('/become-seller')}
+                className='text-base leading-[16px]'
             >{formatMessage({
                 id: 'becomeSellerPage.title',
                 defaultMessage: 'Become a Seller'

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

@@ -2,12 +2,8 @@
     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

@@ -8,6 +8,7 @@ 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);
     const { becomeSellerProps } = useBecomeSellerPage(props);
@@ -23,7 +24,7 @@ const BecomeSellerPage = props => {
                     defaultMessage: 'Become a Seller'
                 })}
             </StoreTitle>
-            <div className={classes.contentContainer}>
+            <div className="lg_border-2 lg_border-solid lg_border-subtle lg_pb-md lg_rounded-md !border !border-gray-100 !rounded-lg">
                 <BecomeSeller {...becomeSellerProps} />
             </div>
         </div>

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

@@ -5,17 +5,9 @@
     composes: px-0 from global;
     composes: py-md from global;
     composes: text-center from global;
-    grid-template-columns: minmax(auto, 512px);
+    grid-template-columns: minmax(auto, 100%);
 }
 
 .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;
-}
+}