@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/product.module.css

@@ -0,0 +1,156 @@
+.root {
+    composes: gap-y-2xs from global;
+    composes: grid from global;
+}
+
+.item {
+    composes: gap-x-2xs from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: items-start from global;
+    grid-template-areas: 'image details kebab';
+    grid-template-columns: 100px 1fr min-content;
+}
+
+.item_disabled {
+    composes: item;
+    composes: opacity-50 from global;
+}
+
+.errorText {
+    composes: leading-normal from global;
+    composes: text-error from global;
+}
+
+/* TODO @TW: cannot compose */
+.errorText:empty {
+    display: none;
+}
+
+.imageContainer {
+    grid-area: image;
+    flex-basis: 100px;
+}
+
+.imageRoot {
+    composes: h-full from global;
+    composes: w-[100px] from global;
+}
+
+.image {
+    composes: bg-subtle from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: h-full from global;
+    composes: object-contain from global;
+    composes: object-center from global;
+    composes: rounded-sm from global;
+}
+
+.details {
+    composes: gap-2xs from global;
+    composes: leading-normal from global;
+
+    composes: sm_grid from global;
+}
+
+@media (min-width: 640px) {
+    .details {
+        grid-area: details;
+        grid-template-areas:
+            'name name'
+            'options quantity'
+            'price quantity'
+            'stock quantity';
+        grid-template-columns: 2fr 1fr;
+    }
+}
+
+.name {
+    composes: font-medium from global;
+    grid-area: name;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: normal;
+}
+
+.price {
+    composes: text-sm from global;
+    grid-area: price;
+}
+
+.quantity {
+    composes: grid from global;
+    composes: items-start from global;
+    composes: justify-items-start from global;
+    grid-area: quantity;
+
+    composes: sm_justify-items-center from global;
+}
+
+.kebab {
+    composes: relative from global;
+    grid-area: kebab;
+}
+
+.sectionText {
+    composes: pointer-events-none from global;
+    composes: px-2xs from global;
+    composes: py-1 from global;
+    composes: text-sm from global;
+}
+
+.options {
+    composes: gap-0.5 from global;
+    composes: grid from global;
+    composes: text-sm from global;
+    grid-area: options;
+}
+
+.optionLabel {
+    composes: auto-cols-max from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+}
+
+.stockStatusMessage {
+    composes: font-medium from global;
+    composes: text-error from global;
+    composes: text-sm from global;
+    grid-area: stock;
+}
+
+/* TODO @TW: cannot compose */
+.stockStatusMessage:empty {
+    display: none;
+}
+
+.addToListButton {
+    --stroke: rgb(var(--venia-global-color-teal));
+
+    composes: content-center from global;
+    composes: gap-x-xs from global;
+    composes: inline-flex from global;
+    composes: px-2.5 from global;
+    composes: py-3.5 from global;
+    composes: text-sm from global;
+    composes: w-full from global;
+}
+
+.addToListButton_selected {
+    composes: hidden from global;
+}
+
+@media (max-width: 639px) {
+
+    .name,
+    .options,
+    .price,
+    .stockStatusMessage,
+    .quantity {
+        grid-area: auto;
+    }
+}

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/productListing.js

