@riosst100/pwa-marketplace 2.0.6 → 2.0.8

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

@@ -36,7 +36,7 @@ const AuctionDetail = (props) => {
         // Render a countdown
         return <div className='flex flex-row gap-8'>
             <div className='flex flex-col'>
-                <div className='text-[40px] leading-[normal] font-semibold'>
+                <div className='text-[40px] leading-[normal] font-medium'>
                 {days}
                 </div>
                 <div className='text-[14px] font-bold'>
@@ -44,7 +44,7 @@ const AuctionDetail = (props) => {
                 </div>
             </div>
             <div className='flex flex-col'>
-                <div className='text-[40px] leading-[normal] font-semibold'>
+                <div className='text-[40px] leading-[normal] font-medium'>
                 {hours}
                 </div>
                 <div className='text-[14px] font-bold'>
@@ -52,7 +52,7 @@ const AuctionDetail = (props) => {
                 </div>
             </div>
             <div className='flex flex-col'>
-                <div className='text-[40px] leading-[normal] font-semibold'>
+                <div className='text-[40px] leading-[normal] font-medium'>
                 {minutes}
                 </div>
                 <div className='text-[14px] font-bold'>
@@ -60,7 +60,7 @@ const AuctionDetail = (props) => {
                 </div>
             </div>
             <div className='flex flex-col'>
-                <div className='text-[40px] leading-[normal] font-semibold'>
+                <div className='text-[40px] leading-[normal] font-medium'>
                 {seconds}
                 </div>
                 <div className='text-[14px] font-bold'>
@@ -82,7 +82,7 @@ const AuctionDetail = (props) => {
         >
             <div className='modal_bid-content'>
                 <div className='header_title-modal flex justify-between mb-10'>
-                    <div className='text-lg text-black font-semibold'>
+                    <div className='text-lg text-black font-medium'>
                         Place bid
                     </div>
                     <button onClick={() => { setOpen(!open) }} >
@@ -95,7 +95,7 @@ const AuctionDetail = (props) => {
                         <span className='text-[14px] font-bold text-gray-500'>
                             Current bid
                         </span>
-                        <span className='text-2xl font-semibold'>
+                        <span className='text-2xl font-medium'>
                             $102.50
                         </span>
                     </div>
@@ -138,7 +138,7 @@ const AuctionDetail = (props) => {
                             <Button
                                 priority='low'
                                 classes={{
-                                    content: 'capitalize text-[16px] font-semibold'
+                                    content: 'capitalize text-[16px] font-medium'
                                 }}
                                 onClick={() => setOpen(false)}
                             >
@@ -147,7 +147,7 @@ const AuctionDetail = (props) => {
                             <Button
                                 priority='high'
                                 classes={{
-                                    content: 'capitalize text-[16px] font-semibold'
+                                    content: 'capitalize text-[16px] font-medium'
                                 }}
                             >
                                 Place Bid
@@ -168,7 +168,7 @@ const AuctionDetail = (props) => {
                     <div className='text-[16px] font-bold text-gray-500'>
                         Starting Price
                     </div>
-                    <div className='text-[40px] font-semibold text-colorDefault'>
+                    <div className='text-[40px] font-medium text-colorDefault'>
                         <Price
                             currencyCode={productDetails.price.currency}
                             value={auctionData.starting_price}
@@ -195,7 +195,7 @@ const AuctionDetail = (props) => {
             <Button
                 priority='high'
                 classes={{
-                    content: 'capitalize text-[16px] font-semibold'
+                    content: 'capitalize text-[16px] font-medium'
                 }}
                 onClick={() => setOpen(true)}
             >

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

@@ -19,7 +19,7 @@ const bidList = (props) => {
                     )}
                     onClick={() => setExpand(!expand)}
                 >
-                    <span className='text-[16px] font-semibold'>
+                    <span className='text-[16px] font-medium'>
                         Previous bids (5)
                     </span>
                     <ArrowDown2

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

@@ -28,7 +28,7 @@ const modalFormReview = (props) => {
             >
                 <div className='form_review-container'>
                     <div className='header_title-modal flex justify-between mb-10'>
-                        <div className='text-lg text-black font-semibold'>
+                        <div className='text-lg text-black font-medium'>
                             Write Review
                         </div>
                         <button onClick={() => { setOpen(!open) }} >
@@ -139,7 +139,7 @@ const modalFormReview = (props) => {
                             <Button
                                 priority='low'
                                 classes={{
-                                    content: 'capitalize text-[16px] font-semibold'
+                                    content: 'capitalize text-[16px] font-medium'
                                 }}
                                 onClick={() => setOpen(false)}
                             >
@@ -148,7 +148,7 @@ const modalFormReview = (props) => {
                             <Button
                                 priority='high'
                                 classes={{
-                                    content: 'capitalize text-[16px] font-semibold'
+                                    content: 'capitalize text-[16px] font-medium'
                                 }}
                             >
                                 Submit Review

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

@@ -26,7 +26,7 @@ const preOrderInfo = (props) => {
                         <div className='text-[14px] font-medium text-gray-500'>
                             Release Date
                         </div>
-                        <div className='text-[16px] font-semibold text-colorDefault text-center'>
+                        <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>
@@ -36,7 +36,7 @@ const preOrderInfo = (props) => {
                         <div className='text-[14px] font-medium text-gray-500'>
                             Last Date
                         </div>
-                        <div className='text-[16px] font-semibold text-colorDefault text-center'>
+                        <div className='text-[16px] font-medium text-colorDefault text-center'>
                             31, March 2024
                         </div>
                     </div>
@@ -45,7 +45,7 @@ const preOrderInfo = (props) => {
                         <div className='text-[14px] font-medium text-gray-500'>
                             Deposite
                         </div>
-                        <div className='text-[16px] font-semibold text-colorDefault text-center'>
+                        <div className='text-[16px] font-medium text-colorDefault text-center'>
                             40%
                         </div>
                     </div>

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

@@ -16,7 +16,7 @@ const productReview = (props) => {
             <div className={className}>
                 <div className='review-summary flex justify-between mb-[30px] pb-[30px] border-b border-gray-100'>
                     <div className="justify-start items-end gap-[15px] inline-flex">
-                        <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
+                        <div className="text-center text-zinc-900 text-[40px] font-medium leading-10">4.7</div>
                         <div className="flex-col justify-start items-start gap-[9px] inline-flex">
                             <div className="justify-start items-start gap-1.5 inline-flex">
                                 <div className="w-3.5 h-3.5 relative">

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

@@ -217,7 +217,7 @@ const ProductFullDetail = props => {
                         : ''
                 }
                 classes={{
-                    content: 'normal-case font-semibold text-[16px]'
+                    content: 'normal-case font-medium text-[16px]'
                 }}
                 priority="low"
                 type="submit"
@@ -239,7 +239,7 @@ const ProductFullDetail = props => {
                         : ''
                 }
                 classes={{
-                    content: 'normal-case font-semibold text-[16px]'
+                    content: 'normal-case font-medium text-[16px]'
                 }}
                 priority="high"
                 type="submit"
@@ -456,7 +456,7 @@ const ProductFullDetail = props => {
                             aria-live="polite"
                             className={cn(
                                 classes.productName,
-                                '!font-semibold leading-[normal] mb-4 line-clamp-2'
+                                '!font-medium leading-[normal] mb-4 line-clamp-2'
                             )}
                             data-cy="ProductFullDetail-productName"
                         >
@@ -503,7 +503,7 @@ const ProductFullDetail = props => {
                                     data-cy="ProductFullDetail-productPrice"
                                     className={cn(
                                         classes.productPrice,
-                                        'text-[32px] font-semibold leading-[32px] mb-0',
+                                        'text-[32px] font-medium leading-[32px] mb-0',
                                     )}
                                 >
                                     <Price
@@ -562,13 +562,13 @@ const ProductFullDetail = props => {
                         <div className='product_shipping-information mb-[30px] leading-[18px] mt-[25px]'>
                             {sellerDetails &&
                                 <div className='text-xs'>
-                                    Ship From <span className='font-semibold'>{sellerDetails.country}</span>
+                                    Ship From <span className='font-medium'>{sellerDetails.country}</span>
                                 </div>}
                             <div className='text-xs'>
-                                Ship To <span className='font-semibold'>Yishun</span>
+                                Ship To <span className='font-medium'>Yishun</span>
                             </div>
                             <div className='text-xs'>
-                                Shiping Method <span className='font-semibold'>Store Pick Up | Meet Up</span>
+                                Shiping Method <span className='font-medium'>Store Pick Up | Meet Up</span>
                             </div>
                         </div>
 

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

@@ -29,7 +29,7 @@
 
 .sectionTitle {
     composes: flex from global;
-    composes: font-semibold from global;
+    composes: font-medium from global;
     composes: items-center from global;
     composes: leading-normal from global;
     composes: mb-sm from global;
@@ -48,7 +48,7 @@
 }
 
 .productName {
-    composes: font-semibold from global;
+    composes: font-medium from global;
     composes: text-colorDefault from global;
 
     composes: lg_font-normal from global;
@@ -87,7 +87,7 @@
 
 .quantityTitle {
     composes: block from global;
-    composes: font-semibold from global;
+    composes: font-medium from global;
     composes: leading-normal from global;
     composes: mb-sm from global;
     composes: text-colorDefault from global;

package/src/overwrites/venia-ui/lib/components/TextInput/field.module.css

@@ -6,7 +6,7 @@
 
 .label {
     composes: flex from global;
-    composes: font-semibold from global;
+    composes: font-medium from global;
     composes: items-center from global;
     composes: justify-between from global;
     composes: leading-none from global;

package/src/overwrites/venia-ui/lib/tokens.module.css

@@ -87,7 +87,7 @@
 
     /* font weight */
     /* --venia-global-fontWeight-normal: 400; */
-    /* --venia-global-fontWeight-semibold: 600; */
+    /* --venia-global-fontWeight-medium: 600; */
     /* --venia-global-fontWeight-bold: 700; */
 
     /* line height */

package/src/talons/ShopByCard/shopByCard.gql.js

@@ -0,0 +1,47 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_COLLECTIBLE_GAME_QUERY = gql`
+    query getShopByCard($categoryUrlKey: String!, $productType: String) {
+        shopByCard(categoryUrlKey: $categoryUrlKey, productType: $productType) {
+            release_type
+            sets {
+                set_name
+                option_id
+                set_abbreviation
+                release_date
+                release_year
+                release_number
+            }
+        }
+    }
+`;
+
+export const GET_SPORT_CARDS_SETS_QUERY = gql`
+    query getSportCardsSets($categoryUrlKey: String!, $setType: String) {
+        sportCardsSets(categoryUrlKey: $categoryUrlKey, setType: $setType) {
+            group
+            sets {
+                set_name
+                option_id
+                release_year
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getCollectibleGameQuery: GET_COLLECTIBLE_GAME_QUERY,
+    getSportCardsSetsQuery: GET_SPORT_CARDS_SETS_QUERY
+};

package/src/talons/ShopByCard/useShopByCard.js

@@ -0,0 +1,134 @@
+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 './shopByCard.gql';
+
+export const useShopByCard = props => {
+
+    const { searchQuery, setActive, currentSort, shopby } = props
+
+    const { value: sortby } = currentSort
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getCollectibleGameQuery } = operations;
+    const { pathname } = useLocation();
+    const [
+        ,
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const pathnameArr = pathname.split('/');
+
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    const productType = shopby;
+    
+    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+
+    const { error, loading, data } = useQuery(getCollectibleGameQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !storeConfigData,
+        variables: {
+            categoryUrlKey: categoryUrlKey,
+            productType: productType
+        }
+    });
+
+    const isBackgroundLoading = !!data && loading;
+
+    const shopByCard = useMemo(() => {
+        if (!data) {
+            return null;
+        }
+        
+        const shopByCard = data.shopByCard;
+        if (!shopByCard) {
+            return null;
+        }
+
+        const sortbyData = [];
+        if (sortby != 'all') {
+            shopByCard.map((setRelease, index) => {
+                const { release_type, sets } = setRelease;
+                if (sets.length) {
+                    sets.map((set, index) => {
+                        const { release_year } = set;
+                        if (release_year) {
+                            // groupingSetsByYear.splice(release_year, 0, set);
+                            const result = sortbyData.find(item => item.release_type === release_year);
+
+                            // groupingSetsByYear[release_year] = set;
+                            if (result) {
+                                result.sets.push(set)
+                            } else {
+                                if (sortby == "date" || sortby == "newest" && sortbyData.length < 2) {
+                                    sortbyData.push({
+                                        'release_type': release_year,
+                                        'sets': [set]
+                                    })
+                                }
+                            }
+                        }
+                    })
+                }
+            })
+        }
+
+        return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : shopByCard.slice().sort((a, b) => a.release_type.toLowerCase().localeCompare(b.release_type.toLowerCase()));
+    }, [data, sortby]);
+
+    const availableGroups = shopByCard && shopByCard.length ? shopByCard.map(({ release_type }) => release_type) : [];
+
+    const filteredShopByCard = useMemo(() => {
+        if (!shopByCard) {
+            return null;
+        }
+
+        const filteredSets = [];
+
+        if (searchQuery) {
+
+            setActive('all')
+
+            shopByCard.map(({ release_type, sets }, index) => {
+                const newSets = sets.filter(function(set) {
+                    return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || set.set_abbreviation.search(new RegExp(searchQuery, "i")) != -1 || release_type.search(new RegExp(searchQuery, "i")) != -1;
+                });
+
+                if (newSets && newSets.length) {
+                    filteredSets.push({
+                        'release_type': release_type,
+                        'sets': newSets
+                    })
+                }
+            })
+        }
+
+        return searchQuery ? filteredSets : shopByCard;
+    }, [shopByCard, searchQuery, sortby]);
+
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
+
+    return {
+        error,
+        loading,
+        shopByCard,
+        filteredShopByCard,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        productType,
+        availableGroups
+    };
+};

package/src/talons/SportCardsSets/useSportCardsSets.js

@@ -174,7 +174,7 @@ export const useSportCardsSets = props => {
             })
         }
 
-        return sortby == "release" ? sportCardsSets.slice().sort((a, b) => b.group.toLowerCase().localeCompare(a.group.toLowerCase())) : sportCardsSets.slice().sort((a, b) => a.group.toLowerCase().localeCompare(b.group.toLowerCase()));
+        return sortby == "release" ? sportCardsSets : sportCardsSets;
     }, [queryResponse, activeTab]);
 
     const availableGroups = sportCardsSets && sportCardsSets.length ? sportCardsSets.map(({ group }) => group) : [];