@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/overwrites/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.js

@@ -0,0 +1,190 @@
+import React, { Fragment, useEffect, useMemo, Suspense } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { shape, string, func } from 'prop-types';
+import { PlusSquare, AlertCircle as AlertCircleIcon } from 'react-feather';
+import { useToasts } from '@magento/peregrine';
+import { useAddressBook } from '@magento/peregrine/lib/talons/CheckoutPage/AddressBook/useAddressBook';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Button from '@magento/venia-ui/lib/components/Button';
+import defaultClasses from './addressBook.module.css';
+import AddressCard from './addressCard';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+
+const EditModal = React.lazy(() => import('../ShippingInformation/editModal'));
+
+const errorIcon = (
+    <Icon
+        src={AlertCircleIcon}
+        attrs={{
+            width: 18
+        }}
+    />
+);
+
+const AddressBook = props => {
+    const {
+        activeContent,
+        classes: propClasses,
+        toggleActiveContent,
+        onSuccess
+    } = props;
+
+    const talonProps = useAddressBook({
+        toggleActiveContent,
+        onSuccess
+    });
+
+    const {
+        activeAddress,
+        customerAddresses,
+        errorMessage,
+        handleAddAddress,
+        handleApplyAddress,
+        handleCancel,
+        handleEditAddress,
+        handleSelectAddress,
+        isLoading,
+        selectedAddress
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const [, { addToast }] = useToasts();
+
+    useEffect(() => {
+        if (errorMessage) {
+            addToast({
+                type: 'error',
+                icon: errorIcon,
+                message: errorMessage,
+                dismissable: true,
+                timeout: 10000
+            });
+        }
+    }, [addToast, errorMessage]);
+
+    const rootClass =
+        activeContent === 'addressBook' ? classes.root_active : classes.root;
+
+    const addAddressButton = useMemo(
+        () => (
+            <LinkButton
+                className={classes.addButton}
+                key="addAddressButton"
+                onClick={handleAddAddress}
+            >
+                <Icon
+                    size={24}
+                    src={PlusSquare}
+                    classes={{
+                        icon: classes.addIcon
+                    }}
+                />
+                <span className={classes.addText}>
+                    <FormattedMessage
+                        id={'addressBook.addNewAddresstext'}
+                        defaultMessage={'Add New Address'}
+                    />
+                </span>
+            </LinkButton>
+        ),
+        [classes.addButton, classes.addIcon, classes.addText, handleAddAddress]
+    );
+
+    const addressElements = useMemo(() => {
+        let defaultIndex;
+        const addresses = customerAddresses.map((address, index) => {
+            const isSelected = selectedAddress === address.id;
+
+            if (address.default_shipping) {
+                defaultIndex = index;
+            }
+
+            return (
+                <AddressCard
+                    address={address}
+                    isSelected={isSelected}
+                    key={address.id}
+                    onSelection={handleSelectAddress}
+                    onEdit={handleEditAddress}
+                />
+            );
+        });
+
+        // Position the default address first in the elements list
+        if (defaultIndex) {
+            [addresses[0], addresses[defaultIndex]] = [
+                addresses[defaultIndex],
+                addresses[0]
+            ];
+        }
+
+        return [...addresses, addAddressButton];
+    }, [
+        addAddressButton,
+        customerAddresses,
+        handleEditAddress,
+        handleSelectAddress,
+        selectedAddress
+    ]);
+
+    return (
+        <Fragment>
+            <div className={rootClass}>
+                <h1 aria-live="polite" className={classes.headerText}>
+                    <FormattedMessage
+                        id={'addressBook.headerText'}
+                        defaultMessage={'Change Shipping Information'}
+                    />
+                </h1>
+                <div className={classes.buttonContainer}>
+                    <Button
+                        disabled={isLoading}
+                        onClick={handleCancel}
+                        priority="low"
+                    >
+                        <FormattedMessage
+                            id={'addressBook.cancelButtonText'}
+                            defaultMessage={'Cancel'}
+                        />
+                    </Button>
+                    <Button
+                        disabled={isLoading}
+                        onClick={handleApplyAddress}
+                        priority="high"
+                    >
+                        <FormattedMessage
+                            id={'addressBook.applyButtonText'}
+                            defaultMessage={'Apply'}
+                        />
+                    </Button>
+                </div>
+
+                <div className={classes.content}>{addressElements}</div>
+            </div>
+            <Suspense fallback={null}>
+                <EditModal onSuccess={onSuccess} shippingData={activeAddress} />
+            </Suspense>
+        </Fragment>
+    );
+};
+
+export default AddressBook;
+
+AddressBook.propTypes = {
+    activeContent: string.isRequired,
+    classes: shape({
+        root: string,
+        root_active: string,
+        headerText: string,
+        buttonContainer: string,
+        content: string,
+        addButton: string,
+        addIcon: string,
+        addText: string
+    }),
+    onSuccess: func.isRequired,
+    toggleActiveContent: func.isRequired
+};

package/src/overwrites/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.module.css

@@ -0,0 +1,78 @@
+.root {
+    composes: hidden from global;
+}
+
+/* prettier-ignore */
+.root_active {
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: items-center from global;
+    composes: justify-between from global;
+
+    composes: lg_grid-cols-autoAuto from global;
+}
+
+.headerText {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: leading-tight from global;
+    composes: min-h-[3.5rem] from global;
+    composes: row-start-1 from global;
+    composes: text-subtle from global;
+}
+
+.buttonContainer {
+    composes: gap-x-xs from global;
+    composes: grid from global;
+    composes: grid-cols-2 from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: min-h-[3.5rem] from global;
+    composes: row-start-3 from global;
+
+    composes: xs_grid-cols-auto from global;
+    composes: lg_justify-end from global;
+    composes: lg_row-start-1 from global;
+}
+
+@media (max-width: 479px) {
+    /* TODO @TW: cannot compose */
+    .buttonContainer button {
+        min-width: 8rem;
+    }
+}
+
+.content {
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: border-t-0 from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: gap-xs from global;
+    composes: pt-0 from global;
+    composes: row-start-2 from global;
+    grid-auto-rows: minmax(6rem, max-content);
+
+    composes: lg_border-top-1 from global;
+    composes: lg_col-span-2 from global;
+    composes: lg_grid-cols-3 from global;
+    composes: lg_pt-md from global;
+}
+
+.addButton {
+    composes: border-2 from global;
+    composes: border-dashed from global;
+    composes: border-subtle from global;
+    composes: font-medium from global;
+    composes: rounded-md from global;
+    composes: text-brand-dark from global;
+    composes: text-sm from global;
+    transition: border-color 384ms var(--venia-global-anim-standard);
+
+    composes: focus_outline-none from global;
+    composes: focus_shadow-buttonFocus from global;
+
+    composes: hover_border-brand-dark from global;
+}

package/src/overwrites/venia-ui/lib/components/CheckoutPage/AddressBook/addressCard.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { shape, string, bool, func, arrayOf } from 'prop-types';
+import { Edit2 as EditIcon } from 'react-feather';
+import { useAddressCard } from '@magento/peregrine/lib/talons/CheckoutPage/AddressBook/useAddressCard';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import defaultClasses from './addressCard.module.css';
+
+const AddressCard = props => {
+    const {
+        address,
+        classes: propClasses,
+        isSelected,
+        onEdit,
+        onSelection
+    } = props;
+
+    const talonProps = useAddressCard({
+        address,
+        onEdit,
+        onSelection
+    });
+    const {
+        handleClick,
+        handleEditAddress,
+        handleKeyPress,
+        hasUpdate
+    } = talonProps;
+
+    const {
+        city,
+        country_code,
+        default_shipping,
+        firstname,
+        lastname,
+        postcode,
+        region: { region },
+        street
+    } = address;
+
+    const streetRows = street.map((row, index) => {
+        return <span key={index}>{row}</span>;
+    });
+
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const rootClass = isSelected
+        ? hasUpdate
+            ? classes.root_updated
+            : classes.root_selected
+        : classes.root;
+
+    const editButton = isSelected ? (
+        <button className={classes.editButton} onClick={handleEditAddress}>
+            <Icon
+                classes={{
+                    icon: classes.editIcon
+                }}
+                size={16}
+                src={EditIcon}
+            />
+        </button>
+    ) : null;
+
+    const defaultBadge = default_shipping ? (
+        <span className={classes.defaultBadge}>
+            <FormattedMessage
+                id={'addressCard.defaultText'}
+                defaultMessage={'Default'}
+            />
+        </span>
+    ) : null;
+
+    const nameString = `${firstname} ${lastname}`;
+    const additionalAddressString = `${city}, ${region} ${postcode} ${country_code}`;
+
+    return (
+        <div
+            className={rootClass}
+            onClick={handleClick}
+            onKeyPress={handleKeyPress}
+            role="button"
+            tabIndex="0"
+        >
+            {editButton}
+            {defaultBadge}
+            <span className={classes.name}>{nameString}</span>
+            {streetRows}
+            <span>{additionalAddressString}</span>
+        </div>
+    );
+};
+
+export default AddressCard;
+
+AddressCard.propTypes = {
+    address: shape({
+        city: string,
+        country_code: string,
+        default_shipping: bool,
+        firstname: string,
+        lastname: string,
+        postcode: string,
+        region: shape({
+            region_code: string,
+            region: string
+        }),
+        street: arrayOf(string)
+    }).isRequired,
+    classes: shape({
+        root: string,
+        root_selected: string,
+        root_updated: string,
+        editButton: string,
+        editIcon: string,
+        defaultBadge: string,
+        name: string,
+        address: string
+    }),
+    isSelected: bool.isRequired,
+    onEdit: func.isRequired,
+    onSelection: func.isRequired
+};

package/src/overwrites/venia-ui/lib/components/CheckoutPage/AddressBook/addressCard.module.css

@@ -0,0 +1,94 @@
+.root {
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: content-start from global;
+    composes: cursor-pointer from global;
+    composes: gap-y-2xs from global;
+    composes: grid from global;
+    composes: outline-none from global;
+    composes: px-5 from global;
+    composes: py-xs from global;
+    composes: relative from global;
+    composes: rounded-md from global;
+    composes: shadow-none from global;
+    composes: text-colorDefault from global;
+    transition: border-color 384ms var(--venia-global-anim-in);
+
+    composes: focus_shadow-buttonFocus from global;
+
+    composes: hover_border-brand-dark from global;
+
+    composes: lg_px-md from global;
+    composes: lg_py-xs from global;
+}
+
+.root_selected {
+    composes: root;
+
+    composes: border-brand-dark from global;
+    composes: cursor-default from global;
+}
+
+.root_updated {
+    composes: root_selected;
+    animation: flash var(--venia-global-anim-bounce) 640ms 2;
+}
+
+.defaultCard {
+    grid-area: 1 / 1;
+}
+
+.editButton {
+    composes: absolute from global;
+    composes: p-xs from global;
+    composes: right-0 from global;
+    composes: top-0 from global;
+
+    composes: lg_right-1.5 from global;
+    composes: lg_top-1.5 from global;
+}
+
+.editButton:hover {
+    --fill: rgb(var(--venia-brand-color-1-700));
+}
+
+.editIcon {
+    composes: stroke-brand-base from global;
+    fill: var(--fill, white);
+    transition: fill 384ms var(--venia-global-anim-standard);
+}
+
+.defaultBadge {
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-medium from global;
+    composes: mb-1 from global;
+    composes: px-sm from global;
+    composes: py-1.5 from global;
+    composes: rounded-md from global;
+    composes: text-xs from global;
+    composes: w-max from global;
+}
+
+.name {
+    composes: font-medium from global;
+}
+
+.address {
+    composes: gap-2xs from global;
+    composes: grid from global;
+}
+
+@keyframes flash {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 1;
+    }
+}

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

