@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.js

@@ -0,0 +1,103 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Form } from 'informed';
+import { func, shape, string } from 'prop-types';
+import { useShippingForm } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingForm';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+import Button from '@magento/venia-ui/lib/components/Button';
+
+import Country from '@magento/venia-ui/lib/components/Country';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import Region from '@magento/venia-ui/lib/components/Region';
+import Postcode from '@magento/venia-ui/lib/components/Postcode';
+import defaultClasses from './shippingForm.module.css';
+
+const ShippingForm = props => {
+    const { hasMethods, selectedShippingFields, setIsCartUpdating } = props;
+    const talonProps = useShippingForm({
+        selectedValues: selectedShippingFields,
+        setIsCartUpdating
+    });
+    const {
+        errors,
+        handleOnSubmit,
+        handleZipChange,
+        handleOnSubmitKeyPress,
+        isSetShippingLoading
+    } = talonProps;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const shippingStatusMessage = isSetShippingLoading
+        ? formatMessage({
+            id: 'shippingForm.loading',
+            defaultMessage: 'Loading Methods...'
+        })
+        : formatMessage({
+            id: 'shippingForm.getShippingOptions',
+            defaultMessage: 'Get Shipping Options'
+        });
+
+    return (
+        <Fragment>
+            <h3 className={classes.formTitle}>
+                <FormattedMessage
+                    id={'shippingForm.formTitle'}
+                    defaultMessage={'Destination'}
+                />
+            </h3>
+            <FormError errors={Array.from(errors.values)} />
+            <Form
+                className={classes.root}
+                initialValues={selectedShippingFields}
+                onSubmit={handleOnSubmit}
+            >
+                <Country
+                    data-cy="ShippingMethods-ShippingForm-country"
+                    validate={isRequired}
+                />
+                <Region
+                    data-cy="ShippingMethods-ShippingForm-region"
+                    validate={isRequired}
+                />
+                <Postcode
+                    fieldInput="zip"
+                    data-cy="ShippingMethods-ShippingForm-postCode"
+                    validate={isRequired}
+                    onValueChange={handleZipChange}
+                />
+                {!hasMethods ? (
+                    <Button
+                        classes={{
+                            root_normalPriority: classes.submit
+                        }}
+                        data-cy="ShippingMethods-ShippingForm-submit"
+                        disabled={isSetShippingLoading}
+                        priority="normal"
+                        type="submit"
+                        onKeyDown={handleOnSubmitKeyPress}
+                    >
+                        {shippingStatusMessage}
+                    </Button>
+                ) : null}
+            </Form>
+        </Fragment>
+    );
+};
+
+export default ShippingForm;
+
+ShippingForm.propTypes = {
+    classes: shape({
+        zip: string
+    }),
+    selectedShippingFields: shape({
+        country: string.isRequired,
+        region: string.isRequired,
+        zip: string.isRequired
+    }),
+    setIsFetchingMethods: func
+};

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.module.css

@@ -0,0 +1,36 @@
+.root {
+    composes: gap-x-xs from global;
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas:
+        'country country'
+        'state zip'
+        'submit submit';
+}
+
+.formTitle {
+    composes: font-medium from global;
+}
+
+.zip {
+    grid-area: zip;
+}
+
+.submit {
+    composes: root_normalPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    composes: justify-self-start from global;
+}
+
+@media (max-width: 639px) {
+    .root {
+        /* Only one column in mobile view. */
+        grid-template-columns: 100%;
+        grid-template-areas:
+            'country'
+            'state'
+            'zip'
+            'submit';
+    }
+}

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.js

