@riosst100/pwa-marketplace 1.8.9 → 1.9.0

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

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethodCollection.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/paymentMethods.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import { shape, string, bool, func } from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { usePaymentMethods } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import RadioGroup from '@magento/venia-ui/lib/components/RadioGroup';
+import Radio from '@magento/venia-ui/lib/components/RadioGroup/radio';
+import defaultClasses from './paymentMethods.module.css';
+import payments from './paymentMethodCollection';
+
+const PaymentMethods = props => {
+    const {
+        classes: propClasses,
+        onPaymentError,
+        onPaymentSuccess,
+        resetShouldSubmit,
+        shouldSubmit
+    } = props;
+
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const talonProps = usePaymentMethods({});
+
+    const {
+        availablePaymentMethods,
+        currentSelectedPaymentMethod,
+        handlePaymentMethodSelection,
+        initialSelectedMethod,
+        isLoading
+    } = talonProps;
+
+    if (isLoading) {
+        return null;
+    }
+
+    const radios = availablePaymentMethods
+        .map(({ code, title }) => {
+            // If we don't have an implementation for a method type, ignore it.
+            if (!Object.keys(payments).includes(code)) {
+                return;
+            }
+
+            const id = `paymentMethod--${code}`;
+            const isSelected = currentSelectedPaymentMethod === code;
+            const PaymentMethodComponent = payments[code];
+            const renderedComponent = isSelected ? (
+                <PaymentMethodComponent
+                    onPaymentSuccess={onPaymentSuccess}
+                    onPaymentError={onPaymentError}
+                    resetShouldSubmit={resetShouldSubmit}
+                    shouldSubmit={shouldSubmit}
+                />
+            ) : null;
+
+            return (
+                <div key={code} className={classes.payment_method}>
+                    <Radio
+                        id={id}
+                        label={title}
+                        value={code}
+                        classes={{
+                            label: classes.radio_label
+                        }}
+                        checked={isSelected}
+                        onChange={handlePaymentMethodSelection}
+                    />
+                    {renderedComponent}
+                </div>
+            );
+        })
+        .filter(paymentMethod => !!paymentMethod);
+
+    const noPaymentMethodMessage = !radios.length ? (
+        <div className={classes.payment_errors}>
+            <span>
+                {formatMessage({
+                    id: 'checkoutPage.paymentLoadingError',
+                    defaultMessage: 'There was an error loading payments.'
+                })}
+            </span>
+            <span>
+                {formatMessage({
+                    id: 'checkoutPage.refreshOrTryAgainLater',
+                    defaultMessage: 'Please refresh or try again later.'
+                })}
+            </span>
+        </div>
+    ) : null;
+
+    return (
+        <div className={classes.root}>
+            <RadioGroup
+                classes={{ root: classes.radio_group }}
+                field="selectedPaymentMethod"
+                initialValue={initialSelectedMethod}
+            >
+                {radios}
+            </RadioGroup>
+            {noPaymentMethodMessage}
+        </div>
+    );
+};
+
+export default PaymentMethods;
+
+PaymentMethods.propTypes = {
+    classes: shape({
+        root: string,
+        payment_method: string,
+        radio_label: string
+    }),
+    onPaymentSuccess: func,
+    onPaymentError: func,
+    resetShouldSubmit: func,
+    selectedPaymentMethod: string,
+    shouldSubmit: bool
+};

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

