@riosst100/pwa-marketplace 1.2.5 → 1.2.7

package/src/components/SellerReviewItem/sellerReviewItem.js

@@ -1,61 +1,61 @@
-import React from 'react';
-import { Star1 } from 'iconsax-react';
-
-const SellerReviewItem = () => {
-    return (
-        <>
-            <div class="flex flex-col items-start gap-[10px] p-[25px] relative self-stretch w-full flex-[0_0_auto] bg-white rounded-[6px] border border-solid border-[#e6e9ea]">
-                <div class="flex flex-col items-start gap-[20px] relative self-stretch w-full flex-[0_0_auto]">
-                    <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
-                        <div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
-                            <div class="flex w-[40px] h-[40px] items-center justify-around gap-[10px] p-[10px] relative bg-[#4e31db] rounded-[30px]">
-                                <div class="relative w-fit font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">JD</div>
-                            </div>
-                            <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-fit mt-[-1.00px] font-medium text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">John Doe</div>
-                                <div class="relative w-fit font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">18 January 2024</div>
-                            </div>
-                        </div>
-                        <div class="flex xs_flex-col sm_flex-row items-start xs_gap-1 sm_gap-[20px] relative flex-[0_0_auto]">
-                            <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
-                                <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
-                                </div>
-                            </div>
-                            <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-[37px] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
-                                <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
-                                </div>
-                            </div>
-                            <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
-                                <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <p class="relative self-stretch font-normal text-[14px] tracking-[0] leading-[18px]">
-                        Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.
-                    </p>
-                </div>
-            </div>
-        </>
-    )
-}
-
+import React from 'react';
+import { Star1 } from 'iconsax-react';
+
+const SellerReviewItem = () => {
+    return (
+        <>
+            <div class="flex flex-col items-start gap-[10px] p-[25px] relative self-stretch w-full flex-[0_0_auto] bg-white rounded-[6px] border border-solid border-[#e6e9ea]">
+                <div class="flex flex-col items-start gap-[20px] relative self-stretch w-full flex-[0_0_auto]">
+                    <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
+                        <div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
+                            <div class="flex w-[40px] h-[40px] items-center justify-around gap-[10px] p-[10px] relative bg-[#4e31db] rounded-[30px]">
+                                <div class="relative w-fit font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">JD</div>
+                            </div>
+                            <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
+                                <div class="relative w-fit mt-[-1.00px] font-medium text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">John Doe</div>
+                                <div class="relative w-fit font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">18 January 2024</div>
+                            </div>
+                        </div>
+                        <div class="flex xs_flex-col sm_flex-row items-start xs_gap-1 sm_gap-[20px] relative flex-[0_0_auto]">
+                            <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
+                                <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
+                                <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
+                                </div>
+                            </div>
+                            <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
+                                <div class="relative w-[37px] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
+                                <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
+                                </div>
+                            </div>
+                            <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
+                                <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
+                                <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="relative self-stretch font-normal text-[14px] tracking-[0] leading-[18px]">
+                        Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.
+                    </p>
+                </div>
+            </div>
+        </>
+    )
+}
+
 export default SellerReviewItem;

package/src/components/SellerVerification/sellerVerification.js

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

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

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