@riosst100/pwa-marketplace 3.0.4 → 3.0.5

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

@@ -13,14 +13,22 @@ const CustomAttributes = props => {
     const { customAttributes, showLabels } = props;
     const classes = useStyle(defaultClasses, props.classes);
 
+    const systemAttributes = [
+        'term_and_conditions',
+        'sale',
+        'sku'
+    ];
+
     const list = useMemo(
         () =>
             customAttributes.reduce((previousAttribute, currentAttribute) => {
+                console.log('currentAttribute',currentAttribute)
+                const attrCode = currentAttribute.attribute_metadata?.code;
                 const usedInComponents =
                     currentAttribute.attribute_metadata?.used_in_components ||
                     [];
                 // Visible on front attributes only
-                if (usedInComponents.includes(IS_VISIBLE_ON_FRONT)) {
+                if (!systemAttributes.includes(attrCode) && usedInComponents.includes(IS_VISIBLE_ON_FRONT)) {
                     const attributeContent = (
                         <li
                             key={currentAttribute.attribute_metadata.uid}
@@ -38,7 +46,7 @@ const CustomAttributes = props => {
 
                 return previousAttribute;
             }, []),
-        [classes, customAttributes, showLabels]
+        [classes, customAttributes, showLabels, systemAttributes]
     );
 
     if (list.length === 0) {

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

@@ -1,58 +1,216 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import cn from 'classnames';
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import Select from '@riosst100/pwa-marketplace/src/components/commons/Select';
 
 const preOrderInfo = (props) => {
-    const { className, productDetails } = props
-
-    const preorderData = productDetails ? productDetails.preorder : null;
+    const { className, preOrder, preOrderDate, preOrderDeposite, preOrderNote, preOrderPaymentType, releaseDate, onPaymentTypeChange, paymentTypeOptions = [] } = props;
     
-    const isPreOrder = preorderData && preorderData.is_preorder ? true : false;
-    const preOrderNotes = preorderData ? preorderData.preorder_notes : null;
-    const preOrderAvailableDate = preorderData ? new Date(preorderData.preorder_availability) : null;
+    const isPreOrder = typeof preOrder === 'string'
+        ? preOrder.trim().toLowerCase() === 'pre orders'
+        : !!(preOrder && preOrder.is_preorder);
+
+    const normalizePaymentType = (value = '') => {
+        const normalized = value.toString().trim().toLowerCase();
+
+        if (normalized === 'full payment') {
+            return 'full';
+        }
+
+        if (normalized === 'deposit' || normalized === 'full') {
+            return normalized;
+        }
+
+        return '';
+    };
+
+    const initialPaymentType = useMemo(
+        () => normalizePaymentType(preOrderPaymentType),
+        [preOrderPaymentType]
+    );
+
+    const [selectedPaymentType, setSelectedPaymentType] = useState(initialPaymentType || 'full');
+
+    useEffect(() => {
+        setSelectedPaymentType(initialPaymentType || 'full');
+    }, [initialPaymentType]);
+
+    // Propagate initial and subsequent selection to parent so submit has value
+    useEffect(() => {
+        if (typeof onPaymentTypeChange === 'function' && selectedPaymentType) {
+            onPaymentTypeChange(selectedPaymentType);
+        }
+    }, [selectedPaymentType, onPaymentTypeChange]);
+
+    const normalizedPaymentOptions = useMemo(() => {
+        return paymentTypeOptions.reduce((acc, option) => {
+            const normalizedValue = normalizePaymentType(option.value);
+            if (!normalizedValue) {
+                return acc;
+            }
+
+            if (acc.find(item => item.value === normalizedValue)) {
+                return acc;
+            }
+
+            const label = option.label || (normalizedValue === 'full' ? 'Full Payment' : 'Deposit');
+            acc.push({ label, value: normalizedValue });
+            return acc;
+        }, []);
+    }, [paymentTypeOptions]);
+
+    const paymentOptions = useMemo(() => {
+        const optionsToUse = normalizedPaymentOptions;
+
+        if (!optionsToUse.length) {
+            return [];
+        }
+
+        if (initialPaymentType === 'full') {
+            return optionsToUse.filter(option => option.value === 'full');
+        }
+
+        if (initialPaymentType === 'deposit') {
+            return optionsToUse;
+        }
+
+        return optionsToUse;
+    }, [initialPaymentType, normalizedPaymentOptions]);
+
+    const handlePaymentTypeChange = (event) => {
+        if (!paymentOptions.length) {
+            return;
+        }
+
+        const nextValue = event.target.value;
+        const availableValues = paymentOptions.map(option => option.value);
+        const appliedValue = availableValues.includes(nextValue)
+            ? nextValue
+            : availableValues[0];
+
+        setSelectedPaymentType(appliedValue);
+
+        if (typeof onPaymentTypeChange === 'function') {
+            onPaymentTypeChange(appliedValue);
+        }
+    };
+
+    const formatDate = (value) => {
+        if (!value) {
+            return '-';
+        }
 
-    const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
+        const parsed = value instanceof Date ? value : new Date(value);
+        if (Number.isNaN(parsed.getTime())) {
+            return '-';
+        }
+
+        const day = String(parsed.getDate()).padStart(2, '0');
+        const month = String(parsed.getMonth() + 1).padStart(2, '0');
+        const year = parsed.getFullYear();
+
+        return `${day}/${month}/${year}`;
+    };
+
+    const preOrderNotes = preOrderNote || null;
+    const preOrderAvailableDate = releaseDate || null;
+    const preOrderClosingDate = preOrderDate || null;
+
+    const normalizeDeposit = (value) => {
+        if (!value && value !== 0) {
+            return '-';
+        }
+
+        const numeric = typeof value === 'number'
+            ? value
+            : Number.parseFloat(value.toString().replace(/[^0-9.-]/g, ''));
+
+        if (Number.isNaN(numeric)) {
+            return value;
+        }
+
+        // Tampilkan sebagai persentase tanpa 0 di belakang koma dan tambahkan '%'
+        // Contoh: 10.00 -> '10%'; 12.5 -> '12.5%'; 12.50 -> '12.5%'
+        let str = numeric.toString();
+        if (str.includes('.')) {
+            // hapus trailing zeros di desimal
+            str = str.replace(/\.0+$/,'');
+            str = str.replace(/\.(\d*[1-9])0+$/,'.$1');
+        }
+        return `${str}%`;
+    };
+
+    const depositValue = normalizeDeposit(preOrderDeposite);
+    const showDepositRow = selectedPaymentType === 'deposit';
+
+    const isPreOrderClosed = (() => {
+        if (!preOrderClosingDate) return false;
+
+        const parsed = preOrderClosingDate instanceof Date
+            ? preOrderClosingDate
+            : new Date(preOrderClosingDate);
+
+        if (Number.isNaN(parsed.getTime())) return false;
+
+        parsed.setHours(23, 59, 59, 999);
+        return new Date().getTime() > parsed.getTime();
+    })();
 
     return isPreOrder ? (
         <>
             <div
                 className={cn(
-                    'flex flex-col border border-gray-100 rounded-lg p-5 gap-2.5',
+                    'flex flex-col border border-gray-100 rounded-lg p-5 m-4 gap-4 bg-white',
                     className
                 )}
             >
-                <div className='flex flex-row justify-between gap-[20px]'>
-                    <div className='flex flex-col gap-2.5'>
-                        <div className='text-[14px] font-medium text-gray-500'>
-                            Release Date
-                        </div>
-                        <div className='text-[16px] font-medium text-colorDefault text-center'>
-                            {preOrderAvailableDate ? preOrderAvailableDate.getDate() + ', ' + month[preOrderAvailableDate.getMonth()] + ' ' + preOrderAvailableDate.getFullYear() : 'No Release Date.'}
-                            {/* 27, February 2024 */}
-                        </div>
+                <div className='text-[16px] font-semibold text-colorDefault'>
+                    Pre Order Details
+                </div>
+                <div className='flex flex-col gap-3'>
+                    {showDepositRow && (
+                        <>
+                            <div className='flex justify-between text-[13px] text-gray-600'>
+                                <span className='font-medium text-gray-500'>Deposit:</span>
+                                <span className='font-medium text-colorDefault'>{depositValue}</span>
+                            </div>
+                            <Divider className='h-px w-full bg-gray-100' />
+                        </>
+                    )}
+                    <div className='flex justify-between items-center text-[13px] text-gray-600 gap-4'>
+                        <span className='font-medium text-gray-500'>Payment Type:</span>
+                        <Select
+                            wrapperClassname='justify-end w-full max-w-[180px]'
+                            className='w-full text-[13px]'
+                            options={paymentOptions}
+                            value={selectedPaymentType}
+                            onChange={handlePaymentTypeChange}
+                            showPlaceholder={false}
+                        />
                     </div>
-                    <Divider className="w-[1px] h-[50px]" />
-                    <div className='flex flex-col gap-2.5'>
-                        <div className='text-[14px] font-medium text-gray-500'>
-                            Last Date
-                        </div>
-                        <div className='text-[16px] font-medium text-colorDefault text-center'>
-                            31, March 2024
-                        </div>
+                    <Divider className='h-px w-full bg-gray-100' />
+                    <div className='flex justify-between text-[13px] text-gray-600'>
+                        <span className='font-medium text-gray-500'>Pre Order Closing Date:</span>
+                        <span className='font-medium text-colorDefault'>{formatDate(preOrderClosingDate)}</span>
                     </div>
-                    <Divider className="w-[1px] h-[50px]" />
-                    <div className='flex flex-col gap-2.5'>
-                        <div className='text-[14px] font-medium text-gray-500'>
-                            Deposite
-                        </div>
-                        <div className='text-[16px] font-medium text-colorDefault text-center'>
-                            40%
-                        </div>
+                    <Divider className='h-px w-full bg-gray-100' />
+                    <div className='flex justify-between text-[13px] text-gray-600'>
+                        <span className='font-medium text-gray-500'>Release Date:</span>
+                        <span className='font-medium text-colorDefault'>{formatDate(preOrderAvailableDate)}</span>
                     </div>
+                    <Divider className='h-px w-full bg-gray-100' />
+                    <div className='flex justify-between text-[13px] text-gray-600'>
+                        <span className='font-medium text-gray-500'>Note:</span>
+                        <span className='font-medium text-colorDefault text-right'>
+                            {preOrderNotes || '-'}
+                        </span>
+                    </div>
+                    {isPreOrderClosed && (
+                        <div className='mt-1 text-[12px] text-red-500 font-medium'>
+                            Pre order is closed. You can no longer place a pre-order for this product.
+                        </div>
+                    )}
                 </div>
-                {preOrderNotes && <p>
-                    Notes : {preOrderNotes}
-                </p>}
             </div>
         </>
     ) : ''

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
 };