@@ -0,0 +1,103 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Form } from 'informed';
+import { useShippingMethods } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Button from '@magento/venia-ui/lib/components/Button';
+import ShippingForm from './shippingForm';
+import defaultClasses from './shippingMethods.module.css';
+import ShippingRadios from './shippingRadios';
+
+/**
+ * A child component of the PriceAdjustments component.
+ * This component renders the form for adding the shipping method for the cart.
+ *
+ * @param {Object} props
+ * @param {Function} props.setIsCartUpdating Function for setting the updating state of the cart.
+ * @param {Object} props.classes CSS className overrides.
+ * See [shippingMethods.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.module.css}
+ * for a list of classes you can override.
+ *
+ * @returns {React.Element}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import ShippingMethods from "@magento/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods";
+ */
+const ShippingMethods = props => {
+    const { setIsCartUpdating } = props;
+    const {
+        hasMethods,
+        isShowingForm,
+        selectedShippingFields,
+        selectedShippingMethod,
+        shippingMethods,
+        showForm,
+        showFormOnEnter
+    } = useShippingMethods();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const radios =
+        isShowingForm && hasMethods ? (
+            <Fragment>
+                <h3 className={classes.prompt}>
+                    <FormattedMessage
+                        id={'shippingMethods.prompt'}
+                        defaultMessage={'Shipping Methods'}
+                    />
+                </h3>
+                <Form>
+                    <ShippingRadios
+                        selectedShippingMethod={selectedShippingMethod}
+                        setIsCartUpdating={setIsCartUpdating}
+                        shippingMethods={shippingMethods}
+                    />
+                </Form>
+            </Fragment>
+        ) : null;
+
+    const formOrPlaceholder = isShowingForm ? (
+        <Fragment>
+            <ShippingForm
+                hasMethods={hasMethods}
+                selectedShippingFields={selectedShippingFields}
+                setIsCartUpdating={setIsCartUpdating}
+            />
+            {radios}
+        </Fragment>
+    ) : (
+        <Button
+            priority="normal"
+            type="button"
+            classes={{
+                root_normalPriority: classes.estimateButton,
+                content: 'gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center capitalize font-medium'
+            }}
+            data-cy="ShippingMethods-estimateButton"
+            onClick={showForm}
+            onKeyDown={showFormOnEnter}
+        >
+            <FormattedMessage
+                id={'shippingMethods.estimateButton'}
+                defaultMessage={'I want to estimate my shipping'}
+            />
+        </Button>
+    );
+
+    return (
+        <div className={classes.root} data-cy="ShippingMethods-root">
+            <p className={classes.message}>
+                <FormattedMessage
+                    id={'shippingMethods.message'}
+                    defaultMessage={
+                        'For shipping estimates before proceeding to checkout, please provide the Country, State, and ZIP for the destination of your order.'
+                    }
+                />
+            </p>
+            {formOrPlaceholder}
+        </div>
+    );
+};
+
+export default ShippingMethods;

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.module.css

@@ -0,0 +1,33 @@
+.root {
+    composes: gap-xs from global;
+    composes: grid from global;
+}
+
+.message {
+    composes: leading-normal from global;
+    composes: text-sm from global;
+}
+
+.prompt {
+    composes: font-medium from global;
+}
+
+.shipping_methods {
+    grid-area: methods;
+}
+
+.shipping_methods_hidden {
+    composes: shipping_methods;
+    composes: hidden from global;
+}
+
+.mask {
+    composes: opacity-50 from global;
+    composes: pointer-events-none from global;
+}
+
+.estimateButton {
+    composes: root_normalPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    composes: justify-self-start from global;
+}

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadio.js

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { number, string, shape } from 'prop-types';
+import Price from '@magento/venia-ui/lib/components/Price';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './shippingRadio.module.css';
+
+const ShippingRadio = props => {
+    const priceElement = props.price ? (
+        <Price value={props.price} currencyCode={props.currency} />
+    ) : (
+        <span>
+            <FormattedMessage id={'global.free'} defaultMessage={'FREE'} />
+        </span>
+    );
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <Fragment>
+            <span data-cy="ShippingRadio-name">{props.name}</span>
+            <div className={classes.price}>{priceElement}</div>
+        </Fragment>
+    );
+};
+
+export default ShippingRadio;
+
+ShippingRadio.propTypes = {
+    classes: shape({
+        price: string
+    }),
+    currency: string.isRequired,
+    name: string.isRequired,
+    price: number.isRequired
+};

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadio.module.css