@@ -0,0 +1,94 @@
+import React, { Fragment, Suspense } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useProductListing } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useProductListing';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import defaultClasses from './productListing.module.css';
+import Product from './product';
+import ErrorMessage from './errorMessage';
+import cn from 'classnames';
+
+const EditModal = React.lazy(() => import('./EditModal'));
+/**
+ * A child component of the CartPage component.
+ * This component renders the product listing on the cart page.
+ *
+ * @param {Object} props
+ * @param {Function} props.setIsCartUpdating Function for setting the updating state of the cart.
+ * @param {Object} props.classes CSS className overrides.
+ * See [productListing.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/ProductListing/productListing.module.css}
+ * for a list of classes you can override.
+ *
+ * @returns {React.Element}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import ProductListing from "@magento/venia-ui/lib/components/CartPage/ProductListing";
+ */
+const ProductListing = props => {
+    const {
+        onAddToWishlistSuccess,
+        setIsCartUpdating,
+        fetchCartDetails
+    } = props;
+
+    const talonProps = useProductListing();
+
+    const {
+        activeEditItem,
+        isLoading,
+        error,
+        items,
+        setActiveEditItem,
+        wishlistConfig
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    if (isLoading) {
+        return (
+            <LoadingIndicator>
+                <FormattedMessage
+                    id={'productListing.loading'}
+                    defaultMessage={'Fetching Cart...'}
+                />
+            </LoadingIndicator>
+        );
+    }
+
+    if (items.length) {
+        const productComponents = items.map(product => (
+            <Product
+                item={product}
+                key={product.uid}
+                setActiveEditItem={setActiveEditItem}
+                setIsCartUpdating={setIsCartUpdating}
+                onAddToWishlistSuccess={onAddToWishlistSuccess}
+                fetchCartDetails={fetchCartDetails}
+                wishlistConfig={wishlistConfig}
+            />
+        ));
+
+        return (
+            <Fragment>
+                <ErrorMessage error={error} />
+                <ul className={cn(classes.root, 'border border-gray-100 rounded-md')} data-cy="ProductListing-root">
+                    <div className='px-4'>
+                        {productComponents}
+                    </div>
+                </ul>
+                <Suspense fallback={null}>
+                    <EditModal
+                        item={activeEditItem}
+                        setIsCartUpdating={setIsCartUpdating}
+                        setActiveEditItem={setActiveEditItem}
+                    />
+                </Suspense>
+            </Fragment>
+        );
+    }
+
+    return null;
+};
+
+export default ProductListing;

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/productListing.module.css

@@ -0,0 +1,11 @@
+.root {
+    composes: gap-x-md from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+}
+
+.errorText {
+    composes: leading-normal from global;
+    composes: mb-xs from global;
+    composes: text-error from global;
+}

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/quantity.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Form } from 'informed';
+import { func, number, string } from 'prop-types';
+import QuantityStepper from '@magento/venia-ui/lib/components/QuantityStepper';
+
+const Quantity = props => {
+    return (
+        <Form
+            initialValues={{
+                quantity: props.initialValue
+            }}
+        >
+            <QuantityStepper {...props} />
+        </Form>
+    );
+};
+
+Quantity.propTypes = {
+    initialValue: number,
+    itemId: string,
+    label: string,
+    min: number,
+    onChange: func,
+    message: string
+};
+
+Quantity.defaultProps = {
+    label: 'Quantity',
+    min: 0,
+    initialValue: 1,
+    onChange: () => { }
+};
+
+/**
+ * @deprecated - moved to component directory in 12.4.0
+ * @see QuantityStepper
+ */
+export const QuantityFields = QuantityStepper;
+
+export default Quantity;

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

