@riosst100/pwa-marketplace 2.0.8 → 2.0.9

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

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

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

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

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

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

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

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

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

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

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

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