@@ -0,0 +1,3 @@
+.price {
+    composes: font-medium from global;
+}

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadios.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { gql } from '@apollo/client';
+import { arrayOf, number, shape, string } from 'prop-types';
+import { useShippingRadios } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingRadios';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import RadioGroup from '@magento/venia-ui/lib/components/RadioGroup';
+import { CartPageFragment } from '@magento/peregrine/lib/talons/CartPage/cartPageFragments.gql.js';
+import ShippingRadio from './shippingRadio';
+import defaultClasses from './shippingRadios.module.css';
+import { SelectedShippingMethodCartFragment } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/shippingMethodsFragments.gql.js';
+
+const ShippingRadios = props => {
+    const {
+        setIsCartUpdating,
+        selectedShippingMethod,
+        shippingMethods
+    } = props;
+    const {
+        formattedShippingMethods,
+        handleShippingSelection
+    } = useShippingRadios({
+        setIsCartUpdating,
+        selectedShippingMethod,
+        shippingMethods,
+        mutations: {
+            setShippingMethodMutation: SET_SHIPPING_METHOD_MUTATION
+        }
+    });
+    const radioComponents = formattedShippingMethods.map(shippingMethod => {
+        return {
+            label: (
+                <ShippingRadio
+                    currency={shippingMethod.amount.currency}
+                    name={shippingMethod.method_title}
+                    price={shippingMethod.amount.value}
+                />
+            ),
+            value: shippingMethod.serializedValue
+        };
+    });
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const radioGroupClasses = {
+        radioLabel: classes.radioContents,
+        root: classes.radioRoot
+    };
+
+    return (
+        <RadioGroup
+            classes={radioGroupClasses}
+            field="method"
+            initialValue={selectedShippingMethod}
+            items={radioComponents}
+            onValueChange={handleShippingSelection}
+        />
+    );
+};
+
+export default ShippingRadios;
+
+export const SET_SHIPPING_METHOD_MUTATION = gql`
+    mutation SetShippingMethodForEstimate(
+        $cartId: String!
+        $shippingMethod: ShippingMethodInput!
+    ) {
+        setShippingMethodsOnCart(
+            input: { cart_id: $cartId, shipping_methods: [$shippingMethod] }
+        ) {
+            cart {
+                id
+                # If this mutation causes "free" to become available we need to know.
+                available_payment_methods {
+                    code
+                    title
+                }
+                ...CartPageFragment
+                ...SelectedShippingMethodCartFragment
+                # Intentionally do not re-fetch available shipping methods because
+                #  a) they are wrong in the mutation response
+                #  b) it is expensive to recalculate.
+            }
+        }
+    }
+    ${CartPageFragment}
+    ${SelectedShippingMethodCartFragment}
+`;
+
+ShippingRadios.propTypes = {
+    classes: shape({
+        radioContents: string,
+        radioRoot: string
+    }),
+    selectedShippingMethod: string,
+    shippingMethods: arrayOf(
+        shape({
+            amount: shape({
+                currency: string.isRequired,
+                value: number.isRequired
+            }),
+            carrier_code: string.isRequired,
+            method_code: string.isRequired,
+            method_title: string.isRequired
+        })
+    )
+};

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadios.module.css

@@ -0,0 +1,10 @@
+.radioContents {
+    composes: grid from global;
+    composes: grid-cols-autoFirst from global;
+    composes: gap-2xs from global;
+}
+
+.radioRoot {
+    composes: gap-2xs from global;
+    composes: grid from global;
+}

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/giftCardSection.ce.js

@@ -0,0 +1,7 @@
+/**
+ * Gift Card support is an AC-only feature.
+ * Here in MOS, don't render the Accordion section at all.
+ */
+export default () => {
+    return null;
+};

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/giftCardSection.ee.js

@@ -0,0 +1,28 @@
+import React, { Suspense } from 'react';
+import { useIntl } from 'react-intl';
+
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { Section } from '@magento/venia-ui/lib/components/Accordion';
+
+const GiftCards = React.lazy(() => import('../GiftCards'));
+
+const GiftCardSection = props => {
+    const { setIsCartUpdating } = props;
+    const { formatMessage } = useIntl();
+    return (
+        <Section
+            id={'gift_card'}
+            data-cy="PriceAdjustments-giftCardSection"
+            title={formatMessage({
+                id: 'giftCardSection.giftCard',
+                defaultMessage: 'Apply Gift Card'
+            })}
+        >
+            <Suspense fallback={<LoadingIndicator />}>
+                <GiftCards setIsCartUpdating={setIsCartUpdating} />
+            </Suspense>
+        </Section>
+    );
+};
+
+export default GiftCardSection;

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/giftOptionsSection.ce.js

