@riosst100/pwa-marketplace 1.8.8 → 1.9.0

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.module.css

@@ -0,0 +1,90 @@
+.root {
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: fixed from global;
+    composes: grid from global;
+    composes: grid-rows-autoFirst from global;
+    composes: h-full from global;
+    composes: left-auto from global;
+    composes: max-w-modal from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+    composes: right-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-dialog from global;
+    transform: scale(1.15);
+    transition-duration: 192ms;
+    transition-timing-function: var(--venia-global-anim-out);
+    transition-property: opacity, transform, visibility;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+
+    composes: lg_h-auto from global;
+    composes: lg_max-h-modal from global;
+    composes: lg_max-w-[740px] from global;
+    composes: lg_top-[5vh] from global;
+}
+
+@media (max-width: 959px) {
+    .root {
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@media (min-width: 960px) {
+
+    /* TODO @TW: review */
+    .root {
+        left: calc(50% - 370px);
+    }
+}
+
+.root_open {
+    composes: root;
+
+    composes: opacity-100 from global;
+    composes: shadow-modal from global;
+    transform: scale(1);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
+    composes: rounded-md from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+}
+
+@media (max-width: 959px) {
+    .root_open {
+        composes: root;
+
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.body {
+    composes: overflow-auto from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+
+    composes: lg_px-md from global;
+}
+
+.header {
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-between from global;
+    composes: p-3.5 from global;
+
+    composes: lg_px-md from global;
+    composes: lg_py-3.5 from global;
+}
+
+.headerText {
+    composes: self-center from global;
+    composes: text-[15px] from global;
+    composes: font-medium from global;
+}

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

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

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

@@ -0,0 +1,149 @@
+import React, { Fragment, Suspense } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { func, string, shape } from 'prop-types';
+import { Edit2 as EditIcon } from 'react-feather';
+import { useShippingInformation } from '@magento/peregrine/lib/talons/CheckoutPage/ShippingInformation/useShippingInformation';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import AddressForm from './AddressForm';
+import Card from './card';
+import defaultClasses from './shippingInformation.module.css';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import cn from 'classnames';
+
+const EditModal = React.lazy(() => import('./editModal'));
+
+const ShippingInformation = props => {
+    const {
+        classes: propClasses,
+        onSave,
+        onSuccess,
+        toggleActiveContent,
+        toggleSignInContent,
+        setGuestSignInUsername
+    } = props;
+    const talonProps = useShippingInformation({
+        onSave,
+        toggleActiveContent
+    });
+    const {
+        doneEditing,
+        handleEditShipping,
+        hasUpdate,
+        isSignedIn,
+        isLoading,
+        shippingData
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const rootClassName = !doneEditing
+        ? classes.root_editMode
+        : hasUpdate
+            ? classes.root_updated
+            : classes.root;
+
+    if (isLoading) {
+        return (
+            <LoadingIndicator classes={{ root: classes.loading }}>
+                <FormattedMessage
+                    id={'shippingInformation.loading'}
+                    defaultMessage={'Fetching Shipping Information...'}
+                />
+            </LoadingIndicator>
+        );
+    }
+
+    const editModal = !isSignedIn ? (
+        <Suspense fallback={null}>
+            <EditModal onSuccess={onSuccess} shippingData={shippingData} />
+        </Suspense>
+    ) : null;
+
+    const shippingInformation = doneEditing ? (
+        <Fragment>
+            <div className={classes.cardHeader}>
+                <h5 className={classes.cardTitle}>
+                    <FormattedMessage
+                        id={'shippingInformation.cardTitle'}
+                        defaultMessage={'Shipping Information'}
+                    />
+                </h5>
+                <LinkButton
+                    onClick={handleEditShipping}
+                    className={classes.editButton}
+                    data-cy="ShippingInformation-editButton"
+                >
+                    <Icon
+                        size={16}
+                        src={EditIcon}
+                        classes={{ icon: classes.editIcon }}
+                    />
+                    <span className={classes.editText}>
+                        <FormattedMessage
+                            id={'global.editButton'}
+                            defaultMessage={'Edit'}
+                        />
+                    </span>
+                </LinkButton>
+            </div>
+            <Card shippingData={shippingData} />
+            {editModal}
+        </Fragment>
+    ) : (
+        <Fragment>
+            <h3
+                data-cy="ShippingInformation-editTitle"
+                className={classes.editTitle}
+            >
+                <FormattedMessage
+                    id={'shippingInformation.editTitle'}
+                    defaultMessage={'Shipping Information'}
+                />
+            </h3>
+            <div className={classes.editWrapper}>
+                <AddressForm
+                    onSuccess={onSuccess}
+                    shippingData={shippingData}
+                    toggleSignInContent={toggleSignInContent}
+                    setGuestSignInUsername={setGuestSignInUsername}
+                />
+            </div>
+        </Fragment>
+    );
+
+    return (
+        <div
+            className={cn(
+                rootClassName,
+                '!border border-gray-100 !rounded-md !p-4'
+            )}
+            data-cy="ShippingInformation-root"
+        >
+            {shippingInformation}
+        </div>
+    );
+};
+
+export default ShippingInformation;
+
+ShippingInformation.propTypes = {
+    classes: shape({
+        root: string,
+        root_editMode: string,
+        cardHeader: string,
+        cartTitle: string,
+        editWrapper: string,
+        editTitle: string,
+        editButton: string,
+        editIcon: string,
+        editText: string
+    }),
+    onSave: func.isRequired,
+    onSuccess: func.isRequired,
+    toggleActiveContent: func.isRequired,
+    toggleSignInContent: func.isRequired,
+    setGuestSignInUsername: func.isRequired
+};

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.module.css

@@ -0,0 +1,88 @@
+.root {
+    /* TODO @TW: review (B6) */
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: p-md from global;
+    composes: rounded-md from global;
+}
+
+.root_editMode {
+    composes: root;
+
+    /* TODO @TW: review (B6) */
+    composes: border-0 from global;
+    composes: border-b-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: p-0 from global;
+    composes: rounded-none from global;
+}
+
+.root_updated {
+    composes: root;
+
+    animation: flash var(--venia-global-anim-bounce) 640ms 2;
+}
+
+.cardHeader {
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
+}
+
+.cardTitle {
+    composes: font-medium from global;
+    composes: text-[16px] from global;
+}
+
+.editButton {
+    composes: -m-xs from global;
+    composes: p-xs from global;
+    composes: text-brand-dark from global;
+}
+
+.editWrapper {
+    composes: grid from global;
+    composes: pb-sm from global;
+    composes: pt-xs from global;
+    composes: px-0 from global;
+    composes: gap-y-2xs from global;
+}
+
+.editTitle {
+    composes: font-medium from global;
+    composes: text-[16px] from global;
+    composes: capitalize from global;
+
+}
+
+.editIcon {
+    composes: stroke-brand-base from global;
+}
+
+.editText {
+    composes: hidden from global;
+
+    composes: lg_inline from global;
+}
+
+.loading {
+    composes: root from '@magento/venia-ui/lib/components/LoadingIndicator/indicator.module.css';
+
+    composes: text-center from global;
+}
+
+@keyframes flash {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { func, number, shape, string } from 'prop-types';
+import { Edit2 as EditIcon } from 'react-feather';
+
+import Price from '@magento/venia-ui/lib/components/Price';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import defaultClasses from './completedView.module.css';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+
+const CompletedView = props => {
+    const { selectedShippingMethod, showUpdateMode } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    let contents;
+    if (!selectedShippingMethod) {
+        // Error state.
+        contents = (
+            <span className={classes.error}>
+                <FormattedMessage
+                    id={'completedView.errorLoading'}
+                    defaultMessage={
+                        'Error loading selected shipping method. Please select again.'
+                    }
+                />
+            </span>
+        );
+    } else {
+        const { amount, method_title } = selectedShippingMethod;
+        const { currency, value } = amount;
+
+        const priceElement = value ? (
+            <div>
+                <Price value={value} currencyCode={currency} />
+            </div>
+        ) : (
+            <span className={classes.free}>
+                <FormattedMessage id={'global.free'} defaultMessage={'Free'} />
+            </span>
+        );
+
+        contents = (
+            <div className={classes.contents}>
+                <span>{method_title}</span>
+                {priceElement}
+            </div>
+        );
+    }
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.container}>
+                <span className={classes.titleContainer}>
+                    <h5 className={classes.heading}>
+                        <FormattedMessage
+                            id={'completedView.shippingMethod'}
+                            defaultMessage={'Shipping Method'}
+                        />
+                    </h5>
+                    <LinkButton
+                        className={classes.editButton}
+                        onClick={showUpdateMode}
+                        data-cy="CompletedView-editButton"
+                    >
+                        <Icon
+                            size={16}
+                            src={EditIcon}
+                            classes={{ icon: classes.editIcon }}
+                        />
+                        <span className={classes.editButtonText}>
+                            <FormattedMessage
+                                id={'global.editButton'}
+                                defaultMessage={'Edit'}
+                            />
+                        </span>
+                    </LinkButton>
+                </span>
+                {contents}
+            </div>
+        </div>
+    );
+};
+
+export default CompletedView;
+
+CompletedView.propTypes = {
+    classes: shape({
+        button: string,
+        container: string,
+        contents: string,
+        editButton: string,
+        editButtonText: string,
+        editIcon: string,
+        error: string,
+        free: string,
+        heading: string,
+        root: string,
+        titleContainer: string
+    }),
+    selectedShippingMethod: shape({
+        amount: shape({
+            currency: string,
+            value: number
+        }),
+        carrier_code: string,
+        carrier_title: string,
+        method_code: string,
+        method_title: string
+    }),
+    showUpdateMode: func
+};

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

@@ -0,0 +1,48 @@
+.root {
+    composes: h-full from global;
+}
+
+.contents {
+    grid-template-rows: auto auto;
+    composes: gap-y-2xs from global;
+    composes: grid from global;
+    composes: mt-xs from global;
+    composes: text-left from global;
+}
+
+.editButton {
+    composes: p-xs from global;
+    composes: -m-xs from global;
+    composes: text-brand-dark from global;
+}
+
+.editButtonText {
+    composes: hidden from global;
+
+    composes: lg_inline from global;
+}
+
+.editIcon {
+    composes: stroke-brand-base from global;
+}
+
+.error {
+    composes: leading-normal from global;
+    composes: self-center from global;
+    composes: text-error from global;
+}
+
+.free {
+    composes: uppercase from global;
+}
+
+.heading {
+    composes: font-medium from global;
+    composes: text-[16px] from global;
+}
+
+.titleContainer {
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
+}

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

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

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

@@ -0,0 +1,154 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { bool, func, shape, string } from 'prop-types';
+import { Form } from 'informed';
+
+import {
+    displayStates,
+    useShippingMethod
+} from '@magento/peregrine/lib/talons/CheckoutPage/ShippingMethod/useShippingMethod';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Button from '@magento/venia-ui/lib/components/Button';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import CompletedView from './completedView';
+import ShippingRadios from './shippingRadios';
+import UpdateModal from './updateModal';
+import defaultClasses from './shippingMethod.module.css';
+
+const initializingContents = (
+    <LoadingIndicator>
+        <FormattedMessage
+            id={'shippingMethod.loading'}
+            defaultMessage={'Loading shipping methods...'}
+        />
+    </LoadingIndicator>
+);
+
+const ShippingMethod = props => {
+    const { onSave, onSuccess, pageIsUpdating, setPageIsUpdating } = props;
+
+    const talonProps = useShippingMethod({
+        onSave,
+        onSuccess,
+        setPageIsUpdating
+    });
+
+    const {
+        displayState,
+        errors,
+        handleCancelUpdate,
+        handleSubmit,
+        isLoading,
+        isUpdateMode,
+        selectedShippingMethod,
+        shippingMethods,
+        showUpdateMode
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    let contents;
+
+    if (displayState === displayStates.DONE) {
+        const updateFormInitialValues = {
+            shipping_method: selectedShippingMethod.serializedValue
+        };
+
+        contents = (
+            <Fragment>
+                <div className={classes.done} data-cy="ShippingMethod-done">
+                    <CompletedView
+                        selectedShippingMethod={selectedShippingMethod}
+                        showUpdateMode={showUpdateMode}
+                    />
+                </div>
+                <UpdateModal
+                    formErrors={Array.from(errors.values())}
+                    formInitialValues={updateFormInitialValues}
+                    handleCancel={handleCancelUpdate}
+                    handleSubmit={handleSubmit}
+                    isLoading={isLoading}
+                    isOpen={isUpdateMode}
+                    pageIsUpdating={pageIsUpdating}
+                    shippingMethods={shippingMethods}
+                />
+            </Fragment>
+        );
+    } else {
+        // We're either initializing or editing.
+        let bodyContents = initializingContents;
+
+        if (displayState === displayStates.EDITING) {
+            const lowestCostShippingMethodSerializedValue = shippingMethods.length
+                ? shippingMethods[0].serializedValue
+                : '';
+            const lowestCostShippingMethod = {
+                shipping_method: lowestCostShippingMethodSerializedValue
+            };
+
+            bodyContents = (
+                <Form
+                    className={classes.form}
+                    initialValues={lowestCostShippingMethod}
+                    onSubmit={handleSubmit}
+                >
+                    <ShippingRadios
+                        disabled={pageIsUpdating || isLoading}
+                        shippingMethods={shippingMethods}
+                    />
+                    <div className={classes.formButtons}>
+                        <Button
+                            data-cy="ShippingMethod-submitButton"
+                            priority="normal"
+                            type="submit"
+                            disabled={pageIsUpdating || isLoading}
+                        >
+                            <FormattedMessage
+                                id={'shippingMethod.continueToNextStep'}
+                                defaultMessage={
+                                    'Continue to Payment Information'
+                                }
+                            />
+                        </Button>
+                    </div>
+                </Form>
+            );
+        }
+
+        contents = (
+            <div data-cy="ShippingMethod-root" className={classes.root}>
+                <h3
+                    data-cy="ShippingMethod-heading"
+                    className={classes.editingHeading}
+                >
+                    <FormattedMessage
+                        id={'shippingMethod.heading'}
+                        defaultMessage={'Shipping Method'}
+                    />
+                </h3>
+                <FormError errors={Array.from(errors.values())} />
+                {bodyContents}
+            </div>
+        );
+    }
+
+    return <Fragment>{contents}</Fragment>;
+};
+
+ShippingMethod.propTypes = {
+    classes: shape({
+        done: string,
+        editingHeading: string,
+        form: string,
+        formButtons: string,
+        root: string
+    }),
+    onSave: func.isRequired,
+    onSuccess: func.isRequired,
+    pageIsUpdating: bool,
+    setPageIsUpdating: func.isRequired
+};
+
+export default ShippingMethod;

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

@@ -0,0 +1,27 @@
+.root {
+    composes: grid from global;
+    composes: gap-y-xs from global;
+    composes: p-4 from global;
+    composes: rounded-md from global;
+}
+
+.done {
+    composes: root;
+}
+
+.editingHeading {
+    composes: capitalize from global;
+    composes: text-[16px] from global;
+    composes: font-medium from global;
+}
+
+.form {
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: grid-rows-autoLast from global;
+}
+
+.formButtons {
+    composes: flex from global;
+    composes: justify-center from global;
+}