@riosst100/pwa-marketplace 2.0.8 → 2.0.9

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

@@ -1,348 +0,0 @@
-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

@@ -1,58 +0,0 @@
-.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

@@ -1,44 +0,0 @@
-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

@@ -1,5 +0,0 @@
-.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

@@ -1,88 +0,0 @@
-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

@@ -1,23 +0,0 @@
-/**
- * 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

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

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

@@ -1,99 +0,0 @@
-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

@@ -1,23 +0,0 @@
-.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;
-}