@riosst100/pwa-marketplace 1.8.8 → 1.9.0

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

@@ -0,0 +1,348 @@
+import React, { useMemo, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { bool, func, shape, string } from 'prop-types';
+import { useCreditCard } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/useCreditCard';
+
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+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 BrainTreeDropin from './brainTreeDropIn';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './creditCard.module.css';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import GoogleReCaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
+
+const STEP_DESCRIPTIONS = [
+    { defaultMessage: 'Loading Payment', id: 'checkoutPage.step0' },
+    {
+        defaultMessage: 'Checking Credit Card Information',
+        id: 'checkoutPage.step1'
+    },
+    {
+        defaultMessage: 'Checking Credit Card Information',
+        id: 'checkoutPage.step2'
+    },
+    {
+        defaultMessage: 'Checking Credit Card Information',
+        id: 'checkoutPage.step3'
+    },
+    {
+        defaultMessage: 'Saved Credit Card Information Successfully',
+        id: 'checkoutPage.step4'
+    }
+];
+
+/**
+ * The initial view for the Braintree payment method.
+ */
+const CreditCard = props => {
+    const {
+        classes: propClasses,
+        onPaymentSuccess: onSuccess,
+        onPaymentReady: onReady,
+        onPaymentError: onError,
+        resetShouldSubmit,
+        shouldSubmit
+    } = props;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const talonProps = useCreditCard({
+        onSuccess,
+        onReady,
+        onError,
+        shouldSubmit,
+        resetShouldSubmit
+    });
+
+    const {
+        errors,
+        shouldRequestPaymentNonce,
+        onPaymentError,
+        onPaymentSuccess,
+        onPaymentReady,
+        isBillingAddressSame,
+        isLoading,
+        /**
+         * `stepNumber` depicts the state of the process flow in credit card
+         * payment flow.
+         *
+         * `0` No call made yet
+         * `1` Billing address mutation intiated
+         * `2` Braintree nonce requsted
+         * `3` Payment information mutation intiated
+         * `4` All mutations done
+         */
+        stepNumber,
+        initialValues,
+        shippingAddressCountry,
+        shouldTeardownDropin,
+        resetShouldTeardownDropin,
+        recaptchaWidgetProps
+    } = talonProps;
+
+    const creditCardComponentClassName = isLoading
+        ? classes.credit_card_root_hidden
+        : classes.credit_card_root;
+
+    const billingAddressFieldsClassName = isBillingAddressSame
+        ? classes.billing_address_fields_root_hidden
+        : classes.billing_address_fields_root;
+
+    /**
+     * Instead of defining classes={root: classes.FIELD_NAME}
+     * we are using useMemo to only do it once (hopefully).
+     */
+    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.
+     *
+     * We write this function in `venia-ui` and not in the `peregrine` talon
+     * because it references `isRequired` which is a `venia-ui` function.
+     */
+    const isFieldRequired = useCallback((value, { isBillingAddressSame }) => {
+        if (isBillingAddressSame) {
+            /**
+             * Informed validator functions return `undefined` if
+             * validation is `true`
+             */
+            return undefined;
+        } else {
+            return isRequired(value);
+        }
+    }, []);
+
+    const stepTitle = STEP_DESCRIPTIONS[stepNumber].defaultMessage
+        ? formatMessage({
+            id: STEP_DESCRIPTIONS[stepNumber].id,
+            defaultMessage: STEP_DESCRIPTIONS[stepNumber].defaultMessage
+        })
+        : formatMessage({
+            id: 'checkoutPage.loadingPayment',
+            defaultMessage: 'Loading Payment'
+        });
+
+    const loadingIndicator = isLoading ? (
+        <LoadingIndicator>{stepTitle}</LoadingIndicator>
+    ) : null;
+
+    return (
+        <div className={classes.root} data-cy="CreditCard-root">
+            <div className={creditCardComponentClassName}>
+                <FormError
+                    allowErrorMessages
+                    classes={{ root: classes.formErrorContainer }}
+                    errors={Array.from(errors.values())}
+                />
+                <div className={classes.dropin_root}>
+                    <BrainTreeDropin
+                        onError={onPaymentError}
+                        onReady={onPaymentReady}
+                        onSuccess={onPaymentSuccess}
+                        shouldRequestPaymentNonce={shouldRequestPaymentNonce}
+                        shouldTeardownDropin={shouldTeardownDropin}
+                        resetShouldTeardownDropin={resetShouldTeardownDropin}
+                    />
+                </div>
+                <div
+                    data-cy="CreditCard-AddressCheck-root"
+                    className={classes.address_check}
+                >
+                    <Checkbox
+                        data-cy="PaymentInformation-billingAddressSame"
+                        field="isBillingAddressSame"
+                        label={formatMessage({
+                            id: 'checkoutPage.billingAddressSame',
+                            defaultMessage:
+                                'Billing address same as shipping address'
+                        })}
+                        initialValue={initialValues.isBillingAddressSame}
+                    />
+                </div>
+                <div
+                    data-cy="CreditCard-billingAddressFields"
+                    className={billingAddressFieldsClassName}
+                >
+                    <Field
+                        id="firstName"
+                        classes={fieldClasses.first_name}
+                        label={formatMessage({
+                            id: 'global.firstName',
+                            defaultMessage: 'First Name'
+                        })}
+                    >
+                        <TextInput
+                            data-cy="CreditCard-billingAddress-firstname"
+                            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
+                            data-cy="CreditCard-billingAddress-lastname"
+                            id="lastName"
+                            field="lastName"
+                            validate={isFieldRequired}
+                            initialValue={initialValues.lastName}
+                        />
+                    </Field>
+                    <Country
+                        data-cy="CreditCard-billingAddress-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
+                            data-cy="CreditCard-billingAddress-street1"
+                            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
+                            data-cy="CreditCard-billingAddress-street2"
+                            id="street2"
+                            field="street2"
+                            initialValue={initialValues.street2}
+                        />
+                    </Field>
+                    <Field
+                        id="city"
+                        classes={fieldClasses.city}
+                        label={formatMessage({
+                            id: 'global.city',
+                            defaultMessage: 'City'
+                        })}
+                    >
+                        <TextInput
+                            data-cy="CreditCard-billingAddress-city"
+                            id="city"
+                            field="city"
+                            validate={isFieldRequired}
+                            initialValue={initialValues.city}
+                        />
+                    </Field>
+                    <Region
+                        data-cy="CreditCard-billingAddress-region"
+                        classes={fieldClasses.region}
+                        initialValue={initialValues.region}
+                        validate={isFieldRequired}
+                        fieldInput={'region[label]'}
+                        fieldSelect={'region[region_id]'}
+                        optionValueKey={'id'}
+                    />
+                    <Postcode
+                        data-cy="CreditCard-billingAddress-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
+                            data-cy="CreditCard-billingAddress-phoneNumber"
+                            id="phoneNumber"
+                            field="phoneNumber"
+                            validate={isFieldRequired}
+                            initialValue={initialValues.phoneNumber}
+                        />
+                    </Field>
+                </div>
+                <GoogleReCaptcha {...recaptchaWidgetProps} />
+            </div>
+            {loadingIndicator}
+        </div>
+    );
+};
+
+export default CreditCard;
+
+CreditCard.propTypes = {
+    classes: shape({
+        root: string,
+        dropin_root: string,
+        billing_address_fields_root: string,
+        first_name: string,
+        last_name: string,
+        city: string,
+        region: string,
+        postal_code: string,
+        phone_number: string,
+        country: string,
+        street1: string,
+        street2: string,
+        address_check: string,
+        credit_card_root: string,
+        credit_card_root_hidden: string
+    }),
+    shouldSubmit: bool.isRequired,
+    onPaymentSuccess: func,
+    onPaymentReady: func,
+    onPaymentError: func,
+    resetShouldSubmit: func.isRequired
+};

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

@@ -0,0 +1,58 @@
+.root {
+}
+
+.credit_card_root {
+    composes: visible from global;
+    composes: opacity-100 from global;
+    transition-delay: 64ms;
+    transition-duration: 384ms;
+    transition-property: opacity, visbility;
+    transition-timing-function: var(--venia-global-anim-standard);
+}
+
+.credit_card_root_hidden {
+    composes: h-0 from global;
+    composes: invisible from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+}
+
+.dropin_root {
+}
+
+.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/PaymentInformation/editCard.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { shape, string, bool, func } from 'prop-types';
+import defaultClasses from './editCard.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CreditCard from './creditCard';
+
+/**
+ * The edit view for the Braintree payment method.
+ */
+const EditCard = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const {
+        onPaymentReady,
+        onPaymentSuccess,
+        onPaymentError,
+        resetShouldSubmit,
+        shouldSubmit
+    } = props;
+
+    return (
+        <div className={classes.root} data-cy="EditCard">
+            <CreditCard
+                onPaymentReady={onPaymentReady}
+                onPaymentSuccess={onPaymentSuccess}
+                onPaymentError={onPaymentError}
+                resetShouldSubmit={resetShouldSubmit}
+                shouldSubmit={shouldSubmit}
+            />
+        </div>
+    );
+};
+
+EditCard.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    onPaymentReady: func.isRequired,
+    onPaymentSuccess: func.isRequired,
+    onPaymentError: func.isRequired,
+    resetShouldSubmit: func.isRequired,
+    shouldSubmit: bool
+};
+
+export default EditCard;

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

