@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

@@ -0,0 +1,401 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Form, Text } from 'informed';
+import { arrayOf, bool, func, number, shape, string } from 'prop-types';
+import { useCustomerForm } from '@magento/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useCustomerForm';
+
+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 Checkbox from '@magento/venia-ui/lib/components/Checkbox';
+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 defaultClasses from './customerForm.module.css';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+
+const CustomerForm = props => {
+    const {
+        afterSubmit,
+        classes: propClasses,
+        onCancel,
+        onSuccess,
+        shippingData
+    } = props;
+
+    const talonProps = useCustomerForm({
+        afterSubmit,
+        onCancel,
+        onSuccess,
+        shippingData
+    });
+    const {
+        errors,
+        handleCancel,
+        handleSubmit,
+        hasDefaultShipping,
+        initialValues,
+        isLoading,
+        isSaving,
+        isUpdate
+    } = talonProps;
+    const { formatMessage } = useIntl();
+    const classes = useStyle(defaultClasses, propClasses);
+
+    if (isLoading) {
+        return (
+            <LoadingIndicator>
+                <FormattedMessage
+                    id={'customerForm.loading'}
+                    defaultMessage={'Fetching Customer Details...'}
+                />
+            </LoadingIndicator>
+        );
+    }
+
+    const emailRow = !hasDefaultShipping ? (
+        <div className={classes.email}>
+            <Field
+                id="email"
+                label={formatMessage({
+                    id: 'global.email',
+                    defaultMessage: 'Email'
+                })}
+            >
+                <TextInput
+                    disabled={true}
+                    field="email"
+                    id="email"
+                    validate={isRequired}
+                />
+            </Field>
+        </div>
+    ) : null;
+
+    const formMessageRow = !hasDefaultShipping ? (
+        <div data-cy="CustomerForm-formMessage" className={classes.formMessage}>
+            <Message>
+                <FormattedMessage
+                    id={'customerForm.formMessage'}
+                    defaultMessage={
+                        'The shipping address you enter will be saved to your address book and set as your default for future purchases.'
+                    }
+                />
+            </Message>
+        </div>
+    ) : 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 = !hasDefaultShipping
+        ? formatMessage({
+            id: 'global.saveAndContinueButton',
+            defaultMessage: 'Save and Continue'
+        })
+        : isUpdate
+            ? formatMessage({
+                id: 'global.updateButton',
+                defaultMessage: 'Update'
+            })
+            : formatMessage({
+                id: 'global.addButton',
+                defaultMessage: 'Add'
+            });
+    const submitButtonProps = {
+        disabled: isSaving,
+        priority: !hasDefaultShipping ? 'normal' : 'high',
+        type: 'submit'
+    };
+
+    const defaultShippingElement = hasDefaultShipping ? (
+        <div className={classes.defaultShipping}>
+            <Checkbox
+                disabled={!!initialValues.default_shipping}
+                id="default_shipping"
+                data-cy="CustomerForm-defaultShipping"
+                field="default_shipping"
+                label={formatMessage({
+                    id: 'customerForm.defaultShipping',
+                    defaultMessage: 'Make this my default address'
+                })}
+            />
+        </div>
+    ) : (
+        <Text type="hidden" field="default_shipping" initialValue={true} />
+    );
+
+    const createErrorMessage = JSON.stringify(
+        errors.get('createCustomerAddressMutation')
+    );
+    const updateErrorMessage = JSON.stringify(
+        errors.get('updateCustomerAddressMutation')
+    );
+    const errorMessage = 'region_id is required for the specified country code';
+    const regionError =
+        createErrorMessage?.includes(errorMessage) ||
+        updateErrorMessage?.includes(errorMessage);
+
+    // errors
+    return (
+        <Fragment>
+            <FormError errors={Array.from(errors.values())} />
+            <Form
+                className={classes.root}
+                data-cy="CustomerForm-root"
+                initialValues={initialValues}
+                onSubmit={handleSubmit}
+            >
+                {formMessageRow}
+                {emailRow}
+                <div className={classes.firstname}>
+                    <Field
+                        id="customer_firstname"
+                        label={formatMessage({
+                            id: 'global.firstName',
+                            defaultMessage: 'First Name'
+                        })}
+                    >
+                        <TextInput
+                            disabled={!hasDefaultShipping}
+                            field="firstname"
+                            id="customer_firstname"
+                            data-cy="CustomerForm-firstName"
+                            validate={isRequired}
+                            aria-label={formatMessage({
+                                id: 'global.firstNameRequired',
+                                defaultMessage: 'First Name Required'
+                            })}
+                        />
+                    </Field>
+                </div>
+                <div className={classes.lastname}>
+                    <Field
+                        id="customer_lastname"
+                        label={formatMessage({
+                            id: 'global.lastName',
+                            defaultMessage: 'Last Name'
+                        })}
+                    >
+                        <TextInput
+                            disabled={!hasDefaultShipping}
+                            field="lastname"
+                            id="customer_lastname"
+                            data-cy="CustomerForm-lastName"
+                            validate={isRequired}
+                            aria-label={formatMessage({
+                                id: 'global.lastNameRequired',
+                                defaultMessage: 'Last Name Required'
+                            })}
+                        />
+                    </Field>
+                </div>
+                <div className={classes.country}>
+                    <Country
+                        validate={isRequired}
+                        data-cy="CustomerForm-country"
+                        aria-label={formatMessage({
+                            id: 'global.countryRequired',
+                            defaultMessage: 'Country Required'
+                        })}
+                    />
+                </div>
+                <div className={classes.street0}>
+                    <Field
+                        id="customer_street0"
+                        label={formatMessage({
+                            id: 'global.streetAddress',
+                            defaultMessage: 'Street Address'
+                        })}
+                    >
+                        <TextInput
+                            field="street[0]"
+                            validate={isRequired}
+                            id="customer_street0"
+                            data-cy="CustomerForm-street0"
+                            aria-label={formatMessage({
+                                id: 'global.streetAddressRequired',
+                                defaultMessage: 'Street Address Required'
+                            })}
+                        />
+                    </Field>
+                </div>
+                <div className={classes.street1}>
+                    <Field
+                        id="customer_street1"
+                        label={formatMessage({
+                            id: 'global.streetAddress2',
+                            defaultMessage: 'Street Address 2'
+                        })}
+                        optional={true}
+                    >
+                        <TextInput
+                            field="street[1]"
+                            id="customer_street1"
+                            data-cy="CustomerForm-street1"
+                        />
+                    </Field>
+                </div>
+                <div className={classes.city}>
+                    <Field
+                        id="customer_city"
+                        label={formatMessage({
+                            id: 'global.city',
+                            defaultMessage: 'City'
+                        })}
+                        aria-label={formatMessage({
+                            id: 'global.countryRequired',
+                            defaultMessage: 'Country Required'
+                        })}
+                    >
+                        <TextInput
+                            field="city"
+                            validate={isRequired}
+                            id="customer_city"
+                            data-cy="CustomerForm-city"
+                            aria-label={formatMessage({
+                                id: 'global.cityRequired',
+                                defaultMessage: 'City Required'
+                            })}
+                        />
+                    </Field>
+                </div>
+
+                <div className={classes.region}>
+                    <Region
+                        regionError={regionError}
+                        data-cy="CustomerForm-region"
+                        fieldInput={'region[region]'}
+                        fieldSelect={'region[region_id]'}
+                        optionValueKey={'id'}
+                        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
+                        validate={isRequired}
+                        data-cy="CustomerForm-postcode"
+                        aria-label={formatMessage({
+                            id: 'global.postalCodeRequired',
+                            defaultMessage: 'ZIP / Postal Code Required'
+                        })}
+                    />
+                </div>
+                <div className={classes.telephone}>
+                    <Field
+                        id="customer_telephone"
+                        label={formatMessage({
+                            id: 'global.phoneNumber',
+                            defaultMessage: 'Phone Number'
+                        })}
+                    >
+                        <TextInput
+                            field="telephone"
+                            validate={isRequired}
+                            id="customer_telephone"
+                            data-cy="CustomerForm-telephone"
+                            aria-label={formatMessage({
+                                id: 'global.phonenumberRequired',
+                                defaultMessage: 'Phone Number Required'
+                            })}
+                        />
+                    </Field>
+                </div>
+                {defaultShippingElement}
+                <div className={classes.buttons}>
+                    {cancelButton}
+                    <Button
+                        {...submitButtonProps}
+                        data-cy="CustomerForm-submitButton"
+                    >
+                        {submitButtonText}
+                    </Button>
+                </div>
+            </Form>
+        </Fragment>
+    );
+};
+
+export default CustomerForm;
+
+CustomerForm.defaultProps = {
+    shippingData: {
+        country: {
+            code: DEFAULT_COUNTRY_CODE
+        },
+        region: {
+            id: null
+        }
+    }
+};
+
+CustomerForm.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,
+        formMessage: string,
+        defaultShipping: string
+    }),
+    onCancel: func,
+    shippingData: shape({
+        city: string,
+        country: shape({
+            code: string.isRequired
+        }).isRequired,
+        default_shipping: bool,
+        email: string,
+        firstname: string,
+        id: number,
+        lastname: string,
+        postcode: string,
+        region: shape({
+            id: number
+        }).isRequired,
+        street: arrayOf(string),
+        telephone: string
+    })
+};

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

@@ -0,0 +1,58 @@
+.root {
+    composes: gap-x-xs 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;
+}
+
+.formMessage,
+.email,
+.country,
+.street0,
+.street1,
+.city,
+.region,
+.postcode,
+.telephone {
+    composes: field;
+}
+
+.defaultShipping {
+    composes: field;
+
+    composes: pt-xs from global;
+}
+
+.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;
+    }
+}