@riosst100/pwa-marketplace 2.0.8 → 2.0.9

package/src/components/BecomeSeller/becomeSeller.js

@@ -24,7 +24,6 @@ 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({
@@ -46,22 +45,19 @@ const BecomeSeller = props => {
     } = talonProps;
     const { formatMessage } = useIntl();
     const classes = useStyle(defaultClasses, props.classes);
-
+    
     const submitButton = (
         <Button
-            className={cn(classes.submitButton, 'w-full')}
+            className={classes.submitButton}
             disabled={isDisabled}
             type="submit"
             priority="high"
             onKeyDown={handleEnterKeyPress}
             data-cy="BecomeSeller-submitButton"
-            classes={{
-                content: 'font-medium text-[16px] capitalize',
-            }}
         >
             <FormattedMessage
                 id={'becomeSeller.becomeSellerText'}
-                defaultMessage={'Register'}
+                defaultMessage={'Become a Seller'}
             />
         </Button>
     );
@@ -89,299 +85,201 @@ const BecomeSeller = props => {
             onSubmit={handleSubmit}
             onChange={handleChange}
         >
-            <h2 data-cy="BecomeSeller-title" className="capitalize text-lg font-medium mb-[70px]">
+            <h2 data-cy="BecomeSeller-title" className={classes.title}>
                 <FormattedMessage
                     id={'becomeSeller.becomeSellerText'}
-                    defaultMessage={'Register as Seller'}
+                    defaultMessage={'Become a Seller'}
                 />
             </h2>
             <FormError errors={Array.from(errors.values())} />
-            <h3 className='text-[16px] leading-5 font-medium text-left mb-[30px]'>
-                <FormattedMessage
-                    id={'becomeSeller.storeInformation'}
-                    defaultMessage={'Store Information'}
+            <Field
+                id="sellerType"
+                label={formatMessage({
+                    id: 'becomeSeller.sellerTypeText',
+                    defaultMessage: 'Seller Type'
+                })}
+            >
+                <Select
+                    field="seller.seller_type"
+                    id={classes.root}
+                    items={sellerTypeOptions}
                 />
-            </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
+            </Field>
+            {sellerType == "company" && (
+                <>
+                    <Field
+                        id="companyName"
+                        label={formatMessage({
+                            id: 'becomeSeller.companyNameText',
+                            defaultMessage: 'Company Name'
+                        })}
+                    >
+                        <TextInput
                             id="companyName"
-                            label={formatMessage({
-                                id: 'becomeSeller.companyNameText',
-                                defaultMessage: 'Company Name'
+                            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'
                             })}
-                            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
+                        />
+                    </Field>
+                    <Field
+                        id="companyRegistrationNumber"
+                        label={formatMessage({
+                            id: 'becomeSeller.companyRegistrationNumberText',
+                            defaultMessage: 'Company Registration Number'
+                        })}
+                    >
+                        <TextInput
                             id="companyRegistrationNumber"
-                            label={formatMessage({
-                                id: 'becomeSeller.companyRegistrationNumberText',
-                                defaultMessage: 'Company Registration Number'
+                            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'
                             })}
-                            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
+                        />
+                    </Field>
+                </>
+            )}
+            <Field
+                id="sellerProfileName"
+                label={formatMessage({
+                    id: 'becomeSeller.sellerProfileNameText',
+                    defaultMessage: 'Store Name'
+                })}
+            >
+                <TextInput
                     id="sellerProfileName"
-                    label={formatMessage({
-                        id: 'becomeSeller.sellerProfileNameText',
-                        defaultMessage: 'Store Name'
-                    })}
-                    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'
+                    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.'
                     })}
-                    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.'}
                 />
-            </p>
-            <h3 className='text-[16px] leading-5 font-medium text-left mt-[60px] mb-[30px]'>
-                <FormattedMessage
-                    id={'becomeSeller.storeInformation'}
-                    defaultMessage={'Store Information'}
+            </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.'
+                    })}
                 />