@@ -0,0 +1,5 @@
+.root {
+    composes: overflow-auto from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+}

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

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { bool, func } from 'prop-types';
+
+import { useEditModal } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/useEditModal';
+import Dialog from '@magento/venia-ui/lib/components/Dialog';
+import editablePayments from './editablePaymentCollection';
+
+const EditModal = props => {
+    const { onClose, isOpen } = props;
+    const { formatMessage } = useIntl();
+
+    const talonProps = useEditModal({ onClose });
+
+    const {
+        selectedPaymentMethod,
+        handleUpdate,
+        handleClose,
+        handlePaymentSuccess,
+        handlePaymentReady,
+        updateButtonClicked,
+        resetUpdateButtonClicked,
+        handlePaymentError
+    } = talonProps;
+
+    const paymentMethodComponent = useMemo(() => {
+        const isEditable = Object.keys(editablePayments).includes(
+            selectedPaymentMethod
+        );
+        if (isEditable) {
+            const PaymentMethodComponent =
+                editablePayments[selectedPaymentMethod];
+            return (
+                <PaymentMethodComponent
+                    onPaymentReady={handlePaymentReady}
+                    onPaymentSuccess={handlePaymentSuccess}
+                    onPaymentError={handlePaymentError}
+                    resetShouldSubmit={resetUpdateButtonClicked}
+                    shouldSubmit={updateButtonClicked}
+                />
+            );
+        } else {
+            return (
+                <div>
+                    <FormattedMessage
+                        id={'checkoutPage.paymentMethodStatus'}
+                        defaultMessage={
+                            '{selectedPaymentMethod} is not supported for editing.'
+                        }
+                        values={{ selectedPaymentMethod }}
+                    />
+                </div>
+            );
+        }
+    }, [
+        handlePaymentError,
+        handlePaymentReady,
+        handlePaymentSuccess,
+        resetUpdateButtonClicked,
+        selectedPaymentMethod,
+        updateButtonClicked
+    ]);
+
+    return (
+        <Dialog
+            confirmText={'Update'}
+            confirmTranslationId={'global.updateButton'}
+            isOpen={isOpen}
+            onCancel={handleClose}
+            onConfirm={handleUpdate}
+            shouldDisableAllButtons={updateButtonClicked}
+            shouldDisableConfirmButton={updateButtonClicked}
+            title={formatMessage({
+                id: 'checkoutPage.editPaymentInformation',
+                defaultMessage: 'Edit Payment Information'
+            })}
+        >
+            {paymentMethodComponent}
+        </Dialog>
+    );
+};
+
+export default EditModal;
+
+EditModal.propTypes = {
+    onClose: func.isRequired,
+    isOpen: bool
+};

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

