@riosst100/pwa-marketplace 1.8.9 → 1.9.0

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

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

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

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

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

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

@@ -0,0 +1,472 @@
+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
+    })
+};