@riosst100/pwa-marketplace 3.0.4 → 3.0.6

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

@@ -1,4 +1,5 @@
 import React, { useState, useMemo, Fragment, Suspense, useRef, useEffect } from 'react';
+import { useQuery } from '@apollo/client';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { arrayOf, bool, number, shape, string } from 'prop-types';
 import { Form } from 'informed';
@@ -26,6 +27,7 @@ import RichText from '@magento/venia-ui/lib/components/RichText';
 import { Star1, Verify, Sms, Message, Shop, ArrowUp2 } from 'iconsax-react';
 import { Link } from "react-router-dom";
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { GET_PAYMENT_TYPES } from '@riosst100/pwa-marketplace/src/talons/ProductContent/productContent.gql.js';
 
 const WishlistButton = React.lazy(() => import('@magento/venia-ui/lib/components/Wishlist/AddToListButton'));
 const Options = React.lazy(() => import('@magento/venia-ui/lib/components/ProductOptions'));
@@ -112,9 +114,16 @@ const ProductFullDetail = props => {
 
     const { formatMessage } = useIntl();
 
+    const { data: paymentTypeData } = useQuery(GET_PAYMENT_TYPES, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const paymentTypeOptions = paymentTypeData?.getPaymentType || [];
+
     const classes = useStyle(defaultClasses, props.classes);
 
     const [hoveredMedia, setHoveredMedia] = useState(null);
+    const [selectedPaymentType, setSelectedPaymentType] = useState(null);
 
     const options = isProductConfigurable(product) ? (
         <Suspense fallback={<ProductOptionsShimmer />}>
@@ -133,6 +142,7 @@ const ProductFullDetail = props => {
         <Breadcrumbs
             categoryId={breadcrumbCategoryId}
             currentProduct={productDetails.name}
+            currentProductCustomTableMetadata={productDetails.custom_table_metadata}
         />
     ) : null;
     
@@ -221,62 +231,6 @@ const ProductFullDetail = props => {
         };
     }, [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={cn(classes.actButton, 'justify-between flex gap-x-[20px] px-[15px] py-0')}>
-           <RFQ
-                disabled={isAddToCartDisabled}
-                classes={{ rfqButton: cn(classes.rfqButton, "w-full") }}
-            />
-            <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'
-                        })
-                        : ''
-                }
-                classes={{
-                    rootClass: '!px-0 !py-3',
-                    content: 'w-full normal-case font-medium text-[14px]'
-                }}
-                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 ? (
         <RichText
             rootClassName="px-0"
@@ -392,7 +346,6 @@ const ProductFullDetail = props => {
             const code = attr.attribute_metadata?.code || "";
             return useSuffix ? code.endsWith(key) : code === key;
         });
