@riosst100/pwa-marketplace 1.3.2 → 1.3.4

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/attributeType.js

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { useAttributeType } from '@magento/peregrine/lib/talons/ProductFullDetail/CustomAttributes/AttributeType/useAttributeType';
+
+import Boolean from './Boolean';
+import Date from './Date';
+import DateTime from './DateTime';
+import Multiselect from './Multiselect';
+import Price from './Price';
+import Select from './Select';
+import Text from './Text';
+import Textarea from './Textarea';
+
+const defaultTypeConfig = {
+    boolean: {
+        component: Boolean
+    },
+    date: {
+        component: Date
+    },
+    datetime: {
+        component: DateTime
+    },
+    multiselect: {
+        component: Multiselect
+    },
+    price: {
+        component: Price
+    },
+    select: {
+        component: Select
+    },
+    text: {
+        component: Text
+    },
+    textarea: {
+        component: Textarea
+    },
+    texteditor: {
+        component: Textarea
+    },
+    pagebuilder: {
+        component: Textarea
+    }
+};
+
+const AttributeType = props => {
+    const { data, ...rest } = props;
+    const { ui_input_type: type } = data?.attribute_metadata.ui_input || {};
+
+    const { getAttributeTypeConfig } = useAttributeType({
+        typeConfig: defaultTypeConfig
+    });
+
+    if (type) {
+        const attributeTypeConfig = getAttributeTypeConfig(type.toLowerCase());
+        if (attributeTypeConfig && attributeTypeConfig.component) {
+            const Component = attributeTypeConfig.component;
+
+            return <Component {...data} {...rest} />;
+        }
+    }
+
+    return null;
+};
+
+export default AttributeType;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/index.js

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

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

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react';
+import { array, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import AttributeType from './AttributeType';
+import defaultClasses from './customAttributes.module.css';
+
+export const IS_VISIBLE_ON_FRONT = 'PRODUCT_DETAILS_PAGE';
+
+const CustomAttributes = props => {
+    const { customAttributes, showLabels } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const list = useMemo(
+        () =>
+            customAttributes.reduce((previousAttribute, currentAttribute) => {
+                const usedInComponents =
+                    currentAttribute.attribute_metadata?.used_in_components ||
+                    [];
+                // Visible on front attributes only
+                if (usedInComponents.includes(IS_VISIBLE_ON_FRONT)) {
+                    const attributeContent = (
+                        <li
+                            key={currentAttribute.attribute_metadata.uid}
+                            className={classes.listItem}
+                        >
+                            <AttributeType
+                                showLabels={showLabels}
+                                data={currentAttribute}
+                            />
+                        </li>
+                    );
+
+                    previousAttribute.push(attributeContent);
+                }
+
+                return previousAttribute;
+            }, []),
+        [classes, customAttributes, showLabels]
+    );
+
+    if (list.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={classes.root}>
+            <ul className={classes.list}>{list}</ul>
+        </div>
+    );
+};
+
+CustomAttributes.propTypes = {
+    classes: shape({
+        root: string,
+        title: string,
+        list: string,
+        listItem: string
+    }),
+    customAttributes: array.isRequired
+};
+
+export default CustomAttributes;

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

@@ -0,0 +1,9 @@
+.root {
+}
+
+.list {
+    composes: list-disc from global;
+    composes: mb-4 from global;
+    composes: mt-4 from global;
+    composes: pl-6 from global;
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * @deprecated - replaced by general mutation in @magento/peregrine/lib/talons/productFullDetail.js
+ */
+export {
+    ADD_SIMPLE_MUTATION,
+    ADD_CONFIGURABLE_MUTATION
+} from '@magento/peregrine/lib/talons/ProductFullDetail/productFullDetail.gql.ce';

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;