@@ -0,0 +1,34 @@
+.root {
+    composes: grid from global;
+    composes: p-md from global;
+    composes: pb-s from global;
+}
+
+.radio_group {
+    composes: grid from global;
+}
+
+.payment_method {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: pb-xs from global;
+    composes: pt-xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.payment_method:last-of-type {
+    /* composes: border-b-0 from global; */
+    border-bottom-width: 0;
+}
+
+.radio_label {
+    composes: font-semibold from global;
+    composes: justify-self-start from global;
+}
+
+.payment_errors {
+    composes: grid from global;
+    composes: gap-2xs from global;
+    composes: text-error from global;
+}

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { shape, string, func } from 'prop-types';
+
+import { useSummary } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/useSummary';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './summary.module.css';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import summaryPayments from './summaryPaymentCollection';
+
+const Summary = props => {
+    const { classes: propClasses, onEdit } = props;
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const talonProps = useSummary();
+
+    const { isLoading, selectedPaymentMethod } = talonProps;
+
+    if (isLoading && !selectedPaymentMethod) {
+        return (
+            <LoadingIndicator classes={{ root: classes.loading }}>
+                <FormattedMessage
+                    id={'checkoutPage.loadingPaymentInformation'}
+                    defaultMessage={'Fetching Payment Information'}
+                />
+            </LoadingIndicator>
+        );
+    }
+
+    const hasCustomSummaryComp = Object.keys(summaryPayments).includes(
+        selectedPaymentMethod.code
+    );
+
+    if (hasCustomSummaryComp) {
+        const SummaryPaymentMethodComponent =
+            summaryPayments[selectedPaymentMethod.code];
+        return <SummaryPaymentMethodComponent onEdit={onEdit} />;
+    } else {
+        return (
+            <div className={classes.root}>
+                <div className={classes.heading_container}>
+                    <h5 className={classes.heading}>
+                        <FormattedMessage
+                            id={'checkoutPage.paymentInformation'}
+                            defaultMessage={'Payment Information'}
+                        />
+                    </h5>
+                </div>
+                <div className={classes.card_details_container}>
+                    <span className={classes.payment_details}>
+                        {selectedPaymentMethod.title}
+                    </span>
+                </div>
+            </div>
+        );
+    }
+};
+
+export default Summary;
+
+Summary.propTypes = {
+    classes: shape({
+        root: string,
+        heading_container: string,
+        heading: string,
+        card_details_container: string,
+        payment_details: string
+    }),
+    onEdit: func.isRequired
+};

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

@@ -0,0 +1,23 @@
+.root {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: p-md from global;
+}
+
+.heading_container {
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
+}
+
+.heading {
+    composes: font-semibold from global;
+}
+
+.card_details_container {
+    composes: gap-2xs from global;
+    composes: grid from global;
+}
+
+.payment_details {
+}

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

@@ -0,0 +1,23 @@
+/**
+ * This file is augmented at build time using the @magento/venia-ui build
+ * target "summaryPagePaymentTypes", 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 infor what be show on summary page.
+ *
+ * @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/PriceAdjustments/index.js

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

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PriceAdjustments/priceAdjustments.js

@@ -0,0 +1,63 @@
+import React, { Suspense } from 'react';
+import { useIntl } from 'react-intl';
+import { func } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { Accordion, Section } from '@magento/venia-ui/lib/components/Accordion';
+import CouponCode from '@magento/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode';
+import GiftCardSection from '@magento/venia-ui/lib/components/CartPage/PriceAdjustments/giftCardSection';
+import GiftOptionsSection from '@magento/venia-ui/lib/components/CartPage/PriceAdjustments/giftOptionsSection';
+
+import defaultClasses from './priceAdjustments.module.css';
+import cn from 'classnames';
+
+/**
+ * PriceAdjustments component for the Checkout page.
+
+ * @param {Function} props.setPageIsUpdating callback that sets checkout page updating state
+ */
+const PriceAdjustments = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const { setPageIsUpdating } = props;
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={classes.root}>
+            <Accordion
+                canOpenMultiple={true}
+                classes={{
+                    root: 'w-full'
+                }}
+            >
+                <Section
+                    data-cy="PriceAdjustments-couponCodeSection"
+                    id={'coupon_code'}
+                    title={formatMessage({
+                        id: 'checkoutPage.couponCode',
+                        defaultMessage: 'Enter Coupon Code'
+                    })}
+                    classes={{
+                        root: cn('border border-gray-100 rounded-md max-w-[400px] p-2.5'),
+                        title: 'text-[16px] font-medium',
+                        title_wrapper: 'gap-sm grid grid-cols-1 grid-flow-col h-[38px] items-center justify-items-start',
+                        contents_container: 'p-0'
+                    }}
+                >
+                    <Suspense fallback={<LoadingIndicator />}>
+                        <CouponCode setIsCartUpdating={setPageIsUpdating} />
+                    </Suspense>
+                </Section>
+                <GiftCardSection setIsCartUpdating={setPageIsUpdating} />
+                <GiftOptionsSection />
+            </Accordion>
+        </div>
+    );
+};
+
+export default PriceAdjustments;
+
+PriceAdjustments.propTypes = {
+    setPageIsUpdating: func
+};

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PriceAdjustments/priceAdjustments.module.css

@@ -0,0 +1,2 @@
+.root {
+}

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/addressForm.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+import CustomerForm from './customerForm';
+import GuestForm from './guestForm';
+
+/**
+ * Simple component that acts like an AddressForm factory, giving the client
+ * the correct form to render based on the current signed in state.
+ */
+const AddressForm = props => {
+    const [{ isSignedIn }] = useUserContext();
+    const AddressForm = isSignedIn ? CustomerForm : GuestForm;
+
+    return <AddressForm {...props} />;
+};
+
+export default AddressForm;