@riosst100/pwa-marketplace 2.7.7 → 2.7.9

package/src/overwrites/venia-ui/lib/components/Header/header.module.css

@@ -0,0 +1,173 @@
+.root {
+    composes: auto-cols-fr from global;
+    composes: bg-header from global;
+    composes: border-b from global;
+    composes: border-subtle from global;
+    composes: grid from global;
+    composes: h-auto from global;
+    composes: justify-center from global;
+    composes: px-4 from global;
+    composes: top-0 from global;
+    composes: sticky from global;
+    composes: w-full from global;
+    composes: z-header from global;
+
+    composes: lg_px-8 from global;
+}
+
+.switchers {
+    composes: auto-cols-max from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-end from global;
+    /* composes: max-w-site from global; */
+    composes: mx-auto from global;
+    composes: relative from global;
+    composes: w-full from global;
+    composes: z-menu from global;
+}
+
+.switchersContainer {
+    composes: bg-gray-100 from global;
+    composes: hidden from global;
+    composes: px-8 from global;
+    composes: w-full from global;
+}
+
+/* Large screen styles */
+.switchersContainer {
+    composes: sm_block from global;
+}
+
+.open {
+    composes: root;
+}
+
+.closed {
+    composes: root;
+}
+
+.toolbar {
+    composes: border-0 from global;
+    composes: content-center from global;
+    composes: gap-x-4 from global;
+    composes: grid from global;
+    composes: grid-cols-3 from global;
+    composes: grid-rows-header from global;
+    composes: h-14 from global;
+    composes: items-center from global;
+    composes: justify-self-center from global;
+    composes: max-w-site from global;
+    composes: w-full from global;
+    composes: z-header from global;
+
+    composes: lg_h-20 from global;
+    composes: lg_gap-x-8 from global;
+    composes: lg_grid-cols-12 from global;
+}
+
+.logo {
+    height: var(--height);
+    width: var(--width);
+}
+
+.primaryActions {
+    composes: col-start-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-self-start from global;
+    composes: row-start-1 from global;
+    composes: self-center from global;
+}
+
+.logoContainer {
+    composes: col-start-2 from global;
+    composes: justify-self-center from global;
+
+    composes: lg_col-end-3 from global;
+    composes: lg_col-start-1 from global;
+    composes: lg_justify-self-start from global;
+    composes: lg_mr-8 from global;
+    composes: lg_row-start-1 from global;
+}
+
+.secondaryActions {
+    composes: col-start-3 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-end from global;
+    composes: justify-self-end from global;
+    composes: w-max from global;
+
+    composes: lg_col-end-13 from global;
+    composes: lg_col-start-10 from global;
+    composes: lg_gap-x-4 from global;
+}
+
+.searchFallback {
+    composes: flex from global;
+    composes: justify-center from global;
+    composes: mb-2 from global;
+    composes: px-4 from global;
+}
+
+.input {
+    composes: input from '../TextInput/textInput.module.css';
+
+    @apply max-w-sm;
+}
+
+.loader,
+.loaderBefore,
+.loaderAfter {
+    --dot-size: 2em;
+    --dot-font-size: 6px;
+    --dot-shadow-offset: calc(-1 * var(--dot-size) + var(--dot-font-size));
+
+    composes: rounded-full from global;
+    width: var(--dot-size);
+    height: var(--dot-size);
+    animation: pulse 1.8s infinite ease-in-out;
+    animation-fill-mode: both;
+}
+
+.loader {
+    composes: mb-0 from global;
+    composes: mx-auto from global;
+    composes: relative from global;
+    composes: text-subtle from global;
+    font-size: var(--dot-font-size);
+    margin-top: var(--dot-shadow-offset);
+    transform: translateZ(0);
+    animation-delay: -0.16s;
+}
+
+.loaderBefore,
+.loaderAfter {
+    composes: content-empty from global;
+    composes: absolute from global;
+    composes: top-0 from global;
+}
+
+.loaderBefore {
+    composes: left-[-3.5em] from global;
+    composes: text-gray-100 from global;
+    animation-delay: -0.32s;
+}
+
+.loaderAfter {
+    composes: left-[3.5em] from global;
+    composes: text-gray-600 from global;
+}
+
+@keyframes pulse {
+    0%,
+    80%,
+    100% {
+        box-shadow: 0 var(--dot-size) 0 -1.3em;
+    }
+    40% {
+        box-shadow: 0 var(--dot-size) 0 0;
+    }
+}

