@riosst100/pwa-marketplace 1.3.3 → 1.3.5

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -0,0 +1,413 @@
+import React, { useMemo, Fragment, Suspense } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { arrayOf, bool, number, shape, string } from 'prop-types';
+import { Form } from 'informed';
+import { Info } from 'react-feather';
+
+import Price from '@magento/venia-ui/lib/components/Price';
+import { useProductFullDetail } from '@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail';
+import { isProductConfigurable } from '@magento/peregrine/lib/util/isProductConfigurable';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Breadcrumbs from '../Breadcrumbs';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Carousel from '../ProductImageCarousel';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import QuantityStepper from '../QuantityStepper';
+import RichContent from '../RichContent/richContent';
+import { ProductOptionsShimmer } from '@magento/venia-ui/lib/components/ProductOptions';
+import CustomAttributes from './CustomAttributes';
+import defaultClasses from './productFullDetail.module.css';
+import cn from 'classnames';
+
+const WishlistButton = React.lazy(() => import('@magento/venia-ui/lib/components/Wishlist/AddToListButton'));
+const Options = React.lazy(() => import('@magento/venia-ui/lib/components/ProductOptions'));
+
+// Correlate a GQL error message to a field. GQL could return a longer error
+// string but it may contain contextual info such as product id. We can use
+// parts of the string to check for which field to apply the error.
+const ERROR_MESSAGE_TO_FIELD_MAPPING = {
+    'The requested qty is not available': 'quantity',
+    'Product that you are trying to add is not available.': 'quantity',
+    "The product that was requested doesn't exist.": 'quantity'
+};
+
+// Field level error messages for rendering.
+const ERROR_FIELD_TO_MESSAGE_MAPPING = {
+    quantity: 'The requested quantity is not available.'
+};
+
+const ProductFullDetail = props => {
+    const { product } = props;
+
+    const talonProps = useProductFullDetail({ product });
+
+    const {
+        breadcrumbCategoryId,
+        errorMessage,
+        handleAddToCart,
+        handleSelectionChange,
+        isOutOfStock,
+        isEverythingOutOfStock,
+        outOfStockVariants,
+        isAddToCartDisabled,
+        isSupportedProductType,
+        mediaGalleryEntries,
+        productDetails,
+        customAttributes,
+        wishlistButtonProps
+    } = talonProps;
+
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const options = isProductConfigurable(product) ? (
+        <Suspense fallback={<ProductOptionsShimmer />}>
+            <Options
+                onSelectionChange={handleSelectionChange}
+                options={product.configurable_options}
+                isEverythingOutOfStock={isEverythingOutOfStock}
+                outOfStockVariants={outOfStockVariants}
+            />
+        </Suspense>
+    ) : null;
+
+    const breadcrumbs = breadcrumbCategoryId ? (
+        <Breadcrumbs
+            categoryId={breadcrumbCategoryId}
+            currentProduct={productDetails.name}
+        />
+    ) : null;
+
+    // Fill a map with field/section -> error.
+    const errors = new Map();
+    if (errorMessage) {
+        Object.keys(ERROR_MESSAGE_TO_FIELD_MAPPING).forEach(key => {
+            if (errorMessage.includes(key)) {
+                const target = ERROR_MESSAGE_TO_FIELD_MAPPING[key];
+                const message = ERROR_FIELD_TO_MESSAGE_MAPPING[target];
+                errors.set(target, message);
+            }
+        });
+
+        // Handle cases where a user token is invalid or expired. Preferably
+        // this would be handled elsewhere with an error code and not a string.
+        if (errorMessage.includes('The current user cannot')) {
+            errors.set('form', [
+                new Error(
+                    formatMessage({
+                        id: 'productFullDetail.errorToken',
+                        defaultMessage:
+                            'There was a problem with your cart. Please sign in again and try adding the item once more.'
+                    })
+                )
+            ]);
+        }
+
+        // Handle cases where a cart wasn't created properly.
+        if (
+            errorMessage.includes('Variable "$cartId" got invalid value null')
+        ) {
+            errors.set('form', [
+                new Error(
+                    formatMessage({
+                        id: 'productFullDetail.errorCart',
+                        defaultMessage:
+                            'There was a problem with your cart. Please refresh the page and try adding the item once more.'
+                    })
+                )
+            ]);
+        }
+
+        // An unknown error should still present a readable message.
+        if (!errors.size) {
+            errors.set('form', [
+                new Error(
+                    formatMessage({
+                        id: 'productFullDetail.errorUnknown',
+                        defaultMessage:
+                            'Could not add item to cart. Please check required options and try again.'
+                    })
+                )
+            ]);
+        }
+    }
+
+    const customAttributesDetails = useMemo(() => {
+        const list = [];
+        const pagebuilder = [];
+        const skuAttribute = {
+            attribute_metadata: {
+                uid: 'attribute_sku',
+                used_in_components: ['PRODUCT_DETAILS_PAGE'],
+                ui_input: {
+                    ui_input_type: 'TEXT'
+                },
+                label: formatMessage({
+                    id: 'global.sku',
+                    defaultMessage: 'SKU'
+                })
+            },
+            entered_attribute_value: {
+                value: productDetails.sku
+            }
+        };
+        if (Array.isArray(customAttributes)) {
+            customAttributes.forEach(customAttribute => {
+                if (
+                    customAttribute.attribute_metadata.ui_input
+                        .ui_input_type === 'PAGEBUILDER'
+                ) {
+                    pagebuilder.push(customAttribute);
+                } else {
+                    list.push(customAttribute);
+                }
+            });
+        }
+        list.unshift(skuAttribute);
+        return {
+            list: list,
+            pagebuilder: pagebuilder
+        };
+    }, [customAttributes, productDetails.sku, formatMessage]);
+
+    const cartCallToActionText =
+        !isEverythingOutOfStock || !isOutOfStock ? (
+            <FormattedMessage
+                id="productFullDetail.addItemToCart"
+                defaultMessage="Add to Cart"
+            />
+        ) : (
+            <FormattedMessage
+                id="productFullDetail.itemOutOfStock"
+                defaultMessage="Out of Stock"
+            />
+        );
+    // Error message for screen reader
+    const cartActionContent = isSupportedProductType ? (
+        <section className={classes.actButton}>
+            <Button
+                data-cy="ProductFullDetail-addToCartButton"
+                disabled={isAddToCartDisabled}
+                aria-disabled={isAddToCartDisabled}
+                aria-label={
+                    isEverythingOutOfStock
+                        ? formatMessage({
+                            id: 'productFullDetail.outOfStockProduct',
+                            defaultMessage:
+                                'This item is currently out of stock'
+                        })
+                        : ''
+                }
+                priority="high"
+                type="submit"
+            >
+                {cartCallToActionText}
+            </Button>
+        </section>
+    ) : (
+        <div className={classes.unavailableContainer}>
+            <Info />
+            <p>
+                <FormattedMessage
+                    id={'productFullDetail.unavailableProduct'}
+                    defaultMessage={
+                        'This product is currently unavailable for purchase.'
+                    }
+                />
+            </p>
+        </div>
+    );
+
+    const shortDescription = productDetails.shortDescription ? (
+        <RichContent html={productDetails.shortDescription.html} />
+    ) : null;
+
+    const pageBuilderAttributes = customAttributesDetails.pagebuilder.length ? (
+        <section className={classes.detailsPageBuilder}>
+            <CustomAttributes
+                classes={{ list: classes.detailsPageBuilderList }}
+                customAttributes={customAttributesDetails.pagebuilder}
+                showLabels={false}
+            />
+        </section>
+    ) : null;
+
+    const review_count = 0;
+    const rating_value = 0;
+
+    return (
+        <Fragment>
+            {breadcrumbs}
+            <Form
+                className={classes.root}
+                data-cy="ProductFullDetail-root"
+                onSubmit={handleAddToCart}
+            >
+                <section className={classes.leftContainer}>
+                    <Carousel images={mediaGalleryEntries} />
+                </section>
+                <section className={classes.rightContainer}>
+                    <div
+                        className={cn(
+                            classes.title
+                        )}
+                    >
+                        <h1
+                            aria-live="polite"
+                            className={cn(
+                                classes.productName,
+                                '!font-semibold leading-[normal] mb-4 line-clamp-2'
+                            )}
+                            data-cy="ProductFullDetail-productName"
+                        >
+                            {productDetails.name}
+                        </h1>
+                        <div className='product_review-container flex items-center gap-x-2'>
+                            <div className='product_rating leading-[14px]'>
+                                <span className='text-gray-200 text-sm'>
+                                    {rating_value}
+                                </span>
+                            </div>
+                            <div className='before_block before_w-[1px] before_bg-gray-200 before_h-full before_relative w-[1px] h-[14px]'></div>
+                            <span className='review_count text-gray-200 text-sm leading-[14px]'>
+                                {review_count} Reviews
+                            </span>
+                        </div>
+                    </div>
+                    <div
+                        className={cn(
+                            'product_short_description'
+                        )}
+                    >
+                        {shortDescription}
+                    </div>
+                    <div
+                        className={cn(
+                            'product_price_container'
+                        )}
+                    >
+                        <p
+                            data-cy="ProductFullDetail-productPrice"
+                            className={classes.productPrice}
+                        >
+                            <Price
+                                currencyCode={productDetails.price.currency}
+                                value={productDetails.price.value}
+                            />
+                        </p>
+                    </div>
+                    <FormError
+                        classes={{
+                            root: classes.formErrors
+                        }}
+                        errors={errors.get('form') || []}
+                    />
+                    <section className={classes.options}>{options}</section>
+                    <section className={classes.quantity}>
+                        <span
+                            data-cy="ProductFullDetail-quantityTitle"
+                            className={classes.quantityTitle}
+                        >
+                            <FormattedMessage
+                                id={'global.quantity'}
+                                defaultMessage={'Quantity'}
+                            />
+                        </span>
+                        <QuantityStepper
+                            classes={{ root: classes.quantityRoot }}
+                            min={1}
+                            message={errors.get('quantity')}
+                        />
+                    </section>
+                    <section className={classes.actions}>
+                        {cartActionContent}
+                        <Suspense fallback={null}>
+                            <WishlistButton {...wishlistButtonProps} />
+                        </Suspense>
+                    </section>
+                </section>
+                <section className={classes.description}>
+                    <span
+                        data-cy="ProductFullDetail-descriptionTitle"
+                        className={classes.descriptionTitle}
+                    >
+                        <FormattedMessage
+                            id={'productFullDetail.description'}
+                            defaultMessage={'Description'}
+                        />
+                    </span>
+                    <RichContent html={productDetails.description} />
+                </section>
+                <section className={classes.details}>
+                    <span
+                        data-cy="ProductFullDetail-detailsTitle"
+                        className={classes.detailsTitle}
+                    >
+                        <FormattedMessage
+                            id={'productFullDetail.details'}
+                            defaultMessage={'Details'}
+                        />
+                    </span>
+                    <CustomAttributes
+                        customAttributes={customAttributesDetails.list}
+                    />
+                </section>
+                {pageBuilderAttributes}
+            </Form>
+        </Fragment>
+    );
+};
+
+ProductFullDetail.propTypes = {
+    classes: shape({
+        cartActions: string,
+        description: string,
+        descriptionTitle: string,
+        details: string,
+        detailsPageBuilder: string,
+        detailsPageBuilderList: string,
+        detailsTitle: string,
+        imageCarousel: string,
+        options: string,
+        productName: string,
+        productPrice: string,
+        quantity: string,
+        quantityTitle: string,
+        quantityRoot: string,
+        root: string,
+        title: string,
+        unavailableContainer: string
+    }),
+    product: shape({
+        __typename: string,
+        id: number,
+        stock_status: string,
+        sku: string.isRequired,
+        price: shape({
+            regularPrice: shape({
+                amount: shape({
+                    currency: string.isRequired,
+                    value: number.isRequired
+                })
+            }).isRequired
+        }).isRequired,
+        media_gallery_entries: arrayOf(
+            shape({
+                uid: string,
+                label: string,
+                position: number,
+                disabled: bool,
+                file: string.isRequired
+            })
+        ),
+        description: string,
+        short_description: shape({
+            html: string,
+            __typename: string
+        })
+    }).isRequired
+};
+
+export default ProductFullDetail;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css