@@ -0,0 +1,126 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Check } from 'react-feather';
+import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { useToasts } from '@magento/peregrine';
+
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
+import StockStatusMessage from '@magento/venia-ui/lib/components/StockStatusMessage';
+import PriceAdjustments from './PriceAdjustments';
+import PriceSummary from './PriceSummary';
+import ProductListing from './ProductListing';
+import defaultClasses from './cartPage.module.css';
+import cn from 'classnames';
+
+const CheckIcon = <Icon size={20} src={Check} />;
+
+/**
+ * Structural page component for the shopping cart.
+ * This is the main component used in the `/cart` route in Venia.
+ * It uses child components to render the different pieces of the cart page.
+ *
+ * @see {@link https://venia.magento.com/cart}
+ *
+ * @param {Object} props
+ * @param {Object} props.classes CSS className overrides for the component.
+ * See [cartPage.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/cartPage.module.css}
+ * for a list of classes you can override.
+ *
+ * @returns {React.Element}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import CartPage from "@magento/venia-ui/lib/components/CartPage";
+ */
+const CartPage = props => {
+    const talonProps = useCartPage();
+
+    const {
+        cartItems,
+        hasItems,
+        isCartUpdating,
+        fetchCartDetails,
+        onAddToWishlistSuccess,
+        setIsCartUpdating,
+        shouldShowLoadingIndicator,
+        wishlistSuccessProps
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+    const [, { addToast }] = useToasts();
+
+    useEffect(() => {
+        if (wishlistSuccessProps) {
+            addToast({ ...wishlistSuccessProps, icon: CheckIcon });
+        }
+    }, [addToast, wishlistSuccessProps]);
+
+    if (shouldShowLoadingIndicator) {
+        return fullPageLoadingIndicator;
+    }
+
+    const productListing = hasItems ? (
+        <ProductListing
+            onAddToWishlistSuccess={onAddToWishlistSuccess}
+            setIsCartUpdating={setIsCartUpdating}
+            fetchCartDetails={fetchCartDetails}
+        />
+    ) : (
+        <h3>
+            <FormattedMessage
+                id={'cartPage.emptyCart'}
+                defaultMessage={'There are no items in your cart.'}
+            />
+        </h3>
+    );
+
+    const priceAdjustments = hasItems ? (
+        <PriceAdjustments setIsCartUpdating={setIsCartUpdating} />
+    ) : null;
+
+    const priceSummary = hasItems ? (
+        <PriceSummary isUpdating={isCartUpdating} />
+    ) : null;
+
+    return (
+        <div className={classes.root} data-cy="CartPage-root">
+            <StoreTitle>
+                {formatMessage({
+                    id: 'cartPage.title',
+                    defaultMessage: 'Cart'
+                })}
+            </StoreTitle>
+            <div className={cn(classes.heading_container, 'mb-[30px]')}>
+                <h1
+                    aria-live="polite"
+                    data-cy="CartPage-heading"
+                    className={cn(classes.heading, 'text-xl font-medium')}
+                >
+                    <FormattedMessage
+                        id={'cartPage.heading'}
+                        defaultMessage={'Cart'}
+                    />
+                </h1>
+                <div className={classes.stockStatusMessageContainer}>
+                    <StockStatusMessage cartItems={cartItems} />
+                </div>
+            </div>
+            <div className={classes.body}>
+                <div className={classes.items_container}>{productListing}</div>
+                <div className={classes.price_adjustments_container}>
+                    {priceAdjustments}
+                </div>
+                <div className={classes.summary_container}>
+                    <div className={classes.summary_contents}>
+                        {priceSummary}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CartPage;

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

@@ -0,0 +1,64 @@
+.root {
+    composes: mx-auto from global;
+    composes: my-[26px] from global;
+}
+
+.body {
+    composes: grid from global;
+    composes: gap-md from global;
+    grid-template-columns: 1fr 18rem;
+    /* The summary grid item spans the entire right column. */
+    grid-template-areas:
+        'items summary'
+        'adjustments summary';
+}
+
+.heading_container {
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: mb-xs from global;
+}
+
+.heading {
+    composes: leading-tight from global;
+}
+
+/* TODO @TW: cannot compose */
+.stockStatusMessageContainer:empty {
+    display: none;
+}
+
+.items_container {
+    grid-area: items;
+}
+
+.price_adjustments_container {
+    grid-area: adjustments;
+}
+
+.summary_container {
+    composes: h-full from global;
+    grid-area: summary;
+}
+
+.summary_contents {
+    composes: sticky from global;
+    /*
+     * TODO: Use CSS Properties (variables) or something instead of hardcoding this.
+     *  - 3.5rem = min-height of nav header. See the "toolbar" class in header.css.
+     *  - 2rem = padding-top of the cart page.
+     */
+    composes: top-[9rem] from global;
+    /* TODO @TW: review */
+}
+
+@media (max-width: 959px) {
+    .body {
+        /* Only one column in mobile view. */
+        grid-template-columns: 100%;
+        grid-template-areas:
+            'items'
+            'adjustments'
+            'summary';
+    }
+}

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

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

package/src/overwrites/venia-ui/lib/components/Checkbox/checkbox.js

@@ -0,0 +1,78 @@
+import React, { Fragment, useEffect } from 'react';
+import { node, shape, string } from 'prop-types';
+import { Checkbox as InformedCheckbox, useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { Message } from '@magento/venia-ui/lib/components/Field';
+import { CheckSquare, Square } from 'react-feather';
+import defaultClasses from './checkbox.module.css';
+
+/* TODO: change lint config to use `label-has-associated-control` */
+/* eslint-disable jsx-a11y/label-has-for */
+
+const checkedIcon = <CheckSquare size={14} />;
+const uncheckedIcon = <Square size={14} />;
+
+const Checkbox = props => {
+    const {
+        ariaLabel,
+        classes: propClasses,
+        field,
+        fieldValue,
+        id,
+        label,
+        message,
+        ...rest
+    } = props;
+    const fieldApi = useFieldApi(field);
+    const fieldState = useFieldState(field);
+    const classes = useStyle(defaultClasses, propClasses);
+    const icon = fieldState.value ? checkedIcon : uncheckedIcon;
+
+    useEffect(() => {
+        if (fieldValue != null && fieldValue !== fieldState.value) {
+            fieldApi.setValue(fieldValue);
+        }
+    }, [fieldApi, fieldState.value, fieldValue]);
+
+    return (
+        <Fragment>
+            <label
+                data-cy="Checkbox-label"
+                aria-label={ariaLabel}
+                className={classes.root}
+                htmlFor={id}
+            >
+                <InformedCheckbox
+                    {...rest}
+                    className={classes.input}
+                    field={field}
+                    id={id}
+                />
+                <span className={classes.icon}>{icon}</span>
+                <span className={classes.label}>{label}</span>
+            </label>
+            <Message fieldState={fieldState}>{message}</Message>
+        </Fragment>
+    );
+};
+
+export default Checkbox;
+
+Checkbox.propTypes = {
+    ariaLabel: string,
+    classes: shape({
+        icon: string,
+        input: string,
+        label: string,
+        message: string,
+        root: string
+    }),
+    field: string.isRequired,
+    id: string,
+    label: node.isRequired,
+    message: node
+};
+
+/* eslint-enable jsx-a11y/label-has-for */

package/src/overwrites/venia-ui/lib/components/Checkbox/checkbox.module.css

@@ -0,0 +1,73 @@
+.root {
+    --stroke: var(--venia-global-color-gray-600);
+
+    composes: gap-[8px] from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: leading-normal from global;
+    composes: text-colorDefault from global;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
+}
+
+.input {
+    composes: appearance-none from global;
+    composes: bg-transparent from global;
+    composes: border-1 from global;
+    composes: border-solid from global;
+    composes: border-transparent from global;
+    composes: cursor-pointer from global;
+    composes: h-[14px] from global;
+    composes: rounded from global;
+    composes: w-[14px] from global;
+    grid-area: input;
+
+    /* TODO @TW: review, replaces input:disabled. Check if working. */
+    composes: disabled_cursor-not-allowed from global;
+}
+
+.icon {
+    composes: h-[14px] from global;
+    composes: pointer-events-none from global;
+    composes: w-[14px] from global;
+    grid-area: input;
+}
+
+.icon svg {
+    stroke: rgb(var(--stroke));
+}
+
+.label {
+    composes: cursor-pointer from global;
+    composes: justify-self-start from global;
+    composes: text-colorDefault from global;
+    grid-area: label;
+    composes: text-base from global;
+}
+
+/* When the input is disabled, update the cursor on the sibling label element. */
+/* TODO @TW: cannot compose */
+.input:disabled~.label {
+    cursor: default;
+}
+
+.input:checked:enabled+.icon {
+    /* --stroke: var(--venia-brand-color-1-700); */
+}
+
+/* TODO @TW: cannot compose, needs "checked" variant enabled. Cannot combine variants. */
+.input:active:enabled,
+.input:focus:enabled {
+    /* composes: active_shadow-radioActive from global; */
+    /* composes: focus_shadow-radioFocus from global; */
+    /* box-shadow: -3px 3px rgb(var(--venia-brand-color-1-100)); */
+    /* outline: none; */
+}
+
+.input_shimmer {
+    composes: h-[14px] from global;
+    composes: rounded from global;
+    composes: w-[14px] from global;
+}

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

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