@riosst100/pwa-marketplace 1.8.9 → 1.9.1

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;
+}

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { useItemsReview } from '@magento/peregrine/lib/talons/CheckoutPage/ItemsReview/useItemsReview';
+
+import Item from './item';
+import ShowAllButton from './showAllButton';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './itemsReview.module.css';
+
+/**
+ * Renders a list of items in an order.
+ * @param {Object} props.data an optional static data object to render instead of making a query for data.
+ */
+const ItemsReview = props => {
+    const { classes: propClasses } = props;
+
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const talonProps = useItemsReview({
+        data: props.data
+    });
+
+    const {
+        items: itemsInCart,
+        totalQuantity,
+        showAllItems,
+        setShowAllItems,
+        isLoading,
+        configurableThumbnailSource
+    } = talonProps;
+
+    const items = itemsInCart.map((item, index) => (
+        <Item
+            key={item.uid}
+            {...item}
+            isHidden={!showAllItems && index >= 2}
+            configurableThumbnailSource={configurableThumbnailSource}
+        />
+    ));
+
+    const showAllItemsFooter = !showAllItems ? (
+        <ShowAllButton onClick={setShowAllItems} />
+    ) : null;
+
+    if (isLoading) {
+        return (
+            <LoadingIndicator>
+                <FormattedMessage
+                    id={'checkoutPage.fetchingItemsInYourOrder'}
+                    defaultMessage={'Fetching Items in your Order'}
+                />
+            </LoadingIndicator>
+        );
+    }
+
+    return (
+        <div
+            className={classes.items_review_container}
+            data-cy="ItemsReview-container"
+        >
+            <div className={classes.items_container}>
+                <div
+                    data-cy="ItemsReview-totalQuantity"
+                    className={classes.total_quantity}
+                >
+                    <span className={classes.total_quantity_amount}>
+                        {totalQuantity}
+                    </span>
+                    <FormattedMessage
+                        id={'checkoutPage.itemsInYourOrder'}
+                        defaultMessage={' items in your order'}
+                    />
+                </div>
+                {items}
+            </div>
+            {showAllItemsFooter}
+        </div>
+    );
+};
+
+export default ItemsReview;

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

@@ -0,0 +1,20 @@
+.items_review_container {
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: rounded-md from global;
+    min-height: 2rem;
+}
+
+.items_container {
+    composes: grid from global;
+    composes: px-md from global;
+    composes: py-sm from global;
+}
+
+.total_quantity {
+}
+
+.total_quantity_amount {
+    composes: font-semibold from global;
+}

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

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { ChevronDown as ArrowDown } from 'react-feather';
+
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './showAllButton.module.css';
+
+const ShowAllButton = props => {
+    const { onClick } = props;
+    const classes = useStyle(defaultClasses, props.classes || {});
+
+    const handleClick = useCallback(() => {
+        onClick();
+    }, [onClick]);
+
+    return (
+        <button className={classes.root} onClick={handleClick}>
+            <span className={classes.content}>
+                <span className={classes.text}>
+                    <FormattedMessage
+                        id={'checkoutPage.showAllItems'}
+                        defaultMessage={'SHOW ALL ITEMS'}
+                    />
+                </span>
+                <Icon
+                    src={ArrowDown}
+                    classes={{
+                        root: classes.arrowDown
+                    }}
+                />
+            </span>
+        </button>
+    );
+};
+
+export default ShowAllButton;

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

@@ -0,0 +1,28 @@
+.root {
+    composes: border-t-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: px-0 from global;
+    composes: py-3 from global;
+    composes: w-full from global;
+}
+
+.content {
+    composes: gap-1.5 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+}
+
+.text {
+    composes: font-semibold from global;
+    composes: text-brand-dark from global;
+    composes: text-sm from global;
+}
+
+.arrowDown {
+    composes: root from '@magento/venia-ui/lib/components/Icon/icon.module.css';
+
+    --stroke: rgb(var(--venia-brand-color-1-700));
+}

package/src/overwrites/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/createAccount.js