@@ -0,0 +1,23 @@
+/**
+ * This file is augmented at build time using the @magento/venia-ui build
+ * target "checkoutPagePaymentTypes", which allows third-party modules to
+ * add new payment component mappings for the checkout page.
+ *
+ * @see [Payment definition object]{@link PaymentDefinition}
+ */
+export default {};
+
+/**
+ * A payment definition object that describes a payment in your storefront.
+ *
+ * @typedef {Object} PaymentDefinition
+ * @property {string} paymentCode is use to map your payment
+ * @property {string} importPath Resolvable path to the component the
+ *   Route component will render
+ *
+ * @example <caption>A custom payment method</caption>
+ * const myCustomPayment = {
+ *      paymentCode: 'cc',
+ *      importPath: '@partner/module/path_to_your_component'
+ * }
+ */

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

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

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

@@ -0,0 +1,99 @@
+import React, { Suspense } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Form } from 'informed';
+import { shape, func, string, bool, instanceOf } from 'prop-types';
+
+import { usePaymentInformation } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentInformation';
+import CheckoutError from '@magento/peregrine/lib/talons/CheckoutPage/CheckoutError';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './paymentInformation.module.css';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+
+const PaymentMethods = React.lazy(() => import('./paymentMethods'));
+const EditModal = React.lazy(() => import('./editModal'));
+const Summary = React.lazy(() => import('./summary'));
+
+const PaymentInformation = props => {
+    const {
+        classes: propClasses,
+        onSave,
+        resetShouldSubmit,
+        setCheckoutStep,
+        shouldSubmit,
+        checkoutError
+    } = props;
+
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const talonProps = usePaymentInformation({
+        onSave,
+        checkoutError,
+        resetShouldSubmit,
+        setCheckoutStep,
+        shouldSubmit
+    });
+
+    const {
+        doneEditing,
+        handlePaymentError,
+        handlePaymentSuccess,
+        hideEditModal,
+        isLoading,
+        isEditModalActive,
+        showEditModal
+    } = talonProps;
+
+    if (isLoading) {
+        return (
+            <LoadingIndicator classes={{ root: classes.loading }}>
+                <FormattedMessage
+                    id={'checkoutPage.loadingPaymentInformation'}
+                    defaultMessage={'Fetching Payment Information'}
+                />
+            </LoadingIndicator>
+        );
+    }
+
+    const paymentInformation = doneEditing ? (
+        <Summary onEdit={showEditModal} />
+    ) : (
+        <Form>
+            <PaymentMethods
+                onPaymentError={handlePaymentError}
+                onPaymentSuccess={handlePaymentSuccess}
+                resetShouldSubmit={resetShouldSubmit}
+                shouldSubmit={shouldSubmit}
+            />
+        </Form>
+    );
+
+    const editModal = doneEditing ? (
+        <Suspense fallback={null}>
+            <EditModal onClose={hideEditModal} isOpen={isEditModalActive} />
+        </Suspense>
+    ) : null;
+
+    return (
+        <div className={classes.root} data-cy="PaymentInformation-root">
+            <div className={classes.payment_info_container}>
+                <Suspense fallback={null}>{paymentInformation}</Suspense>
+            </div>
+            {editModal}
+        </div>
+    );
+};
+
+export default PaymentInformation;
+
+PaymentInformation.propTypes = {
+    classes: shape({
+        container: string,
+        payment_info_container: string,
+        review_order_button: string
+    }),
+    onSave: func.isRequired,
+    checkoutError: instanceOf(CheckoutError),
+    resetShouldSubmit: func.isRequired,
+    shouldSubmit: bool
+};

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

@@ -0,0 +1,23 @@
+.root {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+}
+
+.payment_info_container {
+    composes: border from global;
+    composes: border-gray-100 from global;
+    composes: rounded-md from global;
+}
+
+.loading {
+    composes: root from '@magento/venia-ui/lib/components/LoadingIndicator/indicator.module.css';
+
+    composes: text-center from global;
+}
+
+.heading {
+    composes: border-0 from global;
+
+    composes: lg_border from global;
+}