@@ -0,0 +1,203 @@
+.root {
+    composes: lg_grid from global;
+    composes: lg_grid-flow-row from global;
+    composes: lg_items-start from global;
+    composes: gap-x-5 from global;
+}
+
+@media (min-width: 1024px) {
+    .root {
+        grid-template-areas:
+            'left-container right-container';
+        grid-template-columns: minmax(0, 495px) minmax(0, 1fr);
+        grid-template-rows: repeat(5, min-content) 1fr [fold];
+    }
+
+    .title {
+        grid-template-columns: 1fr max-content;
+    }
+}
+
+.section {
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: border-t-0 from global;
+    composes: border-r-0 from global;
+    composes: border-b from global;
+    composes: border-l-0 from global;
+    composes: my-0 from global;
+    composes: mx-sm from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
+}
+
+.sectionTitle {
+    composes: flex from global;
+    composes: font-semibold from global;
+    composes: items-center from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: text-colorDefault from global;
+}
+
+.title {
+    /* composes: section;
+    composes: gap-2 from global;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: leading-normal from global;
+    composes: px-sm from global;
+    composes: py-xs from global;
+    grid-area: title; */
+}
+
+.productName {
+    composes: font-semibold from global;
+    composes: text-colorDefault from global;
+
+    composes: lg_font-normal from global;
+    composes: lg_text-xl from global;
+}
+
+.productPrice {
+    composes: block from global;
+    composes: mb-2 from global;
+}
+
+.leftContainer {
+    grid-area: left-container;
+    grid-column: 1 / 2;
+    grid-row: 1 / fold;
+    composes: max-w-[495px] from global;
+}
+
+.rightContainer {
+    grid-area: right-container;
+}
+
+.options {
+    grid-area: options;
+}
+
+.formErrors {
+    composes: section;
+    grid-area: errors;
+}
+
+.quantity {
+    composes: section;
+    grid-area: quantity;
+}
+
+.quantityTitle {
+    composes: block from global;
+    composes: font-semibold from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: text-colorDefault from global;
+}
+
+.actions {
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: section;
+    grid-area: cart;
+
+    composes: lg_border-b-0 from global;
+}
+
+.description {
+    composes: section;
+    grid-column: 1 / span 1;
+    grid-row: fold / span 1;
+
+    composes: lg_border-t from global;
+    composes: lg_m-0 from global;
+    composes: lg_pl-sm from global;
+    composes: lg_pr-sm from global;
+    composes: lg_self-stretch from global;
+}
+
+.descriptionTitle {
+    composes: sectionTitle;
+}
+
+.details {
+    composes: section;
+    grid-column: 2 / span 1;
+    grid-row: fold / span 1;
+
+    composes: lg_border-t from global;
+    composes: lg_m-0 from global;
+    composes: lg_pl-sm from global;
+    composes: lg_pr-sm from global;
+    composes: lg_self-stretch from global;
+}
+
+.detailsPageBuilder {
+    composes: my-0 from global;
+    composes: mx-sm from global;
+    composes: px-0 from global;
+    composes: py-sm from global;
+    grid-column: 1 / span 2;
+}
+
+.detailsPageBuilderList {
+    list-style: none;
+}
+
+@media (min-width: 1024px) {
+    .details {
+        align-self: stretch;
+        border-top-width: 1px;
+        margin: 0;
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+    }
+}
+
+.detailsTitle {
+    composes: sectionTitle;
+}
+
+.related {
+    composes: border-b-0 from global;
+    composes: section;
+    grid-column: 1 / span 2;
+}
+
+.relatedTitle {
+    composes: sectionTitle;
+}
+
+.quantityRoot {
+    --stroke: var(--venia-global-color-gray-600);
+
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: text-center from global;
+    grid-template-columns: 1fr 4rem 1fr;
+    grid-template-columns: auto 4rem auto;
+    composes: justify-start from global;
+}
+
+.unavailableContainer {
+    composes: bg-subtle from global;
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: italic from global;
+    composes: items-center from global;
+    composes: justify-start from global;
+    composes: p-3 from global;
+    composes: text-subtle from global;
+    composes: w-full from global;
+}
+
+.actButton {
+    composes: mt-sm from global;
+}