@@ -0,0 +1,213 @@
+import React, { useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Form } from 'informed';
+import { func, shape, string } from 'prop-types';
+import { useToasts } from '@magento/peregrine';
+import { useCreateAccount } from '@magento/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount';
+
+import combine from '@magento/venia-ui/lib/util/combineValidators';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import {
+    hasLengthAtLeast,
+    isRequired,
+    validatePassword
+} 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 Field from '@magento/venia-ui/lib/components/Field';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import Password from '@magento/venia-ui/lib/components/Password';
+import GoogleReCaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
+
+import defaultClasses from './createAccount.module.css';
+
+const CreateAccount = props => {
+    const { formatMessage } = useIntl();
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const [, { addToast }] = useToasts();
+
+    const onSubmit = useCallback(() => {
+        // TODO: Redirect to account/order page when implemented.
+        const { scrollTo } = globalThis;
+
+        if (typeof scrollTo === 'function') {
+            scrollTo({
+                left: 0,
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+
+        addToast({
+            type: 'info',
+            message: formatMessage({
+                id: 'checkoutPage.accountSuccessfullyCreated',
+                defaultMessage: 'Account successfully created.'
+            }),
+            timeout: 5000
+        });
+    }, [addToast, formatMessage]);
+
+    const talonProps = useCreateAccount({
+        initialValues: {
+            email: props.email,
+            firstName: props.firstname,
+            lastName: props.lastname
+        },
+        onSubmit
+    });
+
+    const {
+        errors,
+        handleSubmit,
+        isDisabled,
+        initialValues,
+        recaptchaWidgetProps
+    } = talonProps;
+
+    return (
+        <div className={classes.root}>
+            <h2>
+                <FormattedMessage
+                    id={'checkoutPage.quickCheckout'}
+                    defaultMessage={'Quick Checkout When You Return'}
+                />
+            </h2>
+            <p>
+                <FormattedMessage
+                    id={'checkoutPage.setAPasswordAndSave'}
+                    defaultMessage={
+                        'Set a password and save your information for next time in one easy step!'
+                    }
+                />
+            </p>
+            <FormError errors={Array.from(errors.values())} />
+            <Form
+                className={classes.form}
+                initialValues={initialValues}
+                onSubmit={handleSubmit}
+            >
+                <Field
+                    label={formatMessage({
+                        id: 'global.firstName',
+                        defaultMessage: 'First Name'
+                    })}
+                >
+                    <TextInput
+                        field="customer.firstname"
+                        autoComplete="given-name"
+                        aria-label={formatMessage({
+                            id: 'global.firstNameRequired',
+                            defaultMessage: 'First Name Required'
+                        })}
+                        data-cy="OrderConfirmationPage-CreateAccount-firstName"
+                        validate={isRequired}
+                        validateOnBlur
+                    />
+                </Field>
+                <Field
+                    label={formatMessage({
+                        id: 'global.lastName',
+                        defaultMessage: 'Last Name'
+                    })}
+                >
+                    <TextInput
+                        field="customer.lastname"
+                        autoComplete="family-name"
+                        aria-label={formatMessage({
+                            id: 'global.lastNameRequired',
+                            defaultMessage: 'Last Name Required'
+                        })}
+                        data-cy="OrderConfirmationPage-CreateAccount-lastName"
+                        validate={isRequired}
+                        validateOnBlur
+                    />
+                </Field>
+                <Field
+                    label={formatMessage({
+                        id: 'global.email',
+                        defaultMessage: 'Email'
+                    })}
+                >
+                    <TextInput
+                        field="customer.email"
+                        autoComplete="email"
+                        aria-label={formatMessage({
+                            id: 'global.emailRequired',
+                            defaultMessage: 'Email Required'
+                        })}
+                        data-cy="OrderConfirmationPage-CreateAccount-email"
+                        validate={isRequired}
+                        validateOnBlur
+                    />
+                </Field>
+                <Password
+                    label={formatMessage({
+                        id: 'global.password',
+                        defaultMessage: 'Password'
+                    })}
+                    fieldName="password"
+                    isToggleButtonHidden={false}
+                    autoComplete="new-password"
+                    data-cy="OrderConfirmationPage-CreateAccount-password"
+                    validate={combine([
+                        isRequired,
+                        [hasLengthAtLeast, 8],
+                        validatePassword
+                    ])}
+                    validateOnBlur
+                    aria-label={formatMessage({
+                        id: 'global.passwordRequired',
+                        defaultMessage: 'Password Required'
+                    })}
+                />
+                <div className={classes.subscribe}>
+                    <Checkbox
+                        field="subscribe"
+                        id="subscribe"
+                        data-cy="OrderConfirmationPage-CreateAccount-subscribe"
+                        label={formatMessage({
+                            id: 'checkoutPage.subscribe',
+                            defaultMessage: 'Subscribe to news and updates'
+                        })}
+                    />
+                </div>
+                <GoogleReCaptcha {...recaptchaWidgetProps} />
+                <div className={classes.actions}>
+                    <Button
+                        disabled={isDisabled}
+                        type="submit"
+                        className={classes.create_account_button}
+                        data-cy="OrderConfirmationPage-CreateAccount-createAccountButton"
+                    >
+                        <FormattedMessage
+                            id={'checkoutPage.createAccount'}
+                            defaultMessage={'Create Account'}
+                        />
+                    </Button>
+                </div>
+            </Form>
+        </div>
+    );
+};
+
+export default CreateAccount;
+
+CreateAccount.propTypes = {
+    classes: shape({
+        actions: string,
+        create_account_button: string,
+        form: string,
+        root: string,
+        subscribe: string
+    }),
+    initialValues: shape({
+        email: string,
+        firstName: string,
+        lastName: string
+    }),
+    onSubmit: func
+};

package/src/overwrites/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/createAccount.module.css

@@ -0,0 +1,24 @@
+.root {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: pt-xs from global;
+
+    composes: lg_pt-0 from global;
+    composes: lg_sticky from global;
+    composes: lg_top-22 from global;
+}
+
+.form {
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+}
+
+.actions {
+    composes: text-center from global;
+}
+
+.create_account_button {
+    composes: root_normalPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+}

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

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