@riosst100/pwa-marketplace 2.0.7 → 2.0.9

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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