package/src/overwrites/venia-ui/lib/components/Main/main.module.css

@@ -11,7 +11,7 @@
 
 .page {
     composes: md_max-w-screen-md from global;
-    composes: lg_max-w-[1210px] from global;
+    composes: lg_max-w-[1300px] from global;
     composes: mx-auto from global;
     composes: my-0 from global;
     composes: px-[15px] from global;

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css

@@ -11,7 +11,7 @@
 
 .submenuContainer {
     composes: w-full from global;
-    composes: max-w-[1210px] from global;
+    composes: max-w-[1300px] from global;
     composes: mx-[auto] from global;
     composes: gap-[15px] from global;
     composes: max-h-[50vh] from global;

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

@@ -24,7 +24,7 @@ const CustomAttributes = props => {
                     const attributeContent = (
                         <li
                             key={currentAttribute.attribute_metadata.uid}
-                            className={cn(classes.listItem, '!text-[14px] py-1')}
+                            className={cn(classes.listItem, '!text-[14px] py-2')}
                         >
                             <AttributeType
                                 showLabels={showLabels}

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

@@ -3,6 +3,7 @@ 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 { useToasts } from '@magento/peregrine/lib';
 
 import Price from '@magento/venia-ui/lib/components/Price';
 import { useProductFullDetail } from '@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail';
@@ -22,7 +23,7 @@ import cn from 'classnames';
 import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
 import ProductReviews from './components/productReview';
 import RichText from '@magento/venia-ui/lib/components/RichText';
-import { Star1, Verify, Sms, Message, Shop } from 'iconsax-react';
+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';
 
@@ -86,7 +87,7 @@ const ProductFullDetail = props => {
     const {
         breadcrumbCategoryId,
         errorMessage,
-        handleAddToCart,
+        handleAddToCart: originalHandleAddToCart,
         handleSelectionChange,
         isOutOfStock,
         isEverythingOutOfStock,
@@ -100,7 +101,9 @@ const ProductFullDetail = props => {
         wishlistButtonProps,
         sellerDetails
     } = talonProps;
-    
+
+    const [, { addToast }] = useToasts();
+
     const { formatMessage } = useIntl();
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -216,12 +219,11 @@ const ProductFullDetail = props => {
         );
     // Error message for screen reader
     const cartActionContent = isSupportedProductType ? (
-        <section className={cn(classes.actButton, 'flex gap-x-[20px] px-[12px] py-0')}>
+        <section className={cn(classes.actButton, 'justify-between flex gap-x-[20px] px-[15px] py-0')}>
            <RFQ
                 disabled={isAddToCartDisabled}
-                classes={{ rfqButton: classes.rfqButton }}
+                classes={{ rfqButton: cn(classes.rfqButton, "w-full") }}
             />
-
             <Button
                 data-cy="ProductFullDetail-addToCartButton"
                 disabled={isAddToCartDisabled}
@@ -237,7 +239,7 @@ const ProductFullDetail = props => {
                 }
                 classes={{
                     rootClass: '!px-0 !py-3',
-                    content: 'normal-case font-medium text-[14px]'
+                    content: 'w-full normal-case font-medium text-[14px]'
                 }}
                 priority="high"
                 type="submit"
@@ -291,9 +293,9 @@ const ProductFullDetail = props => {
         </div>
     );
 
-    const ProductMoreInfo = ({ className }) => (
+    const ProductMoreInfo = () => (
         <>
-            <div className={cn(contentContainerClass,  className)}>
+            <div className={cn(contentContainerClass, classes.contentContainerTabOverride)}>
                 <CustomAttributes
                     customAttributes={customAttributesDetails.list}
                     classes={{ list: classes.customAttributesList }}
@@ -385,11 +387,14 @@ const ProductFullDetail = props => {
         return attr.entered_attribute_value?.value || "";
     };
 
-
     const setNameValue = getAttributeValue(customAttributesDetails, "card_set", true);
-    const conditionValue = getAttributeValue(customAttributesDetails, "card_condition");
-
-    const ExpandableSection = ({ children, maxHeight = 280 }) => {
+    const cardNameValue = getAttributeValue(customAttributesDetails, "card_name", true);
+    const cardNumberValue = getAttributeValue(customAttributesDetails, "card_number", true);
+    const rarityValue = getAttributeValue(customAttributesDetails, "card_rarity", true);
+    const featureValue = getAttributeValue(customAttributesDetails, "card_feature", true);
+    const conditionValue = getAttributeValue(customAttributesDetails, "card_condition", true);
+    const foilValue = getAttributeValue(customAttributesDetails, "card_foil", true);
+    const ExpandableSection = ({ children, maxHeight = 480 }) => {
     const [expanded, setExpanded] = useState(false);
     const [showButton, setShowButton] = useState(false);
     const contentRef = useRef(null);
@@ -417,50 +422,54 @@ const ProductFullDetail = props => {
         const isDesktop = typeof window !== "undefined" && window.innerWidth >= 769;
 
         return (
-            <div className="relative">
-                <div
-                    ref={contentRef}
-                    style={{
-                        maxHeight:
-                            isDesktop && showButton && !expanded
-                                ? `${maxHeight}px`
-                                : "none",
-                        overflow: "hidden",
-                        transition: "max-height 0.3s ease"
-                    }}
-                >
-                    {children}
-                </div>
-
-                {isDesktop && !expanded && showButton && (
-                    <div className="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t to-transparent pointer-events-none" />
-                )}
+            <>
+                <div className="relative">
+                    <div
+                        ref={contentRef}
+                        style={{
+                            maxHeight:
+                                isDesktop && showButton && !expanded
+                                    ? `${maxHeight}px`
+                                    : "none",
+                            overflow: "hidden",
+                            transition: "max-height 0.3s ease"
+                        }}
+                    >
+                        {children}
+                    </div>
 
+                    {isDesktop && !expanded && showButton && (
+                        <div className={cn("absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t to-transparent pointer-events-none", classes.productDetailsMaxContent)}/>
+                    )}
+                </div>
                 {isDesktop && showButton && (
                     <button
                         type="button"
                         onClick={() => setExpanded(!expanded)}
-                        className="mt-2 text-blue-600 font-medium underline focus:outline-none"
+                        className="mt-0 text-[14px] text-blue-600 font-medium underline focus:outline-none"
                     >
-                        {expanded ? "Show Less" : "Read More"}
+                        {expanded ? "Show Less" : "Read More"} <ArrowUp2 size="14" style={{
+                            "display": "inline-block",
+                            "marginLeft": "5px"
+                        }} className={cn(expanded ? 'rotate-0 ' : 'rotate-180', 'transition-all stroke-current')} variant="Outline" />
                     </button>
                 )}
-            </div>
+            </>
         );
     };
 
     const dataTabs =
     [
+        {
+            id: 'product-more-info',
+            title: 'Product Information',
+            content: <ProductMoreInfo />
+        },
         {
             id: 'product-detail',
-            title: 'Description',
+            title: 'Product Description',
             content: <ProductDescription />
         },
-        // {
-        //     id: 'product-more-info',
-        //     title: 'Details',
-        //     content: <ProductMoreInfo />
-        // },
         {
             id: 'product-tnc',
             title: 'Term & Conditions',
@@ -527,6 +536,39 @@ const ProductFullDetail = props => {
         </div>
     ) : null;
 
+    const handleAddToCart = async (...args) => {
+        try {
+            await originalHandleAddToCart(...args);
+            addToast({
+                type: 'success',
+                message: formatMessage({
+                    id: 'productFullDetail.addToCartSuccess',
+                    defaultMessage: 'Product successfully added to cart!'
+                })
+            });
+        } catch (e) {
+            addToast({
+                type: 'error',
+                message: formatMessage({
+                    id: 'productFullDetail.addToCartError',
+                    defaultMessage: 'Failed to add product to cart.'
+                })
+            });
+        }
+    };
+
+    useEffect(() => {
+        const toastRoot = document.getElementById('toast-root');
+        if (toastRoot) {
+            toastRoot.classList.add('toast-center-bottom');
+        }
+        return () => {
+            if (toastRoot) {
+                toastRoot.classList.remove('toast-center-bottom');
+            }
+        };
+    }, []);
+
     return (
         <Fragment>
             {breadcrumbs}
@@ -551,32 +593,42 @@ const ProductFullDetail = props => {
                             aria-live="polite"
                             className={cn(
                                 classes.productName,
-                                '!font-medium leading-[normal] mb-4 line-clamp-2 !text-[1.5rem]'
+                                '!font-medium leading-[1] mb-1.5 line-clamp-2 !text-[1.5rem]'
                             )}
                             data-cy="ProductFullDetail-productName"
                         >
                             {productDetails.name}
                         </h1>
-                        {setNameValue && (
-                            <div className="text-gray-400 text-sm mb-2">{setNameValue}</div>
-                        )}
                     </div>
-                    <section className="bottom_right-container block sm_flex md_flex lg_flex xl_flex 2xl_flex gap-[7px]">
-                        <section className='right_left-container'>
-                            <ExpandableSection maxHeight={280}>
-                                <div
-                                    className={cn(
-                                        'product_short_description',
-                                        'mb-xs',
+                    <section className="bottom_right-container justify-center gap-x-6 block sm_flex md_flex lg_flex xl_flex 2xl_flex gap-[7px]">
+                        <section className='right_left-container w-full'>
+                            <ExpandableSection>
+                                <div className="text-sm leading-6 leading-[2.5rem]">
+                                    {setNameValue && (
+                                        <p><strong>Set Name:</strong> {setNameValue}</p>
+                                    )}
+                                    {cardNameValue && (
+                                        <p><strong>Card Name:</strong> {cardNameValue}</p>
+                                    )}
+                                    {cardNumberValue && (
+                                        <p><strong>Card Number:</strong> {cardNumberValue}</p>
+                                    )}
+                                    {rarityValue && (
+                                        <p><strong>Rarity:</strong> {rarityValue}</p>
+                                    )}
+                                    {featureValue && (
+                                        <p><strong>Feature:</strong> {featureValue}</p>
+                                    )}
+                                    {conditionValue && (
+                                        <p><strong>Condition:</strong> {conditionValue}</p>
+                                    )}
+                                    {foilValue && (
+                                        <p><strong>Foil/Non Foil:</strong> {foilValue}</p>
                                     )}
-                                >
-                                    <p className="font-bold text-[15px] mb-3">Product Details</p>
-                                    {shortDescription}
-                                    <ProductMoreInfo className="!mt-0 lg:!mt-0 !p-0" />
                                 </div>
                             </ExpandableSection>
                         </section>
-                        <section className='right_right-container'>
+                        <section className='right_right-container w-full'>
                             <div className={cn('product_purchase-section', 'border border-[lightgray] rounded-[10px] mb-[15px]')}>
                                 <div
                                     className={cn(
@@ -584,13 +636,8 @@ const ProductFullDetail = props => {
                                         'flex justify-between flex-wrap gap-y-5'
                                     )}
                                 >
-                                    <div className='flex flex-col gap-y-3 pl-[1rem] pt-[1.5rem]'>
-                                        <div className='flex flex-col gap-y-3'>
-                                            {conditionValue && (
-                                                <div className="text-gray-600 text-sm mb-1">
-                                                    {conditionValue}
-                                                </div>
-                                            )}
+                                    <div className='flex flex-col gap-y-2 pl-[1rem] pt-[1rem]'>
+                                        <div className='flex flex-col gap-y-1'>
                                             <p
                                                 data-cy="ProductFullDetail-productPrice"
                                                 className={cn(
@@ -613,7 +660,7 @@ const ProductFullDetail = props => {
                                         <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-[10px] relative">
+                                                    <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 : ''}
@@ -633,7 +680,7 @@ const ProductFullDetail = props => {
                                 { options &&
                                     <section className={classes.options}>{options}</section>
                                 }
-                                <section className={cn(classes.quantity, 'py-xs !border-none')}>
+                                <section className={cn(classes.quantity, 'pb-[20px] pt-[10px] !border-none')}>
                                     <div className='product_group-actions flex gap-x-[18px] gap-y-4 pl-[1rem] items-center mt-2 lg_mt-0 mb-6 lg_mb-0'>
                                         <QuantityStepper
                                             min={1}
@@ -657,9 +704,12 @@ const ProductFullDetail = props => {
                                     </div>
                                 </section>
                             </div>
+                            <div className={cn('product_otherlink-section', 'border border-[lightgray] rounded-[10px] mb-[15px]')}>
+                                <LinkToOtherStores productDetails={productDetails} />
+                            </div>
                             <section>
                                 <div 
-                                    className="text-center pt-3 pb-3 cursor-pointer border border-[lightgray] rounded-[10px] mb-[15px]"
+                                    className="text-center pt-3 pb-3 cursor-pointer border border-[lightgray] rounded-[10px]"
                                     onClick={() => {
                                         const section = document.getElementById("cross-seller-section");
                                         if (section) {
@@ -667,7 +717,7 @@ const ProductFullDetail = props => {
                                         }
                                     }}
                                 >
-                                    <span className="font-bold underline">
+                                    <span className="font-bold underline text-[14px]">
                                         View {totalListings} Other Listings
                                     </span>
                                     <p className="text-sm text-gray-600">
@@ -675,9 +725,6 @@ const ProductFullDetail = props => {
                                     </p>
                                 </div>
                             </section>
-                            <div className={cn('product_otherlink-section', 'border border-[lightgray] rounded-[10px]')}>
-                                <LinkToOtherStores productDetails={productDetails} />
-                            </div>
                         </section>
                     </section>
                 </section>

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

@@ -4,6 +4,15 @@
     composes: lg_items-start from global;
     composes: gap-x-10 from global;
 }
+.productDetailsMaxContent{
+    background: linear-gradient(0deg,#fff 20px,#fff0);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 30%;
+    content: "";
+}
 .rfqButton {
   padding: 10px 0px;
 }
@@ -12,6 +21,9 @@
 }
 .customAttributesList {
     padding-left: 0 !important;
+    column-count: 2;
+    column-gap: 2rem;
+    list-style: none;
 }
 .contentContainerTabOverride {
   max-width: none !important;
@@ -48,6 +60,12 @@
     grid-area: title; */
 }
 
+.productDetailTabs {
+    border-bottom: 1px solid #d3d3d3;
+    padding-bottom: 10px;
+    margin-bottom: 15px;
+}
+
 .productName {
     composes: font-medium from global;
     composes: text-colorDefault from global;
@@ -236,4 +254,23 @@
     .leftContainer {
         composes: max-w-[100%] from global;
     }
+}
+
+/* productFullDetail.module.css */
+:global(#toast-root).toast-center-bottom {
+    position: fixed !important;
+    left: 50% !important;
+    bottom: 2rem !important;
+    right: auto !important;
+    top: auto !important;
+    transform: translateX(-50%) !important;
+    z-index: 9999 !important;
+    margin: 0 !important;
+    max-width: 90vw !important;
+    min-width: 320px !important;
+    width: auto !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
 }

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/carousel.module.css

@@ -22,6 +22,7 @@
 }
 
 .imageContainer {
+    composes: h-full from global;
     composes: w-full from global;
     grid-area: 1 / 1 / 2 / 4;
 }
@@ -37,7 +38,7 @@
 }
 
 .carouselContainer {
-    composes: flex items-center justify-center p-4 bg-[#f7f7f8] rounded-md max-h-[660px] from global;
+    composes: flex items-center justify-center p-4 bg-[#f7f7f8] rounded-md h-[540px] max-h-[540px] from global;
 }
 
 .currentImage_placeholder {

package/src/talons/FavoriteSeller/AddToListButton/useAddToFavoriteListButton.js

@@ -142,7 +142,10 @@ export const useAddToFavoriteListButton = props => {
 
     return {
         buttonProps,
-        buttonText: props.buttonText && props.buttonText(isSelected),
+        buttonText:
+            typeof props.buttonText === 'function'
+                ? props.buttonText(isSelected)
+                : props.buttonText,
         // customerFavoriteSellers,
         errorToastProps,
         handleClick,