@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import { arrayOf, bool, number, shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import RadioGroup from '@magento/venia-ui/lib/components/RadioGroup';
-import ShippingRadio from '@magento/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadio';
-import defaultClasses from './shippingRadios.module.css';
-
-const ShippingRadios = props => {
-    const { disabled, shippingMethods } = props;
-    const { formatMessage } = useIntl();
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const ERROR_MESSAGE = formatMessage({
-        id: 'shippingRadios.errorLoading',
-        defaultMessage:
-            'Error loading shipping methods. Please ensure a shipping address is set and try again.'
-    });
-
-    if (!shippingMethods.length) {
-        return <span className={classes.error}>{ERROR_MESSAGE}</span>;
-    }
-
-    const radioGroupClasses = {
-        message: classes.radioMessage,
-        radioLabel: classes.radioLabel,
-        root: classes.radioRoot
-    };
-
-    const shippingRadios = shippingMethods.map(method => {
-        const label = (
-            <ShippingRadio
-                currency={method.amount.currency}
-                name={method.method_title}
-                price={method.amount.value}
-            />
-        );
-        const value = method.serializedValue;
-
-        return { label, value };
-    });
-
-    return (
-        <RadioGroup
-            classes={radioGroupClasses}
-            disabled={disabled}
-            field="shipping_method"
-            id={'shippingMethod'}
-            items={shippingRadios}
-        />
-    );
-};
-
-export default ShippingRadios;
-
-ShippingRadios.propTypes = {
-    classes: shape({
-        error: string,
-        radioMessage: string,
-        radioLabel: string,
-        radioRoot: string
-    }),
-    disabled: bool,
-    shippingMethods: arrayOf(
-        shape({
-            amount: shape({
-                currency: string,
-                value: number
-            }),
-            available: bool,
-            carrier_code: string,
-            carrier_title: string,
-            method_code: string,
-            method_title: string,
-            serializedValue: string.isRequired
-        })
-    ).isRequired
-};

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.module.css

@@ -1,22 +0,0 @@
-.radioRoot {
-    composes: gap-2xs from global;
-    composes: grid from global;
-}
-
-.radioLabel {
-    composes: gap-2xs from global;
-    composes: grid from global;
-    composes: grid-cols-[100%] from global;
-    composes: justify-start from global;
-
-    composes: sm_grid-cols-autoAuto from global;
-}
-
-.radioMessage {
-    composes: hidden from global;
-}
-
-.error {
-    composes: leading-normal from global;
-    composes: text-error from global;
-}

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingMethod/updateModal.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import { arrayOf, bool, func, number, object, shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Dialog from '@magento/venia-ui/lib/components/Dialog';
-import FormError from '@magento/venia-ui/lib/components/FormError';
-import ShippingRadios from './shippingRadios';
-import defaultClasses from './updateModal.module.css';
-
-const UpdateModal = props => {
-    const {
-        classes: propClasses,
-        formErrors,
-        formInitialValues,
-        handleCancel,
-        handleSubmit,
-        isLoading,
-        isOpen,
-        pageIsUpdating,
-        shippingMethods
-    } = props;
-    const { formatMessage } = useIntl();
-
-    const dialogButtonsDisabled = pageIsUpdating;
-    const dialogSubmitButtonDisabled = isLoading;
-    const dialogFormProps = {
-        initialValues: formInitialValues
-    };
-
-    const classes = useStyle(defaultClasses, propClasses);
-
-    return (
-        <Dialog
-            confirmText={'Update'}
-            confirmTranslationId={'global.updateButton'}
-            formProps={dialogFormProps}
-            isOpen={isOpen}
-            onCancel={handleCancel}
-            onConfirm={handleSubmit}
-            shouldDisableAllButtons={dialogButtonsDisabled}
-            shouldDisableConfirmButton={dialogSubmitButtonDisabled}
-            shouldUnmountOnHide={false}
-            title={formatMessage({
-                id: 'checkoutPage.editShippingMethod',
-                defaultMessage: 'Edit Shipping Method'
-            })}
-            data-cy="ShippingMethod-updateModal"
-        >
-            <FormError
-                classes={{ root: classes.errorContainer }}
-                errors={formErrors}
-            />
-            <ShippingRadios
-                disabled={dialogButtonsDisabled}
-                shippingMethods={shippingMethods}
-            />
-        </Dialog>
-    );
-};
-
-export default UpdateModal;
-
-UpdateModal.propTypes = {
-    formInitialValues: object,
-    handleCancel: func,
-    handleSubmit: func,
-    isLoading: bool,
-    isOpen: bool,
-    pageIsUpdating: bool,
-    shippingMethods: arrayOf(
-        shape({
-            amount: shape({
-                currency: string,
-                value: number
-            }),
-            available: bool,
-            carrier_code: string,
-            carrier_title: string,
-            method_code: string,
-            method_title: string,
-            serializedValue: string.isRequired
-        })
-    )
-};

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingMethod/updateModal.module.css

@@ -1,3 +0,0 @@
-.errorContainer {
-    composes: pb-xs from global;
-}

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

@@ -1,472 +0,0 @@
-import React, { Fragment, useEffect } from 'react';
-import { shape, string } from 'prop-types';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { AlertCircle as AlertCircleIcon } from 'react-feather';
-import { Link } from 'react-router-dom';
-
-import { useWindowSize, useToasts } from '@magento/peregrine';
-import {
-    CHECKOUT_STEP,
-    useCheckoutPage
-} from '@magento/peregrine/lib/talons/CheckoutPage/useCheckoutPage';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Button from '@magento/venia-ui/lib/components/Button';
-import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
-import StockStatusMessage from '@magento/venia-ui/lib/components/StockStatusMessage';
-import FormError from '@magento/venia-ui/lib/components/FormError';
-import AddressBook from './AddressBook';
-import GuestSignIn from './GuestSignIn';
-import OrderSummary from './OrderSummary';
-import PaymentInformation from './PaymentInformation';
-import payments from './PaymentInformation/paymentMethodCollection';
-import PriceAdjustments from './PriceAdjustments';
-import ShippingMethod from './ShippingMethod';
-import ShippingInformation from './ShippingInformation';
-import OrderConfirmationPage from './OrderConfirmationPage';
-import ItemsReview from './ItemsReview';
-import GoogleReCaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
-
-import defaultClasses from './checkoutPage.module.css';
-import ScrollAnchor from '@magento/venia-ui/lib/components/ScrollAnchor/scrollAnchor';
-
-const errorIcon = <Icon src={AlertCircleIcon} size={20} />;
-
-const CheckoutPage = props => {
-    const { classes: propClasses } = props;
-    const { formatMessage } = useIntl();
-    const talonProps = useCheckoutPage();
-
-    const {
-        /**
-         * Enum, one of:
-         * SHIPPING_ADDRESS, SHIPPING_METHOD, PAYMENT, REVIEW
-         */
-        activeContent,
-        availablePaymentMethods,
-        cartItems,
-        checkoutStep,
-        customer,
-        error,
-        guestSignInUsername,
-        handlePlaceOrder,
-        handlePlaceOrderEnterKeyPress,
-        hasError,
-        isCartEmpty,
-        isGuestCheckout,
-        isLoading,
-        isUpdating,
-        orderDetailsData,
-        orderDetailsLoading,
-        orderNumber,
-        placeOrderLoading,
-        placeOrderButtonClicked,
-        setCheckoutStep,
-        setGuestSignInUsername,
-        setIsUpdating,
-        setShippingInformationDone,
-        scrollShippingInformationIntoView,
-        setShippingMethodDone,
-        scrollShippingMethodIntoView,
-        setPaymentInformationDone,
-        shippingInformationRef,
-        shippingMethodRef,
-        resetReviewOrderButtonClicked,
-        handleReviewOrder,
-        handleReviewOrderEnterKeyPress,
-        reviewOrderButtonClicked,
-        recaptchaWidgetProps,
-        toggleAddressBookContent,
-        toggleSignInContent
-    } = talonProps;
-
-    const [, { addToast }] = useToasts();
-
-    useEffect(() => {
-        if (hasError) {
-            const message =
-                error && error.message
-                    ? error.message
-                    : formatMessage({
-                        id: 'checkoutPage.errorSubmit',
-                        defaultMessage:
-                            'Oops! An error occurred while submitting. Please try again.'
-                    });
-            addToast({
-                type: 'error',
-                icon: errorIcon,
-                message,
-                dismissable: true,
-                timeout: 7000
-            });
-
-            if (process.env.NODE_ENV !== 'production') {
-                console.error(error);
-            }
-        }
-    }, [addToast, error, formatMessage, hasError]);
-
-    const classes = useStyle(defaultClasses, propClasses);
-
-    const windowSize = useWindowSize();
-    const isMobile = windowSize.innerWidth <= 960;
-
-    let checkoutContent;
-
-    const heading = isGuestCheckout
-        ? formatMessage({
-            id: 'checkoutPage.guestCheckout',
-            defaultMessage: 'Guest Checkout'
-        })
-        : formatMessage({
-            id: 'checkoutPage.checkout',
-            defaultMessage: 'Checkout'
-        });
-
-    if (orderNumber && orderDetailsData) {
-        return (
-            <OrderConfirmationPage
-                data={orderDetailsData}
-                orderNumber={orderNumber}
-            />
-        );
-    } else if (isLoading) {
-        return fullPageLoadingIndicator;
-    } else if (isCartEmpty) {
-        checkoutContent = (
-            <div className={classes.empty_cart_container}>
-                <div className={classes.heading_container}>
-                    <h1
-                        aria-live="polite"
-                        className={classes.heading}
-                        data-cy="ChekoutPage-heading"
-                    >
-                        {heading}
-                    </h1>
-                </div>
-                <h3>
-                    <FormattedMessage
-                        id={'checkoutPage.emptyMessage'}
-                        defaultMessage={'There are no items in your cart.'}
-                    />
-                </h3>
-            </div>
-        );
-    } else {
-        const signInContainerVisible =
-            isGuestCheckout && checkoutStep !== CHECKOUT_STEP.REVIEW;
-        const signInContainerElement = signInContainerVisible ? (
-            <div className={classes.signInContainer}>
-                <span className={classes.signInLabel}>
-                    <FormattedMessage
-                        id={'checkoutPage.signInLabel'}
-                        defaultMessage={'Sign in for Express Checkout'}
-                    />
-                </span>
-                <Button
-                    className={classes.signInButton}
-                    data-cy="CheckoutPage-signInButton"
-                    onClick={toggleSignInContent}
-                    priority="low"
-                    classes={{
-                        content: 'capitalize font-medium'
-                    }}
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.signInButton'}
-                        defaultMessage={'Sign In'}
-                    />
-                </Button>
-            </div>
-        ) : null;
-
-        const shippingMethodSection =
-            checkoutStep >= CHECKOUT_STEP.SHIPPING_METHOD ? (
-                <ShippingMethod
-                    pageIsUpdating={isUpdating}
-                    onSave={setShippingMethodDone}
-                    onSuccess={scrollShippingMethodIntoView}
-                    setPageIsUpdating={setIsUpdating}
-                />
-            ) : (
-                <h3 className={classes.shipping_method_heading}>
-                    <FormattedMessage
-                        id={'checkoutPage.shippingMethodStep'}
-                        defaultMessage={'2. Shipping Method'}
-                    />
-                </h3>
-            );
-
-        const formErrors = [];
-        const paymentMethods = Object.keys(payments);
-
-        // If we have an implementation, or if this is a "zero" checkout,
-        // we can allow checkout to proceed.
-        const isPaymentAvailable = !!availablePaymentMethods.find(
-            ({ code }) => code === 'free' || paymentMethods.includes(code)
-        );
-
-        if (!isPaymentAvailable) {
-            formErrors.push(
-                new Error(
-                    formatMessage({
-                        id: 'checkoutPage.noPaymentAvailable',
-                        defaultMessage: 'Payment is currently unavailable.'
-                    })
-                )
-            );
-        }
-
-        const paymentInformationSection =
-            checkoutStep >= CHECKOUT_STEP.PAYMENT ? (
-                <PaymentInformation
-                    onSave={setPaymentInformationDone}
-                    checkoutError={error}
-                    resetShouldSubmit={resetReviewOrderButtonClicked}
-                    setCheckoutStep={setCheckoutStep}
-                    shouldSubmit={reviewOrderButtonClicked}
-                />
-            ) : (
-                <h3 className={classes.payment_information_heading}>
-                    <FormattedMessage
-                        id={'checkoutPage.paymentInformationStep'}
-                        defaultMessage={'3. Payment Information'}
-                    />
-                </h3>
-            );
-
-        const priceAdjustmentsSection =
-            checkoutStep === CHECKOUT_STEP.PAYMENT ? (
-                <div className={classes.price_adjustments_container}>
-                    <PriceAdjustments setPageIsUpdating={setIsUpdating} />
-                </div>
-            ) : null;
-
-        const reviewOrderButton =
-            checkoutStep === CHECKOUT_STEP.PAYMENT ? (
-                <Button
-                    onClick={handleReviewOrder}
-                    onKeyDown={handleReviewOrderEnterKeyPress}
-                    priority="high"
-                    className={classes.review_order_button}
-                    data-cy="CheckoutPage-reviewOrderButton"
-                    disabled={
-                        reviewOrderButtonClicked ||
-                        isUpdating ||
-                        !isPaymentAvailable
-                    }
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.reviewOrder'}
-                        defaultMessage={'Review Order'}
-                    />
-                </Button>
-            ) : null;
-
-        const itemsReview =
-            checkoutStep === CHECKOUT_STEP.REVIEW ? (
-                <div className={classes.items_review_container}>
-                    <ItemsReview />
-                </div>
-            ) : null;
-
-        const placeOrderButton =
-            checkoutStep === CHECKOUT_STEP.REVIEW ? (
-                <Button
-                    onClick={handlePlaceOrder}
-                    onKeyDown={handlePlaceOrderEnterKeyPress}
-                    priority="high"
-                    className={classes.place_order_button}
-                    data-cy="CheckoutPage-placeOrderButton"
-                    disabled={
-                        isUpdating ||
-                        placeOrderLoading ||
-                        orderDetailsLoading ||
-                        placeOrderButtonClicked
-                    }
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.placeOrder'}
-                        defaultMessage={'Place Order'}
-                    />
-                </Button>
-            ) : null;
-
-        // If we're on mobile we should only render price summary in/after review.
-        const shouldRenderPriceSummary = !(
-            isMobile && checkoutStep < CHECKOUT_STEP.REVIEW
-        );
-
-        const orderSummary = (
-            <div
-                className={
-                    classes.summaryContainer +
-                    (signInContainerVisible
-                        ? ' ' + classes.signInContainerVisible
-                        : '') +
-                    (recaptchaWidgetProps.shouldRender
-                        ? ' ' + classes.reCaptchaMargin
-                        : '')
-                }
-            >
-                <OrderSummary isUpdating={isUpdating} />
-            </div>
-        );
-
-        let headerText;
-
-        if (isGuestCheckout) {
-            headerText = formatMessage({
-                id: 'checkoutPage.guestCheckout',
-                defaultMessage: 'Guest Checkout'
-            });
-        } else if (customer.default_shipping) {
-            headerText = formatMessage({
-                id: 'checkoutPage.reviewAndPlaceOrder',
-                defaultMessage: 'Review and Place Order'
-            });
-        } else {
-            headerText = formatMessage(
-                {
-                    id: 'checkoutPage.greeting',
-                    defaultMessage: 'Welcome {firstname}!'
-                },
-                { firstname: customer.firstname }
-            );
-        }
-
-        const checkoutContentClass =
-            activeContent === 'checkout'
-                ? classes.checkoutContent
-                : classes.checkoutContent_hidden;
-
-        const stockStatusMessageElement = (
-            <Fragment>
-                <FormattedMessage
-                    id={'checkoutPage.stockStatusMessage'}
-                    defaultMessage={
-                        'An item in your cart is currently out-of-stock and must be removed in order to Checkout. Please return to your cart to remove the item.'
-                    }
-                />
-                <Link className={classes.cartLink} to={'/cart'}>
-                    <FormattedMessage
-                        id={'checkoutPage.returnToCart'}
-                        defaultMessage={'Return to Cart'}
-                    />
-                </Link>
-            </Fragment>
-        );
-        checkoutContent = (
-            <div className={checkoutContentClass}>
-                <div className={classes.heading_container}>
-                    <FormError
-                        classes={{
-                            root: classes.formErrors
-                        }}
-                        errors={formErrors}
-                    />
-                    <StockStatusMessage
-                        cartItems={cartItems}
-                        message={stockStatusMessageElement}
-                    />
-                    <h1
-                        className={classes.heading}
-                        data-cy="ChekoutPage-headerText"
-                    >
-                        {headerText}
-                    </h1>
-                </div>
-                {signInContainerElement}
-                <div className={classes.shipping_information_container}>
-                    <ScrollAnchor ref={shippingInformationRef}>
-                        <ShippingInformation
-                            onSave={setShippingInformationDone}
-                            onSuccess={scrollShippingInformationIntoView}
-                            toggleActiveContent={toggleAddressBookContent}
-                            toggleSignInContent={toggleSignInContent}
-                            setGuestSignInUsername={setGuestSignInUsername}
-                        />
-                    </ScrollAnchor>
-                </div>
-                <div className={classes.shipping_method_container}>
-                    <ScrollAnchor ref={shippingMethodRef}>
-                        {shippingMethodSection}
-                    </ScrollAnchor>
-                </div>
-                <div className={classes.payment_information_container}>
-                    {paymentInformationSection}
-                </div>
-                {priceAdjustmentsSection}
-                {reviewOrderButton}
-                {itemsReview}
-                {orderSummary}
-                {placeOrderButton}
-                <GoogleReCaptcha {...recaptchaWidgetProps} />
-            </div>
-        );
-    }
-
-    const addressBookElement = !isGuestCheckout ? (
-        <AddressBook
-            activeContent={activeContent}
-            toggleActiveContent={toggleAddressBookContent}
-            onSuccess={scrollShippingInformationIntoView}
-        />
-    ) : null;
-
-    const signInElement = isGuestCheckout ? (
-        <GuestSignIn
-            key={guestSignInUsername}
-            isActive={activeContent === 'signIn'}
-            toggleActiveContent={toggleSignInContent}
-            initialValues={{ email: guestSignInUsername }}
-        />
-    ) : null;
-
-    return (
-        <div className={classes.root} data-cy="CheckoutPage-root">
-            <StoreTitle>
-                {formatMessage({
-                    id: 'checkoutPage.titleCheckout',
-                    defaultMessage: 'Checkout'
-                })}
-            </StoreTitle>
-            {checkoutContent}
-            {addressBookElement}
-            {signInElement}
-        </div>
-    );
-};
-
-export default CheckoutPage;
-
-CheckoutPage.propTypes = {
-    classes: shape({
-        root: string,
-        checkoutContent: string,
-        checkoutContent_hidden: string,
-        heading_container: string,
-        heading: string,
-        cartLink: string,
-        stepper_heading: string,
-        shipping_method_heading: string,
-        payment_information_heading: string,
-        signInContainer: string,
-        signInLabel: string,
-        signInButton: string,
-        empty_cart_container: string,
-        shipping_information_container: string,
-        shipping_method_container: string,
-        payment_information_container: string,
-        price_adjustments_container: string,
-        items_review_container: string,
-        summaryContainer: string,
-        formErrors: string,
-        review_order_button: string,
-        place_order_button: string,
-        signInContainerVisible: string,
-        reCaptchaMargin: string
-    })
-};