@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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';

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

@@ -0,0 +1,162 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { object, shape, string } from 'prop-types';
+import { useOrderConfirmationPage } from '@magento/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useOrderConfirmationPage';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import CreateAccount from './createAccount';
+import ItemsReview from '../ItemsReview';
+import defaultClasses from './orderConfirmationPage.module.css';
+
+const OrderConfirmationPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { data, orderNumber } = props;
+    const { formatMessage } = useIntl();
+
+    const talonProps = useOrderConfirmationPage({
+        data
+    });
+
+    const { flatData, isSignedIn } = talonProps;
+
+    const {
+        city,
+        country,
+        email,
+        firstname,
+        lastname,
+        postcode,
+        region,
+        shippingMethod,
+        street
+    } = flatData;
+
+    const streetRows = street.map((row, index) => {
+        return (
+            <span key={index} className={classes.addressStreet}>
+                {row}
+            </span>
+        );
+    });
+
+    useEffect(() => {
+        const { scrollTo } = globalThis;
+
+        if (typeof scrollTo === 'function') {
+            scrollTo({
+                left: 0,
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    }, []);
+
+    const createAccountForm = !isSignedIn ? (
+        <CreateAccount
+            firstname={firstname}
+            lastname={lastname}
+            email={email}
+        />
+    ) : null;
+
+    const nameString = `${firstname} ${lastname}`;
+    const additionalAddressString = `${city}, ${region} ${postcode} ${country}`;
+
+    return (
+        <div className={classes.root} data-cy="OrderConfirmationPage-root">
+            <StoreTitle>
+                {formatMessage({
+                    id: 'checkoutPage.titleReceipt',
+                    defaultMessage: 'Receipt'
+                })}
+            </StoreTitle>
+            <div className={classes.mainContainer}>
+                <h2
+                    data-cy="OrderConfirmationPage-header"
+                    className={classes.heading}
+                >
+                    <FormattedMessage
+                        id={'checkoutPage.thankYou'}
+                        defaultMessage={'Thank you for your order!'}
+                    />
+                </h2>
+                <div
+                    data-cy="OrderConfirmationPage-orderNumber"
+                    className={classes.orderNumber}
+                >
+                    <FormattedMessage
+                        id={'checkoutPage.orderNumber'}
+                        defaultMessage={'Order Number: {orderNumber}'}
+                        values={{ orderNumber }}
+                    />
+                </div>
+                <div
+                    data-cy="OrderConfirmationPage-shippingInfoHeading"
+                    className={classes.shippingInfoHeading}
+                >
+                    <FormattedMessage
+                        id={'global.shippingInformation'}
+                        defaultMessage={'Shipping Information'}
+                    />
+                </div>
+                <div className={classes.shippingInfo}>
+                    <span className={classes.email}>{email}</span>
+                    <span className={classes.name}>{nameString}</span>
+                    {streetRows}
+                    <span className={classes.addressAdditional}>
+                        {additionalAddressString}
+                    </span>
+                </div>
+                <div
+                    data-cy="OrderConfirmationPage-shippingMethodHeading"
+                    className={classes.shippingMethodHeading}
+                >
+                    <FormattedMessage
+                        id={'global.shippingMethod'}
+                        defaultMessage={'Shipping Method'}
+                    />
+                </div>
+                <div className={classes.shippingMethod}>{shippingMethod}</div>
+                <div className={classes.itemsReview}>
+                    <ItemsReview data={data} />
+                </div>
+                <div
+                    data-cy="OrderConfirmationPage-additionalText"
+                    className={classes.additionalText}
+                >
+                    <FormattedMessage
+                        id={'checkoutPage.additionalText'}
+                        defaultMessage={
+                            'You will also receive an email with the details and we will let you know when your order has shipped.'
+                        }
+                    />
+                </div>
+            </div>
+            <div className={classes.sidebarContainer}>{createAccountForm}</div>
+        </div>
+    );
+};
+
+export default OrderConfirmationPage;
+
+OrderConfirmationPage.propTypes = {
+    classes: shape({
+        addressStreet: string,
+        mainContainer: string,
+        heading: string,
+        orderNumber: string,
+        shippingInfoHeading: string,
+        shippingInfo: string,
+        email: string,
+        name: string,
+        addressAdditional: string,
+        shippingMethodHeading: string,
+        shippingMethod: string,
+        itemsReview: string,
+        additionalText: string,
+        sidebarContainer: string
+    }),
+    data: object.isRequired,
+    orderNumber: string
+};

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

@@ -0,0 +1,70 @@
+/* prettier-ignore */
+.root {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: max-w-screen-lg from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-sm from global;
+    composes: py-sm from global;
+
+    composes: lg_gap-md from global;
+    /* TODO @TW: review (B7) */
+    composes: lg_grid-cols-[2fr,1fr] from global;
+    composes: lg_px-lg from global;
+    composes: lg_py-md from global;
+}
+
+.mainContainer {
+    composes: col-start-1 from global;
+    composes: grid from global;
+    composes: gap-y-xs from global;
+}
+
+.sidebarContainer {
+    composes: border-t from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: col-start-1 from global;
+
+    composes: lg_border-0 from global;
+    composes: lg_col-start-2 from global;
+}
+
+.header {
+    composes: font-medium from global;
+}
+
+.text {
+    composes: leading-normal from global;
+}
+
+.orderNumber {
+    composes: header;
+}
+
+.shippingInfoHeading {
+    composes: header;
+}
+
+.shippingInfo {
+    composes: text;
+    composes: grid from global;
+}
+
+.shippingAddress {
+    composes: grid from global;
+}
+
+.shippingMethodHeading {
+    composes: header;
+}
+
+.shippingMethod {
+    composes: text;
+}
+
+.additionalText {
+    composes: text;
+}

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

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

package/src/overwrites/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PriceSummary from '@magento/venia-ui/lib/components/CartPage/PriceSummary';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './orderSummary.module.css';
+
+const OrderSummary = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    console.log("🚀 ~ OrderSummary ~ props:", props)
+    return (
+        <div data-cy="OrderSummary-root" className={classes.root}>
+            <h2 aria-live="polite" className="text-[16px] font-medium mb-4">
+                <FormattedMessage
+                    id={'checkoutPage.orderSummary'}
+                    defaultMessage={'Summary'}
+                />
+            </h2>
+            <PriceSummary isUpdating={props.isUpdating} />
+            <style jsx>
+                {`
+                    li[class*="priceSummary-lineItems"] span:first-child {
+                        margin-top: 0;
+                        margin-bottom: 12px;
+                        font-weight: 500;
+                        font-size: 14px;
+                    }
+                `}
+            </style>
+        </div>
+    );
+};
+
+export default OrderSummary;

package/src/overwrites/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.module.css

@@ -0,0 +1,17 @@
+.root {
+    composes: border-t-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: mt-xs from global;
+
+    composes: lg_border from global;
+    composes: lg_border-solid from global;
+    composes: lg_border-gray-100 from global;
+    composes: lg_rounded-md from global;
+    composes: lg_mt-0 from global;
+    composes: p-6 from global;
+}
+
+.title {
+    composes: sr-only from global;
+}