@riosst100/pwa-marketplace 1.8.9 → 1.9.0

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

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/brainTreeDropIn.js

@@ -0,0 +1,196 @@
+/**
+ * @fileoverview This component uses the BrainTree Web Drop In to hook into Web
+ * Payments and the Payment Request API to submit payments via BrainTree.
+ *
+ * @see
+ *   https://github.com/braintree/braintree-web-drop-in
+ *   https://braintree.github.io/braintree-web-drop-in/docs/current/index.html
+ *   https://developers.braintreepayments.com/guides/drop-in/overview/javascript/v3
+ *   https://developers.braintreepayments.com/guides/payment-method-nonce.
+ *   https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#requestPaymentMethod.
+ */
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { bool, func, shape, string } from 'prop-types';
+
+import defaultClasses from './braintreeDropin.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+const authorization = process.env.CHECKOUT_BRAINTREE_TOKEN;
+
+/**
+ * This BraintreeDropin component has two purposes which lend to its
+ * implementation:
+ *
+ * 1) Mount and asynchronously create the dropin via the braintree api.
+ * 2) On submission (triggered by a parent), request the payment nonce.
+ */
+const BraintreeDropin = props => {
+    const {
+        onError,
+        onReady,
+        onSuccess,
+        shouldRequestPaymentNonce,
+        containerId = 'braintree-container',
+        shouldTeardownDropin,
+        resetShouldTeardownDropin
+    } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const [isError, setIsError] = useState(false);
+    const [dropinInstance, setDropinInstance] = useState();
+    const { formatMessage } = useIntl();
+
+    const createDropinInstance = useCallback(async () => {
+        const { default: dropIn } = await import('braintree-web-drop-in');
+        const dropinInstance = await dropIn.create({
+            authorization,
+            container: `#${containerId}`,
+            card: {
+                cardholderName: {
+                    required: true
+                },
+                overrides: {
+                    fields: {
+                        number: {
+                            placeholder: formatMessage({
+                                id: 'checkoutPage.cardPlaceholder',
+                                defaultMessage: '16-Digit Number'
+                            }),
+                            maskInput: {
+                                // Only show last four digits on blur.
+                                showLastFour: true
+                            }
+                        }
+                    }
+                }
+            }
+        });
+
+        return dropinInstance;
+    }, [containerId, formatMessage]);
+
+    useEffect(() => {
+        let unmounted = false;
+
+        const renderDropin = async () => {
+            try {
+                const instance = await createDropinInstance();
+
+                if (!unmounted) {
+                    setDropinInstance(instance);
+                    onReady(true);
+                } else {
+                    /**
+                     * Component has been unmounted, tear down the instance.
+                     */
+                    instance.teardown();
+                }
+            } catch (err) {
+                if (process.env.NODE_ENV !== 'production') {
+                    // This error can be common because of the async nature of
+                    // the checkout page. If the problem is due to a missing
+                    // container it is likely that the component was
+                    // intentionally unmounted.
+                    console.error(
+                        `Unable to initialize Credit Card form (Braintree). \n${err}`
+                    );
+                }
+                if (!unmounted) {
+                    setIsError(true);
+                }
+            }
+        };
+
+        renderDropin();
+
+        return () => {
+            unmounted = true;
+        };
+    }, [createDropinInstance, onReady]);
+
+    useEffect(() => {
+        async function requestPaymentNonce() {
+            try {
+                const paymentNonce = await dropinInstance.requestPaymentMethod();
+                onSuccess(paymentNonce);
+            } catch (e) {
+                // An error occurred. BrainTree will update the UI with error
+                // messaging, but we should signal that there was an error.
+                console.error(`Invalid Payment Details. \n${e}`);
+                onError();
+            }
+        }
+
+        if (shouldRequestPaymentNonce) {
+            requestPaymentNonce();
+        }
+    }, [dropinInstance, onError, onSuccess, shouldRequestPaymentNonce]);
+
+    /**
+     * This useEffect handles tearing down and re-creating the dropin
+     * in case the parent component needs it to.
+     *
+     * The parent component does this by setting `shouldTeardownDropin` `true`.
+     */
+    useEffect(() => {
+        const teardownAndRenderDropin = async () => {
+            try {
+                dropinInstance.teardown();
+                resetShouldTeardownDropin();
+
+                const instance = await createDropinInstance();
+
+                setDropinInstance(instance);
+                onReady(true);
+            } catch (err) {
+                console.error(
+                    `Unable to tear down and re-initialize Credit Card form (Braintree). \n${err}`
+                );
+            }
+        };
+
+        if (shouldTeardownDropin) {
+            teardownAndRenderDropin();
+        }
+    }, [
+        shouldTeardownDropin,
+        dropinInstance,
+        resetShouldTeardownDropin,
+        createDropinInstance,
+        onReady
+    ]);
+
+    if (isError) {
+        return (
+            <span className={classes.error}>
+                <FormattedMessage
+                    id={'checkoutPage.errorLoadingPayment'}
+                    defaultMessage={
+                        'There was an error loading payment options. Please try again later.'
+                    }
+                />
+            </span>
+        );
+    }
+
+    return (
+        <div className={classes.root}>
+            <div id={containerId} />
+        </div>
+    );
+};
+
+export default BraintreeDropin;
+
+BraintreeDropin.propTypes = {
+    classes: shape({
+        root: string,
+        error: string
+    }),
+    containerId: string,
+    onError: func.isRequired,
+    onReady: func.isRequired,
+    onSuccess: func.isRequired,
+    shouldRequestPaymentNonce: bool.isRequired
+};

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/braintreeDropin.module.css

