@riosst100/pwa-marketplace 1.8.8 → 1.9.0

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;

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

@@ -0,0 +1,36 @@
+.billing_address_fields_root {
+    composes: gap-x-xs from global;
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
+}
+
+.billing_address_fields_root_hidden {
+    composes: h-0 from global;
+    composes: invisible from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+}
+
+.formErrorContainer {
+    composes: pt-sm from global;
+}
+
+.first_name,
+.last_name {
+    composes: col-end-span2 from global;
+
+    composes: lg_col-end-span1 from global;
+}
+
+.country,
+.street1,
+.street2,
+.address_check,
+.city,
+.region,
+.postal_code,
+.phone_number {
+    composes: col-end-span2 from global;
+}

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

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

package/src/overwrites/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { bool, func, shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { useGuestSignIn } from '@magento/peregrine/lib/talons/CheckoutPage/GuestSignIn/useGuestSignIn';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CreateAccount from '@magento/venia-ui/lib/components/CreateAccount';
+import ForgotPassword from '@magento/venia-ui/lib/components/ForgotPassword';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import SignIn from '@magento/venia-ui/lib/components/SignIn';
+import defaultClasses from './guestSignIn.module.css';
+
+const GuestSignIn = props => {
+    const { isActive, toggleActiveContent, initialValues } = props;
+
+    const talonProps = useGuestSignIn({ toggleActiveContent });
+    const {
+        handleBackToCheckout,
+        toggleCreateAccountView,
+        toggleForgotPasswordView,
+        view
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const rootClass = isActive ? classes.root : classes.root_hidden;
+
+    let content;
+    if (view === 'SIGNIN') {
+        content = (
+            <SignIn
+                classes={{ modal_active: undefined, root: classes.signInRoot }}
+                showCreateAccount={toggleCreateAccountView}
+                showForgotPassword={toggleForgotPasswordView}
+                initialValues={initialValues}
+            />
+        );
+    } else if (view === 'FORGOT_PASSWORD') {
+        content = (
+            <ForgotPassword
+                classes={{ root: classes.forgotPasswordRoot }}
+                onCancel={toggleForgotPasswordView}
+            />
+        );
+    } else if (view === 'CREATE_ACCOUNT') {
+        content = (
+            <CreateAccount
+                classes={{ root: classes.createAccountRoot }}
+                isCancelButtonHidden={false}
+                onCancel={toggleCreateAccountView}
+            />
+        );
+    }
+
+    return (
+        <div className={rootClass}>
+            <h1 aria-live="polite" className={classes.header}>
+                <FormattedMessage
+                    id="checkoutPage.guestSignIn.header"
+                    defaultMessage="Account Sign-in"
+                />
+            </h1>
+            <div className={classes.contentContainer}>
+                {content}
+                <LinkButton onClick={handleBackToCheckout}>
+                    <FormattedMessage
+                        id="checkoutPage.guestSignIn.backToCheckout"
+                        defaultMessage="Back to Checkout"
+                    />
+                </LinkButton>
+            </div>
+        </div>
+    );
+};
+
+export default GuestSignIn;
+
+GuestSignIn.propTypes = {
+    classes: shape({
+        root: string,
+        root_hidden: string,
+        header: string,
+        contentContainer: string,
+        signInRoot: string,
+        forgotPasswordRoot: string,
+        createAccountRoot: string
+    }),
+    isActive: bool.isRequired,
+    toggleActiveContent: func.isRequired,
+    initialValues: shape({
+        email: string.isRequired
+    })
+};

package/src/overwrites/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.module.css

@@ -0,0 +1,55 @@
+.root {
+    composes: grid from global;
+    grid-template-columns: minmax(auto, 512px);
+    composes: justify-center from global;
+    composes: gap-y-md from global;
+    composes: text-center from global;
+}
+
+.root_hidden {
+    composes: root;
+
+    composes: hidden from global;
+}
+
+.header {
+    composes: font-serif from global;
+}
+
+.contentContainer {
+    composes: border-0 from global;
+    composes: p-0 from global;
+    composes: rounded-md from global;
+
+    composes: lg_border-2 from global;
+    composes: lg_border-solid from global;
+    composes: lg_border-subtle from global;
+    composes: lg_p-md from global;
+}
+
+.signInRoot {
+    composes: root from '@magento/venia-ui/lib/components/SignIn/signIn.module.css';
+
+    composes: px-0 from global;
+    composes: py-xs from global;
+
+    composes: lg_p-0 from global;
+}
+
+.forgotPasswordRoot {
+    composes: root from '@magento/venia-ui/lib/components/ForgotPassword/forgotPassword.module.css';
+
+    composes: px-0 from global;
+    composes: py-xs from global;
+
+    composes: lg_p-0 from global;
+}
+
+.createAccountRoot {
+    composes: root from '@magento/venia-ui/lib/components/CreateAccount/createAccount.module.css';
+
+    composes: px-0 from global;
+    composes: py-xs from global;
+
+    composes: lg_p-0 from global;
+}

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

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

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ItemsReview/__fixtures__/cartItems.js

@@ -0,0 +1,102 @@
+export default {
+    cart: {
+        id: 'GXtkt675mPd3gYuvhWLd5iw5ekVoDj1b',
+        total_quantity: 7,
+        items: [
+            {
+                id: '29568',
+                product: {
+                    id: 1093,
+                    name: 'Jillian Top',
+                    thumbnail: {
+                        url:
+                            'https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg',
+                        __typename: 'ProductImage'
+                    },
+                    __typename: 'ConfigurableProduct'
+                },
+                quantity: 3,
+                configurable_options: [
+                    {
+                        configurable_product_option_uid: 179,
+                        option_label: 'Fashion Color',
+                        configurable_product_option_value_uid: 18,
+                        value_label: 'Peach',
+                        __typename: 'SelectedConfigurableOption'
+                    },
+                    {
+                        configurable_product_option_uid: 182,
+                        option_label: 'Fashion Size',
+                        configurable_product_option_value_uid: 27,
+                        value_label: 'M',
+                        __typename: 'SelectedConfigurableOption'
+                    }
+                ],
+                __typename: 'ConfigurableCartItem'
+            },
+            {
+                id: '29570',
+                product: {
+                    id: 1115,
+                    name: 'Juno Sweater',
+                    thumbnail: {
+                        url:
+                            'https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg',
+                        __typename: 'ProductImage'
+                    },
+                    __typename: 'ConfigurableProduct'
+                },
+                quantity: 1,
+                configurable_options: [
+                    {
+                        configurable_product_option_uid: 179,
+                        option_label: 'Fashion Color',
+                        configurable_product_option_value_uid: 21,
+                        value_label: 'Rain',
+                        __typename: 'SelectedConfigurableOption'
+                    },
+                    {
+                        configurable_product_option_uid: 182,
+                        option_label: 'Fashion Size',
+                        configurable_product_option_value_uid: 29,
+                        value_label: 'XS',
+                        __typename: 'SelectedConfigurableOption'
+                    }
+                ],
+                __typename: 'ConfigurableCartItem'
+            },
+            {
+                id: '29572',
+                product: {
+                    id: 1152,
+                    name: 'Angelina Tank Dress',
+                    thumbnail: {
+                        url:
+                            'https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg',
+                        __typename: 'ProductImage'
+                    },
+                    __typename: 'ConfigurableProduct'
+                },
+                quantity: 3,
+                configurable_options: [
+                    {
+                        configurable_product_option_uid: 179,
+                        option_label: 'Fashion Color',
+                        configurable_product_option_value_uid: 20,
+                        value_label: 'Lilac',
+                        __typename: 'SelectedConfigurableOption'
+                    },
+                    {
+                        configurable_product_option_uid: 182,
+                        option_label: 'Fashion Size',
+                        configurable_product_option_value_uid: 26,
+                        value_label: 'L',
+                        __typename: 'SelectedConfigurableOption'
+                    }
+                ],
+                __typename: 'ConfigurableCartItem'
+            }
+        ],
+        __typename: 'Cart'
+    }
+};

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

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

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ItemsReview/item.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import ProductOptions from '@magento/venia-ui/lib/components/LegacyMiniCart/productOptions';
+import Image from '@magento/venia-ui/lib/components/Image';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import configuredVariant from '@magento/peregrine/lib/util/configuredVariant';
+
+import defaultClasses from './item.module.css';
+
+const Item = props => {
+    const {
+        classes: propClasses,
+        product,
+        quantity,
+        configurable_options,
+        isHidden,
+        configurableThumbnailSource
+    } = props;
+    const classes = useStyle(defaultClasses, propClasses);
+    const className = isHidden ? classes.root_hidden : classes.root_visible;
+    const configured_variant = configuredVariant(configurable_options, product);
+    return (
+        <div className={className}>
+            <Image
+                alt={product.name}
+                classes={{ root: classes.thumbnail }}
+                width={100}
+                resource={
+                    configurableThumbnailSource === 'itself' &&
+                        configured_variant
+                        ? configured_variant.thumbnail.url
+                        : product.thumbnail.url
+                }
+            />
+            <span className={classes.name}>{product.name}</span>
+            <ProductOptions
+                options={configurable_options}
+                classes={{
+                    options: classes.options
+                }}
+            />
+            <span className={classes.quantity}>
+                <FormattedMessage
+                    id={'checkoutPage.quantity'}
+                    defaultMessage={'Qty : {quantity}'}
+                    values={{ quantity }}
+                />
+            </span>
+        </div>
+    );
+};
+
+export default Item;

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ItemsReview/item.module.css

@@ -0,0 +1,60 @@
+.root {
+    composes: gap-x-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoFirst from global;
+    composes: overflow-hidden from global;
+
+    grid-template-rows: auto auto 1fr;
+    transition-delay: 64ms;
+    transition-duration: 384ms;
+    transition-property: opacity, visbility;
+    transition-timing-function: var(--venia-global-anim-standard);
+}
+
+.root_visible {
+    composes: root;
+
+    composes: h-auto from global;
+    composes: mt-sm from global;
+    composes: opacity-100 from global;
+    composes: visible from global;
+}
+
+.root_hidden {
+    composes: root;
+
+    composes: h-0 from global;
+    composes: invisible from global;
+    composes: mt-0 from global;
+    composes: opacity-0 from global;
+}
+
+.thumbnail {
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    grid-column: 1 / span 1;
+    grid-row: 1 / span 3;
+}
+
+.name {
+    composes: font-semibold from global;
+    grid-column: 2 / span 1;
+    grid-row: 1 / span 1;
+}
+
+.quantity {
+    composes: mt-xs from global;
+    composes: text-sm from global;
+    grid-column: 2 / span 1;
+    grid-row: 3 / span 1;
+}
+
+.options {
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: mt-xs from global;
+    composes: text-sm from global;
+    grid-column: 2 / span 1;
+    grid-row: 2 / span 1;
+}