@@ -0,0 +1,7 @@
+/**
+ * Gift Options support is an AC-only feature for now.
+ * Here in MOS, don't render the Accordion section at all.
+ */
+export default () => {
+    return null;
+};

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/giftOptionsSection.ee.js

@@ -0,0 +1,38 @@
+import React, { Suspense } from 'react';
+import { useIntl } from 'react-intl';
+
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { Section } from '@magento/venia-ui/lib/components/Accordion';
+import { useGiftOptionsSection } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/useGiftOptionsSection';
+
+const GiftOptions = React.lazy(() => import('./GiftOptions'));
+
+const GiftOptionsSection = () => {
+    const { formatMessage } = useIntl();
+    const {
+        giftOptionsConfigData,
+        isLoading,
+        isVisible
+    } = useGiftOptionsSection();
+
+    if (isLoading || !isVisible) {
+        return null;
+    }
+
+    return (
+        <Section
+            id={'gift_options'}
+            data-cy="PriceAdjustments-giftOptionsSection"
+            title={formatMessage({
+                id: 'priceAdjustments.giftOptions',
+                defaultMessage: 'See Gift Options'
+            })}
+        >
+            <Suspense fallback={<LoadingIndicator />}>
+                <GiftOptions giftOptionsConfigData={giftOptionsConfigData} />
+            </Suspense>
+        </Section>
+    );
+};
+
+export default GiftOptionsSection;

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/index.js

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

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

@@ -0,0 +1,95 @@
+import React, { Suspense } from 'react';
+import { useIntl } from 'react-intl';
+import { func } from 'prop-types';
+
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { Accordion, Section } from '@magento/venia-ui/lib/components/Accordion';
+import GiftCardSection from './giftCardSection';
+import GiftOptionsSection from './giftOptionsSection';
+import defaultClasses from './priceAdjustments.module.css';
+import cn from 'classnames';
+
+const CouponCode = React.lazy(() => import('./CouponCode'));
+const ShippingMethods = React.lazy(() => import('./ShippingMethods'));
+
+/**
+ * PriceAdjustments is a child component of the CartPage component.
+ * It renders the price adjustments forms for applying gift cards, coupons, and the shipping method.
+ * All of which can adjust the cart total.
+ *
+ * @param {Object} props
+ * @param {Function} props.setIsCartUpdating A callback function for setting the updating state of the cart.
+ * @param {Object} props.classes CSS className overrides.
+ * See [priceAdjustments.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.module.css}
+ * for a list of classes you can override.
+ *
+ * @returns {React.Element}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import PriceAdjustments from '@magento/venia-ui/lib/components/CartPage/PriceAdjustments'
+ */
+const PriceAdjustments = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const { setIsCartUpdating } = props;
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={classes.root} data-cy="PriceAdjustments-root">
+            <Accordion
+                canOpenMultiple={true}
+                classes={{
+                    root: cn('border-none flex flex-col gap-4')
+                }}
+            >
+                <Section
+                    id={'shipping_method'}
+                    data-cy="PriceAdjustments-shippingMethodSection"
+                    title={formatMessage({
+                        id: 'priceAdjustments.shippingMethod',
+                        defaultMessage: 'Estimate your Shipping'
+                    })}
+                    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 />}>
+                        <ShippingMethods
+                            setIsCartUpdating={setIsCartUpdating}
+                        />
+                    </Suspense>
+                </Section>
+                <Section
+                    id={'coupon_code'}
+                    data-cy="PriceAdjustments-couponCodeSection"
+                    title={formatMessage({
+                        id: 'priceAdjustments.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={setIsCartUpdating} />
+                    </Suspense>
+                </Section>
+                <GiftCardSection setIsCartUpdating={setIsCartUpdating} />
+                <GiftOptionsSection />
+            </Accordion>
+        </div>
+    );
+};
+
+export default PriceAdjustments;
+
+PriceAdjustments.propTypes = {
+    setIsCartUpdating: func
+};

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

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