@riosst100/pwa-marketplace 1.8.8 → 1.9.0

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

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

@@ -0,0 +1,62 @@
+.root {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: p-md from global;
+}
+
+.loading {
+    composes: root from '@magento/venia-ui/lib/components/LoadingIndicator/indicator.module.css';
+
+    composes: text-center from global;
+}
+
+.heading_container {
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
+}
+
+.edit_button {
+    composes: p-xs from global;
+    composes: -m-xs from global;
+    composes: text-brand-dark from global;
+}
+
+.heading {
+    composes: font-semibold from global;
+}
+
+.address_summary_container {
+    composes: grid from global;
+    composes: gap-y-2xs from global;
+}
+
+.first_name,
+.last_name,
+.street1,
+.street2,
+.city,
+.state,
+.postalCode,
+.country {
+    composes: pr-1 from global;
+}
+
+.edit_icon {
+    composes: stroke-brand-base from global;
+}
+
+.edit_text {
+    composes: hidden from global;
+
+    composes: lg_inline from global;
+}
+
+.card_details_container {
+    composes: grid from global;
+    composes: gap-2xs from global;
+}
+
+.payment_type {}
+
+.payment_details {}