@riosst100/pwa-marketplace 2.0.8 → 2.0.9

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js

@@ -1,455 +0,0 @@
-import React, { Fragment, useEffect, useRef } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { Form } from 'informed';
-import { func, shape, string, arrayOf, number } from 'prop-types';
-import { AlertCircle } from 'react-feather';
-import { useGuestForm } from '@magento/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm';
-import { useToasts } from '@magento/peregrine';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
-import Button from '@magento/venia-ui/lib/components/Button';
-import Country from '@magento/venia-ui/lib/components/Country';
-import Field, { Message } from '@magento/venia-ui/lib/components/Field';
-import FormError from '@magento/venia-ui/lib/components/FormError';
-import Region from '@magento/venia-ui/lib/components/Region';
-import Postcode from '@magento/venia-ui/lib/components/Postcode';
-import TextInput from '@magento/venia-ui/lib/components/TextInput';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import defaultClasses from './guestForm.module.css';
-
-const AlertCircleIcon = <Icon src={AlertCircle} attrs={{ width: 20 }} />;
-
-const GuestForm = props => {
-    const {
-        afterSubmit,
-        classes: propClasses,
-        onCancel,
-        onSuccess,
-        shippingData,
-        toggleSignInContent,
-        setGuestSignInUsername
-    } = props;
-
-    const talonProps = useGuestForm({
-        afterSubmit,
-        onCancel,
-        onSuccess,
-        shippingData,
-        toggleSignInContent,
-        setGuestSignInUsername
-    });
-    const {
-        errors,
-        handleCancel,
-        handleSubmit,
-        initialValues,
-        isSaving,
-        isUpdate,
-        handleValidateEmail,
-        showSignInToast,
-        handleToastAction
-    } = talonProps;
-
-    const formApiRef = useRef();
-    const getFormApi = api => {
-        formApiRef.current = api;
-    };
-
-    const [, { addToast }] = useToasts();
-
-    const { formatMessage } = useIntl();
-    const classes = useStyle(defaultClasses, propClasses);
-
-    const guestEmailMessage = !isUpdate ? (
-        <Message>
-            <FormattedMessage
-                id={'guestForm.emailMessage'}
-                defaultMessage={
-                    'Set a password at the end of guest checkout to create an account in one easy step.'
-                }
-            />
-        </Message>
-    ) : null;
-
-    const cancelButton = isUpdate ? (
-        <Button
-            disabled={isSaving}
-            onClick={handleCancel}
-            priority="low"
-            classes={{
-                content: 'capitalize font-medium'
-            }}
-        >
-            <FormattedMessage
-                id={'global.cancelButton'}
-                defaultMessage={'Cancel'}
-            />
-        </Button>
-    ) : null;
-
-    const submitButtonText = isUpdate
-        ? formatMessage({
-            id: 'global.updateButton',
-            defaultMessage: 'Update'
-        })
-        : formatMessage({
-            id: 'guestForm.continueToNextStep',
-            defaultMessage: 'Continue to Shipping Method'
-        });
-    const submitButtonProps = {
-        disabled: isSaving,
-        priority: isUpdate ? 'high' : 'normal',
-        type: 'submit'
-    };
-
-    useEffect(() => {
-        if (showSignInToast) {
-            addToast({
-                type: 'info',
-                icon: AlertCircleIcon,
-                message: formatMessage({
-                    id: 'checkoutPage.suggestSignInMessage',
-                    defaultMessage:
-                        'The email you provided is associated with an existing Venia account. Would you like to sign into this account?'
-                }),
-                timeout: false,
-                dismissable: true,
-                hasDismissAction: true,
-                dismissActionText: formatMessage({
-                    id: 'checkoutPage.suggestSignInDeclineMessage',
-                    defaultMessage: 'No, thanks'
-                }),
-                actionText: formatMessage({
-                    id: 'checkoutPage.suggestSignInConfirmMessage',
-                    defaultMessage: 'Yes, sign in'
-                }),
-                onAction: removeToast =>
-                    handleToastAction(
-                        removeToast,
-                        formApiRef.current.getValue('email')
-                    )
-            });
-        }
-    }, [addToast, formatMessage, showSignInToast, handleToastAction]);
-
-    const shippingAddressError = JSON.stringify(
-        errors.get('setGuestShippingMutation')
-    );
-
-    const errorMessage = 'Region is required';
-    const regionError = shippingAddressError?.includes(errorMessage);
-
-    return (
-        <Fragment>
-            <FormError errors={Array.from(errors.values())} />
-            <Form
-                className={classes.root}
-                data-cy="GuestForm-root"
-                initialValues={initialValues}
-                onSubmit={handleSubmit}
-                getApi={getFormApi}
-            >
-                <div className={classes.email}>
-                    <Field
-                        id="email"
-                        label={formatMessage({
-                            id: 'global.email',
-                            defaultMessage: 'Email'
-                        })}
-                    >
-                        <TextInput
-                            autoComplete={formatMessage({
-                                id: 'shippingForm.shippingEmail',
-                                defaultMessage: 'Shipping Email'
-                            })}
-                            field="email"
-                            id="email"
-                            data-cy="GuestForm-email"
-                            validate={isRequired}
-                            aria-label={formatMessage({
-                                id: 'global.emailRequired',
-                                defaultMessage: 'Email Required'
-                            })}
-                            onBlur={() =>
-                                handleValidateEmail(
-                                    formApiRef.current.getValue('email')
-                                )
-                            }
-                            onPaste={e => {
-                                const text = e.clipboardData.getData(
-                                    'text/plain'
-                                );
-                                handleValidateEmail(text);
-                            }}
-                        />
-                        {guestEmailMessage}
-                    </Field>
-                </div>
-                <div className={classes.firstname}>
-                    <Field
-                        id="firstname"
-                        label={formatMessage({
-                            id: 'global.firstName',
-                            defaultMessage: 'First Name'
-                        })}
-                    >
-                        <TextInput
-                            autoComplete={formatMessage({
-                                id: 'global.firstName',
-                                defaultMessage: 'First Name'
-                            })}
-                            field="firstname"
-                            id="firstname"
-                            data-cy="GuestForm-firstName"
-                            validate={isRequired}
-                            aria-label={formatMessage({
-                                id: 'global.firstNameRequired',
-                                defaultMessage: 'First Name Required'
-                            })}
-                        />
-                    </Field>
-                </div>
-                <div className={classes.lastname}>
-                    <Field
-                        id="lastname"
-                        label={formatMessage({
-                            id: 'global.lastName',
-                            defaultMessage: 'Last Name'
-                        })}
-                    >
-                        <TextInput
-                            autoComplete={formatMessage({
-                                id: 'global.lastName',
-                                defaultMessage: 'Last Name'
-                            })}
-                            field="lastname"
-                            id="lastname"
-                            data-cy="GuestForm-lastName"
-                            validate={isRequired}
-                            aria-label={formatMessage({
-                                id: 'global.lastNameRequired',
-                                defaultMessage: 'Last Name Required'
-                            })}
-                        />
-                    </Field>
-                </div>
-                <div className={classes.country}>
-                    <Country
-                        autoComplete={formatMessage({
-                            id: 'country.label',
-                            defaultMessage: 'Country'
-                        })}
-                        validate={isRequired}
-                        data-cy="GuestForm-country"
-                        aria-label={formatMessage({
-                            id: 'global.countryRequired',
-                            defaultMessage: 'Country Required'
-                        })}
-                    />
-                </div>
-                <div className={classes.street0}>
-                    <Field
-                        id="street0"
-                        label={formatMessage({
-                            id: 'global.streetAddress',
-                            defaultMessage: 'Street Address'
-                        })}
-                    >
-                        <TextInput
-                            autoComplete={formatMessage({
-                                id: 'global.streetAddress',
-                                defaultMessage: 'Street Address'
-                            })}
-                            field="street[0]"
-                            id="street0"
-                            data-cy="GuestForm-street0"
-                            validate={isRequired}
-                            aria-label={formatMessage({
-                                id: 'global.streetAddressRequired',
-                                defaultMessage: 'Street Address Required'
-                            })}
-                        />
-                    </Field>
-                </div>
-                <div className={classes.street1}>
-                    <Field
-                        id="street1"
-                        label={formatMessage({
-                            id: 'global.streetAddress2',
-                            defaultMessage: 'Street Address 2'
-                        })}
-                        optional={true}
-                    >
-                        <TextInput
-                            autoComplete={formatMessage({
-                                id: 'global.streetAddress2',
-                                defaultMessage: 'Street Address 2'
-                            })}
-                            field="street[1]"
-                            id="street1"
-                            data-cy="GuestForm-street1"
-                        />
-                    </Field>
-                </div>
-                <div className={classes.city}>
-                    <Field
-                        id="city"
-                        label={formatMessage({
-                            id: 'global.city',
-                            defaultMessage: 'City'
-                        })}
-                    >
-                        <TextInput
-                            autoComplete={formatMessage({
-                                id: 'global.city',
-                                defaultMessage: 'City'
-                            })}
-                            field="city"
-                            id="city"
-                            data-cy="GuestForm-city"
-                            validate={isRequired}
-                            aria-label={formatMessage({
-                                id: 'global.cityRequired',
-                                defaultMessage: 'City Required'
-                            })}
-                        />
-                    </Field>
-                </div>
-                <div className={classes.region}>
-                    <Region
-                        regionError={regionError}
-                        autoComplete={formatMessage({
-                            id: 'region.label',
-                            defaultMessage: 'State'
-                        })}
-                        fieldInput={'region[region]'}
-                        fieldSelect={'region[region_id]'}
-                        optionValueKey={'id'}
-                        data-cy="GuestForm-region"
-                        aria-label={formatMessage({
-                            id: 'global.stateRequired',
-                            defaultMessage: 'State Required'
-                        })}
-                    />
-                    {regionError ? (
-                        <Message>
-                            <div className={classes.regionError}>
-                                <FormattedMessage
-                                    id={'validation.isRequired'}
-                                    defaultMessage={'isRequired'}
-                                />
-                            </div>
-                        </Message>
-                    ) : (
-                        ''
-                    )}
-                </div>
-                <div className={classes.postcode}>
-                    <Postcode
-                        autoComplete={formatMessage({
-                            id: 'postcode.label',
-                            defaultMessage: 'ZIP / Postal Code'
-                        })}
-                        validate={isRequired}
-                        data-cy="GuestForm-postcode"
-                        aria-label={formatMessage({
-                            id: 'global.postalCodeRequired',
-                            defaultMessage: 'ZIP / Postal Code Required'
-                        })}
-                    />
-                </div>
-                <div className={classes.telephone}>
-                    <Field
-                        id="telephone"
-                        label={formatMessage({
-                            id: 'global.phoneNumber',
-                            defaultMessage: 'Phone Number'
-                        })}
-                    >
-                        <TextInput
-                            autoComplete={formatMessage({
-                                id: 'global.phoneNumber',
-                                defaultMessage: 'Phone Number'
-                            })}
-                            field="telephone"
-                            id="telephone"
-                            data-cy="GuestForm-telephone"
-                            validate={isRequired}
-                            aria-label={formatMessage({
-                                id: 'global.phonenumberRequired',
-                                defaultMessage: 'Phone Number Required'
-                            })}
-                        />
-                    </Field>
-                </div>
-                <div className={classes.buttons}>
-                    {cancelButton}
-                    <Button
-                        {...submitButtonProps}
-                        data-cy="GuestForm-submitButton"
-                        classes={{
-                            content: 'gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center capitalize font-medium'
-                        }}
-                    >
-                        {submitButtonText}
-                    </Button>
-                </div>
-            </Form>
-        </Fragment>
-    );
-};
-
-export default GuestForm;
-
-GuestForm.defaultProps = {
-    shippingData: {
-        country: {
-            code: DEFAULT_COUNTRY_CODE
-        },
-        region: {
-            code: ''
-        }
-    }
-};
-
-GuestForm.propTypes = {
-    afterSubmit: func,
-    classes: shape({
-        root: string,
-        field: string,
-        email: string,
-        firstname: string,
-        lastname: string,
-        country: string,
-        street0: string,
-        street1: string,
-        city: string,
-        region: string,
-        postcode: string,
-        telephone: string,
-        buttons: string,
-        submit: string,
-        submit_update: string
-    }),
-    onCancel: func,
-    onSuccess: func.isRequired,
-    shippingData: shape({
-        city: string,
-        country: shape({
-            code: string.isRequired
-        }).isRequired,
-        email: string,
-        firstname: string,
-        lastname: string,
-        postcode: string,
-        region: shape({
-            region_id: number,
-            region: string
-        }).isRequired,
-        street: arrayOf(string),
-        telephone: string
-    }),
-    toggleSignInContent: func.isRequired,
-    setGuestSignInUsername: func.isRequired
-};

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css