-            </h3>
-            <div className='md_grid md_grid-cols-2 md_gap-6'>
-                <Field
+            </Field>
+            <SellerCountry
+                field="seller.country_id"
+                validate={isRequired}
+            />
+            <Field
+                id="addressLine1"
+                label={formatMessage({
+                    id: 'becomeSeller.addressLine1Text',
+                    defaultMessage: 'Address Line 1'
+                })}
+            >
+                <TextInput
                     id="addressLine1"
-                    label={formatMessage({
-                        id: 'becomeSeller.addressLine1Text',
-                        defaultMessage: 'Address Line 1'
+                    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'
                     })}
-                    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
+                />
+            </Field>
+            <Field
+                id="addressLine2"
+                label={formatMessage({
+                    id: 'becomeSeller.addressLine2Text',
+                    defaultMessage: 'Address Line 2'
+                })} optional={true}
+            >
+                <TextInput
                     id="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="seller.address_line_2"
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="seller-addressline2"
                 />
-                <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
+            </Field>
+            <Field
+                id="city"
+                label={formatMessage({
+                    id: 'global.city',
+                    defaultMessage: 'City'
+                })}
+            >
+                <TextInput
                     id="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
+                    field="seller.city"
                     validate={isRequired}
-                    fieldInput="seller.postcode"
-                    label={formatMessage({
-                        id: 'global.postcode',
-                        defaultMessage: 'Postal Code'
-                    })}
-                    placeholder={formatMessage({
-                        id: 'global.postcode',
-                        defaultMessage: 'Postal Code'
-                    })}
                 />
-                <Field
+            </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
                     id="contactNumber"
-                    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')}>
+                    field="seller.contact_number"
+                    validate={isRequired}
+                />
+            </Field>
+            <div className={classes.subscribe}>
                 <Checkbox
                     field="become_seller_agreement"
                     id="becomeSellerAgreement"
@@ -405,34 +303,10 @@ 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="max-w-[490px] mx-auto relative mt-[60px] mb-6 block">
+            <div className={classes.actions}>
                 {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>
     ) : '';
 };
@@ -454,7 +328,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-[30px] from global;
-    composes: py-[30px] from global;
+    composes: px-sm from global;
+    composes: py-xs from global;
 }
 
 .message {
@@ -10,7 +10,7 @@
     composes: leading-tight from global;
     composes: p-xs from global;
     composes: rounded from global;
-    composes: text-base from global;
+    composes: text-sm from global;
 }
 
 /* TODO @TW: cannot compose */
@@ -43,4 +43,4 @@
 
 .subscribe {
     composes: -ml-1.5 from global;
-}
+}

package/src/components/BecomeSellerLink/becomeSellerLink.js

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

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

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

@@ -6,7 +6,7 @@ const CatalogFilter = () => {
         <>
             <div className='inline-flex flex-col items-start gap-[10px] px-0 py-[10px] w-full rounded-[6px] overflow-hidden border border-solid border-[#e6e9ea] shadow-[0px_0px_7px_2px_#cdcdcd40]'>
                 <div class="flex h-[18px] items-center justify-between px-[10px] py-0 relative self-stretch w-full">
-                    <div class="relative w-fit text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                    <div class="relative w-fit text-[16px] tracking-[0] leading-[20px] whitespace-nowrap">
                         Filter
                     </div>
                     <Filter color="#292D32" size={16} variant="Outline" className='stroke-[#292D32]' />
@@ -14,7 +14,7 @@ const CatalogFilter = () => {
                 <div class="inline-flex flex-col items-start gap-[10px] bg-white relative flex-[0_0_auto]">
                     <div class="flex-col justify-center inline-flex items-center relative flex-[0_0_auto]">
                         <div class="flex w-full cursor-pointer items-center justify-between p-[10px] relative flex-[0_0_auto] bg-white">
-                            <div class="relative w-fit font-medium text-base tracking-[0] leading-[18px] whitespace-nowrap">Category</div>
+                            <div class="relative w-fit font-semibold text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Category</div>
                             <ArrowSquareUp color="#292D32" size={14} variant="Outline" />
                         </div>
                         <hr className='w-full h-[1px]' />