@@ -0,0 +1,26 @@
+.root {
+}
+
+.error {
+    composes: text-error from global;
+}
+
+/* TODO @TW: cannot compose */
+div[data-braintree-id='card'] {
+    border: none;
+}
+
+/* TODO @TW: cannot compose */
+div[data-braintree-id='card-sheet-header'] {
+    display: none;
+}
+
+/* TODO @TW: cannot compose */
+div[class*='braintree-sheet__content--form'] {
+    /**
+      This is needed to override padding on the dropin
+      component. If we use padding-top instead it just
+      overrides the padding-top not whole padding.
+    */
+    padding: 1rem 0 0 0;
+}

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/braintreeSummary.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { shape, string, func, bool } from 'prop-types';
+import { Edit2 as EditIcon } from 'react-feather';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+
+import { useBraintreeSummary } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/useBraintreeSummary';
+import defaultClasses from './braintreeSummary.module.css';
+
+const BraintreeSummary = props => {
+    const { classes: propClasses, onEdit } = props;
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const { formatMessage } = useIntl();
+
+    const {
+        billingAddress,
+        isBillingAddressSame,
+        isLoading,
+        paymentNonce
+    } = useBraintreeSummary();
+
+    if (isLoading) {
+        return (
+            <LoadingIndicator classes={{ root: classes.loading }}>
+                <FormattedMessage
+                    id={'checkoutPage.loadingPaymentInformation'}
+                    defaultMessage={'Fetching Payment Information'}
+                />
+            </LoadingIndicator>
+        );
+    }
+
+    const paymentSummary =
+        paymentNonce &&
+        formatMessage(
+            {
+                id: 'checkoutPage.paymentSummary',
+                defaultMessage: '{cardType} ending in {lastFour}'
+            },
+            {
+                cardType: paymentNonce.details.cardType,
+                lastFour: paymentNonce.details.lastFour
+            }
+        );
+
+    const billingAddressSummary =
+        !isBillingAddressSame && billingAddress ? (
+            <div className={classes.address_summary_container}>
+                <div>
+                    <span className={classes.first_name}>
+                        {billingAddress.firstName}
+                    </span>
+                    <span className={classes.last_name}>
+                        {billingAddress.lastName}
+                    </span>
+                </div>
+                <div>
+                    <span className={classes.street1}>
+                        {billingAddress.street1}
+                    </span>
+                    <span className={classes.street2}>
+                        {billingAddress.street2}
+                    </span>
+                    <span className={classes.city}>{billingAddress.city}</span>
+                    <span className={classes.state}>
+                        {billingAddress.state}
+                    </span>
+                </div>
+                <div>
+                    <span className={classes.postalCode}>
+                        {billingAddress.postalCode}
+                    </span>
+                    <span className={classes.country}>
+                        {billingAddress.country}
+                    </span>
+                </div>
+            </div>
+        ) : null;
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.heading_container}>
+                <h5 className={classes.heading}>
+                    <FormattedMessage
+                        id={'checkoutPage.paymentInformation'}
+                        defaultMessage={'Payment Information'}
+                    />
+                </h5>
+                <LinkButton
+                    className={classes.edit_button}
+                    onClick={onEdit}
+                    type="button"
+                    data-cy="BrainTreeSummary-editButton"
+                >
+                    <Icon
+                        size={16}
+                        src={EditIcon}
+                        classes={{ icon: classes.edit_icon }}
+                    />
+                    <span className={classes.edit_text}>
+                        <FormattedMessage
+                            id={'global.editButton'}
+                            defaultMessage={'Edit'}
+                        />
+                    </span>
+                </LinkButton>
+            </div>
+            <div className={classes.card_details_container}>
+                <span className={classes.payment_type}>
+                    <FormattedMessage
+                        id={'global.creditCard'}
+                        defaultMessage={'Credit Card'}
+                    />
+                </span>
+                <span className={classes.payment_details}>
+                    {paymentSummary}
+                </span>
+            </div>
+            {billingAddressSummary}
+        </div>
+    );
+};
+
+export default BraintreeSummary;
+
+BraintreeSummary.propTypes = {
+    classes: shape({
+        root: string,
+        heading_container: string,
+        heading: string,
+        edit_button: string,
+        card_details_container: string,
+        address_summary_container: string,
+        first_name: string,
+        last_name: string,
+        street1: string,
+        street2: string,
+        city: string,
+        postalCode: string,
+        country: string,
+        payment_type: string,
+        payment_details: string
+    }),
+    billingAddress: shape({
+        firstName: string,
+        lastName: string,
+        country: string,
+        street1: string,
+        street2: string,
+        city: string,
+        state: string,
+        postalCode: string
+    }),
+    onEdit: func.isRequired,
+    isBillingAddressSame: bool
+};