@riosst100/pwa-marketplace 1.8.9 → 1.9.0

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

@@ -0,0 +1,455 @@
+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

@@ -0,0 +1,52 @@
+.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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,12 @@
+.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

@@ -0,0 +1,65 @@
+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
+};