@@ -0,0 +1 @@
+export { default } from './addressBook';

package/src/overwrites/venia-ui/lib/components/CheckoutPage/BillingAddress/billingAddress.js

@@ -0,0 +1,213 @@
+import React, { useCallback, useMemo } from 'react';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { shape, string, func, bool } from 'prop-types';
+import { useIntl } from 'react-intl';
+import Country from '@magento/venia-ui/lib/components/Country';
+import Region from '@magento/venia-ui/lib/components/Region';
+import Postcode from '@magento/venia-ui/lib/components/Postcode';
+import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
+import Field from '@magento/venia-ui/lib/components/Field';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+
+import defaultClasses from './billingAddress.module.css';
+
+import { useBillingAddress } from '@magento/peregrine/lib/talons/CheckoutPage/BillingAddress/useBillingAddress';
+
+const BillingAddress = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        isBillingAddressSame,
+        initialValues,
+        shippingAddressCountry,
+        errors
+    } = useBillingAddress(props);
+
+    const { formatMessage } = useIntl();
+
+    /**
+     * Instead of defining classes={root: classes.FIELD_NAME}
+     */
+    const fieldClasses = useMemo(() => {
+        return [
+            'first_name',
+            'last_name',
+            'country',
+            'street1',
+            'street2',
+            'city',
+            'region',
+            'postal_code',
+            'phone_number'
+        ].reduce((acc, fieldName) => {
+            acc[fieldName] = { root: classes[fieldName] };
+
+            return acc;
+        }, {});
+    }, [classes]);
+
+    /**
+     * These 2 functions are wrappers around the `isRequired` function
+     * of `formValidators`. They perform validations only if the
+     * billing address is different from shipping address.
+     */
+    const isFieldRequired = useCallback((value, { isBillingAddressSame }) => {
+        if (isBillingAddressSame) {
+            /**
+             * Informed validator functions return `undefined` if
+             * validation is `true`
+             */
+            return undefined;
+        } else {
+            return isRequired(value);
+        }
+    }, []);
+
+    const billingAddressFieldsClassName = isBillingAddressSame
+        ? classes.billing_address_fields_root_hidden
+        : classes.billing_address_fields_root;
+
+    return (
+        <div>
+            <FormError
+                classes={{ root: classes.formErrorContainer }}
+                errors={Array.from(errors.values())}
+            />
+            <div className={classes.address_check}>
+                <Checkbox
+                    field="isBillingAddressSame"
+                    label={formatMessage({
+                        id: 'checkoutPage.billingAddressSame',
+                        defaultMessage:
+                            'Billing address same as shipping address'
+                    })}
+                    initialValue={initialValues.isBillingAddressSame}
+                />
+            </div>
+            <div className={billingAddressFieldsClassName}>
+                <Field
+                    id="firstName"
+                    classes={fieldClasses.first_name}
+                    label={formatMessage({
+                        id: 'global.firstName',
+                        defaultMessage: 'First Name'
+                    })}
+                >
+                    <TextInput
+                        id="firstName"
+                        field="firstName"
+                        validate={isFieldRequired}
+                        initialValue={initialValues.firstName}
+                    />
+                </Field>
+                <Field
+                    id="lastName"
+                    classes={fieldClasses.last_name}
+                    label={formatMessage({
+                        id: 'global.lastName',
+                        defaultMessage: 'Last Name'
+                    })}
+                >
+                    <TextInput
+                        id="lastName"
+                        field="lastName"
+                        validate={isFieldRequired}
+                        initialValue={initialValues.lastName}
+                    />
+                </Field>
+                <Country
+                    classes={fieldClasses.country}
+                    validate={isFieldRequired}
+                    initialValue={
+                        /**
+                         * If there is no initial value to start with
+                         * use the country from shipping address.
+                         */
+                        initialValues.country || shippingAddressCountry
+                    }
+                />
+                <Field
+                    id="street1"
+                    classes={fieldClasses.street1}
+                    label={formatMessage({
+                        id: 'global.streetAddress',
+                        defaultMessage: 'Street Address'
+                    })}
+                >
+                    <TextInput
+                        id="street1"
+                        field="street1"
+                        validate={isFieldRequired}
+                        initialValue={initialValues.street1}
+                    />
+                </Field>
+                <Field
+                    id="street2"
+                    classes={fieldClasses.street2}
+                    label={formatMessage({
+                        id: 'global.streetAddress2',
+                        defaultMessage: 'Street Address 2'
+                    })}
+                    optional={true}
+                >
+                    <TextInput
+                        id="street2"
+                        field="street2"
+                        initialValue={initialValues.street2}
+                    />
+                </Field>
+                <Field
+                    id="city"
+                    classes={fieldClasses.city}
+                    label={formatMessage({
+                        id: 'global.city',
+                        defaultMessage: 'City'
+                    })}
+                >
+                    <TextInput
+                        id="city"
+                        field="city"
+                        validate={isFieldRequired}
+                        initialValue={initialValues.city}
+                    />
+                </Field>
+                <Region
+                    classes={fieldClasses.region}
+                    initialValue={initialValues.region}
+                    validate={isFieldRequired}
+                />
+                <Postcode
+                    classes={fieldClasses.postal_code}
+                    validate={isFieldRequired}
+                    initialValue={initialValues.postcode}
+                />
+                <Field
+                    id="phoneNumber"
+                    classes={fieldClasses.phone_number}
+                    label={formatMessage({
+                        id: 'global.phoneNumber',
+                        defaultMessage: 'Phone Number'
+                    })}
+                >
+                    <TextInput
+                        id="phoneNumber"
+                        field="phoneNumber"
+                        validate={isFieldRequired}
+                        initialValue={initialValues.phoneNumber}
+                    />
+                </Field>
+            </div>
+        </div>
+    );
+};
+
+BillingAddress.propTypes = {
+    classes: shape({ root: string }),
+    shouldSubmit: bool.isRequired,
+    onBillingAddressChangedError: func,
+    onBillingAddressChangedSuccess: func
+};
+
+export default BillingAddress;