@@ -1,52 +0,0 @@
-.root {
-    composes: gap-x-2xs from global;
-    composes: gap-y-sm from global;
-    composes: grid from global;
-    composes: grid-cols-2 from global;
-    composes: w-full from global;
-}
-
-.field {
-    composes: col-end-span2 from global;
-}
-
-.email,
-.country,
-.street0,
-.street1,
-.city,
-.region,
-.postcode,
-.telephone {
-    composes: field;
-}
-
-.firstname,
-.lastname {
-    composes: col-end-span1 from global;
-}
-
-.buttons {
-    composes: field;
-
-    composes: gap-xs from global;
-    composes: grid from global;
-    composes: grid-flow-col from global;
-    composes: justify-self-center from global;
-    composes: p-xs from global;
-}
-
-.regionError {
-    color: brown;
-    font-weight: 600;
-}
-
-@media (max-width: 959px) {
-    .firstname {
-        grid-column: 1 / span 2;
-    }
-
-    .lastname {
-        grid-column: 1 / span 2;
-    }
-}

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/index.js

@@ -1,3 +0,0 @@
-export { default } from './addressForm';
-export { default as GuestForm } from './guestForm';
-export { default as CustomerForm } from './customerForm';

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingInformation/card.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import { arrayOf, shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './card.module.css';
-
-const Card = props => {
-    const { classes: propClasses, shippingData } = props;
-    const {
-        city,
-        country: { label: country },
-        email,
-        firstname,
-        lastname,
-        postcode,
-        region: { region },
-        street,
-        telephone
-    } = shippingData;
-
-    const streetRows = street.map((row, index) => {
-        return <span key={index}>{row}</span>;
-    });
-
-    const classes = useStyle(defaultClasses, propClasses);
-
-    const nameString = `${firstname} ${lastname}`;
-    const additionalAddressString = `${city}, ${region} ${postcode} ${country}`;
-
-    return (
-        <div className={classes.root} data-cy="Card-root">
-            <span>{email}</span>
-            <span>{nameString}</span>
-            <span>{telephone}</span>
-            <div className={classes.address}>
-                {streetRows}
-                <span>{additionalAddressString}</span>
-            </div>
-        </div>
-    );
-};
-
-export default Card;
-
-Card.propTypes = {
-    classes: shape({
-        root: string,
-        address: string,
-        area: string
-    }),
-    shippingData: shape({
-        city: string.isRequired,
-        country: shape({
-            label: string.isRequired
-        }).isRequired,
-        email: string.isRequired,
-        firstname: string.isRequired,
-        lastname: string.isRequired,
-        postcode: string.isRequired,
-        region: shape({
-            region: string.isRequired
-        }).isRequired,
-        street: arrayOf(string).isRequired,
-        telephone: string.isRequired
-    }).isRequired
-};

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingInformation/card.module.css

@@ -1,12 +0,0 @@
-.root {
-    composes: gap-y-2xs from global;
-    composes: grid from global;
-    composes: pt-xs from global;
-    composes: text-colorDefault from global;
-}
-
-.address {
-    composes: gap-2xs from global;
-    composes: grid from global;
-    composes: pt-xs from global;
-}

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { object, shape, string } from 'prop-types';
-import { X as CloseIcon } from 'react-feather';
-import { useEditModal } from '@magento/peregrine/lib/talons/CheckoutPage/ShippingInformation/useEditModal';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import { Portal } from '@magento/venia-ui/lib/components/Portal';
-import AddressForm from './AddressForm';
-import defaultClasses from './editModal.module.css';
-
-const EditModal = props => {
-    const { classes: propClasses, shippingData, onSuccess } = props;
-    const talonProps = useEditModal();
-    const { handleClose, isOpen } = talonProps;
-
-    const classes = useStyle(defaultClasses, propClasses);
-    const rootClass = isOpen ? classes.root_open : classes.root;
-
-    // Unmount the form to force a reset back to original values on close
-    const bodyElement = isOpen ? (
-        <AddressForm
-            onSuccess={onSuccess}
-            afterSubmit={handleClose}
-            onCancel={handleClose}
-            shippingData={shippingData}
-        />
-    ) : null;
-
-    return (
-        <Portal>
-            <aside className={rootClass}>
-                <div className={classes.header}>
-                    <span className={classes.headerText}>
-                        <FormattedMessage
-                            id={'checkoutPage.editShippingInfo'}
-                            defaultMessage={'Edit Shipping Information'}
-                        />
-                    </span>
-                    <button
-                        className={classes.closeButton}
-                        onClick={handleClose}
-                    >
-                        <Icon src={CloseIcon} />
-                    </button>
-                </div>
-                <div className={classes.body}>{bodyElement}</div>
-            </aside>
-        </Portal>
-    );
-};
-
-export default EditModal;
-
-EditModal.propTypes = {
-    classes: shape({
-        root: string,
-        root_open: string,
-        body: string,
-        header: string,
-        headerText: string
-    }),
-    shippingData: object
-};