-
         if (!attr) return "";
 
         if (attr.selected_attribute_options?.attribute_option?.length) {
@@ -403,6 +356,12 @@ const ProductFullDetail = props => {
         return attr.entered_attribute_value?.value || "";
     };
 
+    const preOrder = getAttributeValue(customAttributesDetails, "card_pre_orders", true);
+    const preOrderDate = getAttributeValue(customAttributesDetails, "pre_order_date", true);
+    const preOrderDeposite = getAttributeValue(customAttributesDetails, "pre_order_deposit", true);
+    const preOrderNote = getAttributeValue(customAttributesDetails, "pre_order_notes", true);
+    const preOrderPaymentType = getAttributeValue(customAttributesDetails, "pre_order_payment_type", true);
+    const releaseDate = getAttributeValue(customAttributesDetails, "release_date", true);
     const setNameValue = getAttributeValue(customAttributesDetails, "card_set", true);
     const cardNameValue = getAttributeValue(customAttributesDetails, "card_name", true);
     const cardNumberValue = getAttributeValue(customAttributesDetails, "card_number", true);
@@ -410,6 +369,104 @@ const ProductFullDetail = props => {
     const featureValue = getAttributeValue(customAttributesDetails, "card_feature", true);
     const conditionValue = getAttributeValue(customAttributesDetails, "card_condition", true);
     const foilValue = getAttributeValue(customAttributesDetails, "card_foil", true);
+
+    const isPreOrderProduct = typeof preOrder === 'string'
+        ? preOrder.trim().toLowerCase() === 'pre orders'
+        : !!(preOrder && preOrder.is_preorder);
+
+    const parsePreOrderClosingDate = (value) => {
+        if (!value) return null;
+
+        const parsed = value instanceof Date ? value : new Date(value);
+        if (Number.isNaN(parsed.getTime())) return null;
+
+        // Normalise to end of day for fairness
+        parsed.setHours(23, 59, 59, 999);
+        return parsed;
+    };
+
+    const preOrderClosingDateObj = parsePreOrderClosingDate(preOrderDate);
+    const isPreOrderClosed =
+        isPreOrderProduct &&
+        preOrderClosingDateObj !== null &&
+        new Date().getTime() > preOrderClosingDateObj.getTime();
+
+    const cartCallToActionText =
+        isPreOrderClosed
+            ? (
+                <FormattedMessage
+                    id="productFullDetail.preOrderClosed"
+                    defaultMessage="Pre Order Closed"
+                />
+            )
+            : isPreOrderProduct
+                ? (
+                    <FormattedMessage
+                        id="productFullDetail.preOrderNow"
+                        defaultMessage="Pre Order Now"
+                    />
+                )
+                : !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={cn(classes.actButton, 'justify-between flex gap-x-[20px] px-[15px] py-0')}>
+           <RFQ
+                disabled={isAddToCartDisabled || isPreOrderClosed}
+                classes={{ rfqButton: cn(classes.rfqButton, "w-full") }}
+            />
+            <Button
+                data-cy="ProductFullDetail-addToCartButton"
+                disabled={isAddToCartDisabled || isPreOrderClosed}
+                aria-disabled={isAddToCartDisabled || isPreOrderClosed}
+                aria-label={
+                    isPreOrderClosed
+                        ? 'Pre order closing date has passed'
+                        : isPreOrderProduct
+                            ? ''
+                            : isEverythingOutOfStock
+                        ? formatMessage({
+                            id: 'productFullDetail.outOfStockProduct',
+                            defaultMessage:
+                                'This item is currently out of stock'
+                        })
+                        : ''
+                }
+                classes={{
+                    rootClass: '!px-0 !py-3',
+                    content: 'w-full normal-case font-medium text-[14px]'
+                }}
+                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 ExpandableSection = ({ children, maxHeight = 480 }) => {
     const [expanded, setExpanded] = useState(false);
     const [showButton, setShowButton] = useState(false);
@@ -554,9 +611,33 @@ const ProductFullDetail = props => {
 
     const AlertCircleIcon = <Icon src={ShoppingCart} attrs={{ width: 20 }} />;
 
-    const handleAddToCart = async (...args) => {
+    const handleAddToCart = async formValues => {
         try {
-            await originalHandleAddToCart(...args);
+            const parseDepositNumber = (value) => {
+                if (value === null || value === undefined) return undefined;
+                if (typeof value === 'number') return value;
+                const numeric = Number.parseFloat(value.toString().replace(/[^0-9.-]/g, ''));
+                return Number.isFinite(numeric) ? numeric : undefined;
+            };
+
+            let preorderPayload;
+            if (selectedPaymentType) {
+                preorderPayload = {
+                    pre_order_payment_type: selectedPaymentType
+                };
+                if (selectedPaymentType === 'deposit') {
+                    const dep = parseDepositNumber(preOrderDeposite);
+                    if (dep !== undefined) {
+                        preorderPayload.pre_order_deposit = dep;
+                    }
+                }
+            }
+
+            const nextValues = {
+                ...formValues,
+                preorder: preorderPayload
+            };
+            await originalHandleAddToCart(nextValues);
         } catch (e) {
             addToast({
                 type: 'error',
@@ -686,7 +767,7 @@ const ProductFullDetail = props => {
                                                 data-cy="ProductFullDetail-productPrice"
                                                 className={cn(
                                                     classes.productPrice,
-                                                    'text-[32px] font-medium leading-[32px] mb-0',
+                                                    'text-[24px] font-medium leading-[32px] mb-0',
                                                 )}
                                             >
                                                 <Price
@@ -697,11 +778,10 @@ const ProductFullDetail = props => {
                                             </p>
                                         </div>
                                         <AuctionDetail className="auction_detail-container" />
-                                        <PreorderDetail className={'preorder_detail-container'} />
                                         <small className='shipping-calculation-notes text-gray-200 text-xs'>
                                             Shipping is calculated on checkout
                                         </small>
-                                        <div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
+                                        {/* <div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
                                             <div className="gap-x-[10px] gap-y-1 flex xs_flex-col md_flex-row xs_items-center md_items-start relative">
                                                 <Link to={"/seller/"+sellerDetails.url_key} class="flex items-center justify-center gap-[5px] py-1 relative bg-white">
                                                     <div class="flex items-center justify-center gap-[5px] relative">
@@ -712,7 +792,7 @@ const ProductFullDetail = props => {
                                                     </div>
                                                 </Link>
                                             </div>
-                                        </div>
+                                        </div> */}
                                     </div>
                                 </div>
                                 <FormError
@@ -743,11 +823,62 @@ const ProductFullDetail = props => {
                                             />
                                         </Suspense>
                                     </div>
+                                    <PreorderDetail 
+                                        preOrder={preOrder}
+                                        preOrderDate={preOrderDate}
+                                        preOrderDeposite={preOrderDeposite}
+                                        preOrderNote={preOrderNote}
+                                        preOrderPaymentType={preOrderPaymentType}
+                                        releaseDate={releaseDate}    
+                                        className={'preorder_detail-container'}
+                                        paymentTypeOptions={paymentTypeOptions}
+                                        onPaymentTypeChange={setSelectedPaymentType}
+                                    />
                                     <div className='product_actions-wrapper'>
                                         {cartActionContent}
                                     </div>
                                 </section>
                             </div>
+                            <div className={cn('product_otherlink-section', 'border border-[lightgray] rounded-[10px] mb-[15px] p-4')}>
+                                <div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
+                                            <div className="gap-x-[10px] gap-y-1 flex xs_flex-col md_flex-row xs_items-center md_items-start relative">
+                                                <Link to={"/seller/"+sellerDetails.url_key} class="flex items-center justify-center gap-[5px] py-1 relative bg-white">
+                                                    <div class="flex items-center justify-center gap-[5px] relative">
+                                                        <p>Sold by</p>
+                                                        <div class="relative xs_hidden lg_flex w-fit font-medium text-[#f76b1c] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                                            {sellerDetails ? sellerDetails.name : ''}
+                                                        </div>
+                                                    </div>
+                                                </Link>
+                                            </div>
+                                        </div>
+                                        <div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
+                                            <div className="gap-x-[10px] gap-y-1 flex xs_flex-col md_flex-row xs_items-center md_items-start relative">
+                                                <div class="flex items-center justify-center gap-[5px] py-1 relative bg-white">
+                                                    <div class="flex items-center justify-center gap-[5px] relative">
+                                                        <div className='flex flex-wrap items-start gap-4 relative'>
+                                                            <Link to='#' class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#f76b1c]">
+                                                                <div class="flex items-center justify-center gap-[10px] relative">
+                                                                    <Sms color="#f76b1c" size={14} variant="Outline" className='stroke-[#f76b1c]' />
+                                                                    <div class="relative xs_hidden lg_flex w-fit font-medium text-[#f76b1c] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                                                        Send Message
+                                                                    </div>
+                                                                </div>
+                                                            </Link>
+                                                            <Link to={"/seller/"+sellerDetails.url_key} class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#f76b1c]">
+                                                                <div class="flex items-center justify-center gap-[10px] relative">
+                                                                    <Shop color="#f76b1c" size={14} variant="Outline" className='stroke-[#f76b1c]' />
+                                                                    <div class="relative xs_hidden lg_flex w-fit font-medium text-[#f76b1c] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                                                        Visit Store
+                                                                    </div>
+                                                                </div>
+                                                            </Link>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                            </div>
                             <div className={cn('product_otherlink-section', 'border border-[lightgray] rounded-[10px] mb-[15px]')}>
                                 <LinkToOtherStores productDetails={productDetails} />
                             </div>

package/src/talons/ProductContent/productContent.gql.js

@@ -89,10 +89,20 @@ export const GET_STORE_CONFIG_DATA = gql`
     }
 `;
 
+export const GET_PAYMENT_TYPES = gql`
+    query getPaymentTypeOptions {
+        getPaymentType {
+            label
+            value
+        }
+    }
+`;
+
 
 export default {
     getCategoryContentQuery: GET_CATEGORY_CONTENT,
     getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY,
     getCategoryAvailableSortMethodsQuery: GET_CATEGORY_AVAILABLE_SORT_METHODS,
-    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA,
+    getPaymentTypesQuery: GET_PAYMENT_TYPES
 };

package/src/talons/ProductContent/useProductContent.js

@@ -27,7 +27,8 @@ export const useProductContent = props => {
         getCategoryContentQuery,
         getProductFiltersByCategoryQuery,
         getCategoryAvailableSortMethodsQuery,
-        getStoreConfigQuery
+        getStoreConfigQuery,
+        getPaymentTypesQuery
     } = operations;
 
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
@@ -36,6 +37,13 @@ export const useProductContent = props => {
         fetchPolicy: 'cache-and-network'
     });
 
+    const { data: paymentTypeData, loading: paymentTypeLoading } = useQuery(
+        getPaymentTypesQuery,
+        {
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
     const virtualCategoryFilters = useMemo(() => {
         if (storeConfigData) {
             const data = storeConfigData.storeConfig.custommarketplace_plp_filters_virtualcategory;
@@ -161,6 +169,8 @@ export const useProductContent = props => {
         ? sortData.products.sort_fields.options
         : null;
 
+    const paymentTypeOptions = paymentTypeData?.getPaymentType || [];
+
     useEffect(() => {
         if (!categoryLoading && categoryData.categories.items.length > 0) {
             dispatch({
@@ -187,6 +197,8 @@ export const useProductContent = props => {
         parent,
         attributesBlock,
         category,
-        virtualCategoryFilters
+        virtualCategoryFilters,
+        paymentTypeOptions,
+        paymentTypeLoading
     };
 };