@riosst100/pwa-marketplace 2.1.5 → 2.1.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -15,11 +15,13 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',
     [`@magento/peregrine/lib/talons/MegaMenu/megaMenu.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js',
     [`@magento/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js',
+    [`@magento/peregrine/lib/talons/RootComponents/Product/useProduct.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Product/useProduct.js',
     [`@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js',
     [`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js',
     [`@magento/venia-ui/lib/components/MegaMenu/megaMenu.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js',
     [`@magento/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js',
     [`@magento/venia-ui/lib/RootComponents/Category/categoryContent.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js',
+    [`@magento/venia-ui/lib/RootComponents/Product/product.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Product/product.js',
     [`@magento/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js',
     [`@magento/peregrine/lib/talons/RootComponents/Category/useCategory.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategory.js',
     [`@magento/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js',

package/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -193,9 +193,17 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
             variants
         });
 
+        const minPrice = product.price_range?.minimum_price.final_price.value;
+        const maxPrice = product.price_range?.maximum_price.final_price.value;
+
+        let val = minPrice;
+        if (minPrice != maxPrice) {
+            val = minPrice + ' - ' + maxPrice;
+        }
+
         const priceRange = {
             final_price: {
-                value: product.price_range?.minimum_price.final_price.value + ' - ' + product.price_range?.maximum_price.final_price.value,
+                value: val,
                 currency: product.price_range?.minimum_price.final_price.currency
             }
         };
@@ -205,9 +213,6 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
             : priceRange;
     }
 
-    console.log('value----=====')
-    console.log(value)
-
     return value;
 };
 
@@ -266,7 +271,8 @@ export const useProductFullDetail = props => {
     const {
         addConfigurableProductToCartMutation,
         addSimpleProductToCartMutation,
-        product
+        product,
+        isPreview
     } = props;
 
     const [, { dispatch }] = useEventingContext();
@@ -651,7 +657,7 @@ export const useProductFullDetail = props => {
         isEverythingOutOfStock,
         outOfStockVariants,
         isAddToCartDisabled:
-            isOutOfStock ||
+            isPreview || isOutOfStock ||
             isEverythingOutOfStock ||
             isMissingOptions ||
             isAddConfigurableLoading ||

package/src/overwrites/peregrine/lib/talons/RootComponents/Product/product.gql.js

@@ -13,8 +13,11 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_PRODUCT_DETAIL_QUERY = gql`
-    query getProductDetailForProductPage($urlKey: String!) {
-        products(filter: { url_key: { eq: $urlKey } }) {
+    query getProductDetailForProductPage($urlKey: String!, $productPreviewToken: String) {
+        products(
+            product_preview_token: $productPreviewToken,
+            filter: { url_key: { eq: $urlKey } }
+        ) {
             items {
                 id
                 uid

package/src/overwrites/peregrine/lib/talons/RootComponents/Product/useProduct.js

@@ -0,0 +1,121 @@
+import { useQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './product.gql';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+/**
+ * A [React Hook]{@link https://reactjs.org/docs/hooks-intro.html} that
+ * controls the logic for the Product Root Component.
+ *
+ * @kind function
+ *
+ * @param {object}      props
+ * @param {Function}    props.mapProduct - A function for updating products to the proper shape.
+ * @param {GraphQLAST}  props.queries.getStoreConfigData - Fetches storeConfig product url suffix using a server query
+ * @param {GraphQLAST}  props.queries.getProductQuery - Fetches product using a server query
+ *
+ * @returns {object}    result
+ * @returns {Bool}      result.error - Indicates a network error occurred.
+ * @returns {Bool}      result.loading - Indicates the query is in flight.
+ * @returns {Bool}      result.product - The product's details.
+ */
+export const useProduct = props => {
+    const { mapProduct } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getStoreConfigData, getProductDetailQuery } = operations;
+    const { pathname, search } = useLocation();
+    const [
+        ,
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const slug = pathname.split('/').pop();
+    const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
+    const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+
+    const params = new URLSearchParams(search);
+    const productPreviewToken = params.get('preview');
+
+    const { error, loading, data } = useQuery(getProductDetailQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !storeConfigData,
+        variables: {
+            urlKey,
+            productPreviewToken
+        }
+    });
+
+    const isBackgroundLoading = !!data && loading;
+
+    const product = useMemo(() => {
+        if (!data) {
+            // The product isn't in the cache and we don't have a response from GraphQL yet.
+            return null;
+        }
+
+        // Note: if a product is out of stock _and_ the backend specifies not to
+        // display OOS items, the items array will be empty.
+
+        // Only return the product that we queried for.
+        const product = data.products.items.find(
+            item => item.url_key === urlKey
+        );
+
+        if (!product) {
+            return null;
+        }
+
+        return mapProduct(product);
+    }, [data, mapProduct, urlKey]);
+
+    const [, { dispatch }] = useEventingContext();
+
+    // Update the page indicator if the GraphQL query is in flight.
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
+
+    useEffect(() => {
+        if (!error && !loading && product) {
+            dispatch({
+                type: 'PRODUCT_PAGE_VIEW',
+                payload: {
+                    id: product.id,
+                    name: product.name,
+                    sku: product.sku,
+                    currency_code:
+                        product?.price_range?.maximum_price?.final_price
+                            ?.currency,
+                    price: product.price,
+                    price_range: {
+                        maximum_price: {
+                            final_price:
+                                product?.price_range?.maximum_price?.final_price
+                                    ?.value
+                        }
+                    },
+                    url_key: product.url_key
+                }
+            });
+        }
+    }, [error, loading, product, dispatch]);
+
+    return {
+        error,
+        loading,
+        product
+    };
+};

package/src/overwrites/venia-ui/lib/RootComponents/Product/product.js

@@ -0,0 +1,58 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { string } from 'prop-types';
+import { useProduct } from '@magento/peregrine/lib/talons/RootComponents/Product/useProduct';
+
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import ProductFullDetail from '@magento/venia-ui/lib/components/ProductFullDetail';
+import mapProduct from '@magento/venia-ui/lib/util/mapProduct';
+import ProductShimmer from './product.shimmer';
+
+/*
+ * As of this writing, there is no single Product query type in the M2.3 schema.
+ * The recommended solution is to use filter criteria on a Products query.
+ * However, the `id` argument is not supported. See
+ * https://github.com/magento/graphql-ce/issues/86
+ * TODO: Replace with a single product query when possible.
+ */
+
+const Product = props => {
+    const { __typename: productType } = props;
+    const talonProps = useProduct({
+        mapProduct
+    });
+
+    const { error, loading, product } = talonProps;
+
+    if (loading && !product)
+        return <ProductShimmer productType={productType} />;
+    if (error && !product) return <ErrorView />;
+    if (!product) {
+        return <ErrorView />;
+        return (
+            <h1>
+                <FormattedMessage
+                    id={'product.outOfStockTryAgain'}
+                    defaultMessage={
+                        'This Product is currently out of stock. Please try again later.'
+                    }
+                />
+            </h1>
+        );
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{product.name}</StoreTitle>
+            <Meta name="description" content={product.meta_description} />
+            <ProductFullDetail product={product} />
+        </Fragment>
+    );
+};
+
+Product.propTypes = {
+    __typename: string.isRequired
+};
+
+export default Product;

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

@@ -38,6 +38,7 @@ import ProductLabel from '@riosst100/pwa-marketplace/src/components/ProductLabel
 import RFQ from '@riosst100/pwa-marketplace/src/components/RFQ';
 import LinkToOtherStores from '@riosst100/pwa-marketplace/src/components/LinkToOtherStores';
 import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Collapsible';
+import { useLocation } from 'react-router-dom';
 
 // 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
@@ -75,7 +76,12 @@ const ProductDetailsCollapsible = (props) => {
 const ProductFullDetail = props => {
     const { product } = props;
 
-    const talonProps = useProductFullDetail({ product });
+    const { search } = useLocation();
+
+    const params = new URLSearchParams(search);
+    const isPreview = params.get('preview');
+
+    const talonProps = useProductFullDetail({ product, isPreview });
 
     const {
         breadcrumbCategoryId,
@@ -438,9 +444,32 @@ const ProductFullDetail = props => {
         return result;
     }
 
+    const productPreviewMessages = isPreview ? (
+        <div
+        style={{
+            backgroundColor: "white", // Light gray background
+            border: "1px solid rgb(242 101 102)", // Subtle border
+            borderRadius: "5px", // Rounded corners
+            padding: "10px 15px", // Space inside the box
+            margin: "10px 0px 20px 0", // Space outside the box
+            fontSize: "14px", // Readable text size
+            color: "rgb(242 101 102)", // Dark gray text
+        }}
+        >
+            <span
+                style={{
+                fontWeight: "500", // Slightly bold text
+                }}
+            >
+                This is a preview of your product. Only you can see this page.
+            </span>
+        </div>
+    ) : null;
+
     return (
         <Fragment>
             {breadcrumbs}
+            {productPreviewMessages}
             <Form
                 className={classes.root}
                 data-cy="ProductFullDetail-root"