@riosst100/pwa-marketplace 1.4.0 → 1.4.2

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

@@ -9,16 +9,23 @@ import { useProductFullDetail } from '@magento/peregrine/lib/talons/ProductFullD
 import { isProductConfigurable } from '@magento/peregrine/lib/util/isProductConfigurable';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import Breadcrumbs from '../Breadcrumbs';
+import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
 import Button from '@magento/venia-ui/lib/components/Button';
-import Carousel from '../ProductImageCarousel';
+import Carousel from '@magento/venia-ui/lib/components/ProductImageCarousel';
 import FormError from '@magento/venia-ui/lib/components/FormError';
+import RichContent from '@magento/venia-ui/lib/components/RichContent/richContent';
 import QuantityStepper from '../QuantityStepper';
-import RichContent from '../RichContent/richContent';
+// import RichContent from '../RichContent/richContent';
 import { ProductOptionsShimmer } from '@magento/venia-ui/lib/components/ProductOptions';
 import CustomAttributes from './CustomAttributes';
 import defaultClasses from './productFullDetail.module.css';
 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 { Link } from "react-router-dom";
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
 
 const WishlistButton = React.lazy(() => import('@magento/venia-ui/lib/components/Wishlist/AddToListButton'));
 const Options = React.lazy(() => import('@magento/venia-ui/lib/components/ProductOptions'));
@@ -200,6 +207,9 @@ const ProductFullDetail = props => {
                         })
                         : ''
                 }
+                classes={{
+                    content: 'normal-case font-normal text-base'
+                }}
                 priority="high"
                 type="submit"
             >
@@ -221,7 +231,10 @@ const ProductFullDetail = props => {
     );
 
     const shortDescription = productDetails.shortDescription ? (
-        <RichContent html={productDetails.shortDescription.html} />
+        <RichText
+            rootClassName="px-0"
+            content={productDetails.shortDescription.html}
+        />
     ) : null;
 
     const pageBuilderAttributes = customAttributesDetails.pagebuilder.length ? (
@@ -237,6 +250,94 @@ const ProductFullDetail = props => {
     const review_count = 0;
     const rating_value = 0;
 
+    const tokopedia_logo = './tokopedia_logo.png';
+
+    const contentContainerClass = 'content-container max-w-[1040px] p-2.5 m-auto relative mt-[34px]'
+    const ProductDescription = () => (
+        <div className={cn(contentContainerClass)}>
+            {/* <span
+                data-cy="ProductFullDetail-descriptionTitle"
+                className={classes.descriptionTitle}
+            >
+                <FormattedMessage
+                    id={'productFullDetail.description'}
+                    defaultMessage={'Description'}
+                />
+            </span> */}
+            {/* <RichContent html={productDetails.description} /> */}
+            <RichText
+                rootClassName="px-0"
+                content={productDetails.description}
+            />
+        </div>
+    );
+
+    const ProductMoreInfo = () => (
+        <>
+            <div className={cn(contentContainerClass)}>
+                <span
+                    data-cy="ProductFullDetail-detailsTitle"
+                    className={classes.detailsTitle}
+                >
+                    <FormattedMessage
+                        id={'productFullDetail.details'}
+                        defaultMessage={'Details'}
+                    />
+                </span>
+                <CustomAttributes
+                    customAttributes={customAttributesDetails.list}
+                />
+            </div>
+            {pageBuilderAttributes}
+        </>
+    );
+
+    const ProductTNC = () => (
+        <div className={cn(contentContainerClass)}>
+            <p>
+                Terms and Conditions
+            </p>
+        </div>
+    )
+
+    const ProductFAQ = () => (
+        <div className={cn(contentContainerClass)}>
+            <p>
+                Frequently Ask Question
+            </p>
+        </div>
+    )
+
+
+    const dataTabs =
+        [
+            {
+                id: 'product-detail',
+                title: 'Details',
+                content: <ProductDescription />
+            },
+            {
+                id: 'product-more-info',
+                title: 'More Info',
+                content: <ProductMoreInfo />
+            },
+            {
+                id: 'product-tnc',
+                title: 'Terms & Conditions',
+                content: <ProductTNC />
+            },
+            {
+                id: 'product-faq',
+                title: 'FAQ',
+                content: <ProductFAQ />
+            },
+            {
+                id: 'product-reviews',
+                title: 'Reviews',
+                content: <ProductReviews className={cn(contentContainerClass)} />
+            }
+        ];
+
     return (
         <Fragment>
             {breadcrumbs}
@@ -247,11 +348,17 @@ const ProductFullDetail = props => {
             >
                 <section className={classes.leftContainer}>
                     <Carousel images={mediaGalleryEntries} />
+                    <div className='product_group-actions'>
+                        <Suspense fallback={null}>
+                            <WishlistButton {...wishlistButtonProps} />
+                        </Suspense>
+                    </div>
                 </section>
                 <section className={classes.rightContainer}>
                     <div
                         className={cn(
-                            classes.title
+                            classes.title,
+                            'mb-[30px]',
                         )}
                     >
                         <h1
@@ -265,8 +372,11 @@ const ProductFullDetail = props => {
                             {productDetails.name}
                         </h1>
                         <div className='product_review-container flex items-center gap-x-2'>
-                            <div className='product_rating leading-[14px]'>
-                                <span className='text-gray-200 text-base'>
+                            <div className='product_rating leading-[14px] flex items-center gap-x-[5px]'>
+                                <span className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                </span>
+                                <span className='text-gray-200 text-sm'>
                                     {rating_value}
                                 </span>
                             </div>
@@ -278,26 +388,41 @@ const ProductFullDetail = props => {
                     </div>
                     <div
                         className={cn(
-                            'product_short_description'
+                            'product_short_description',
+                            'mb-[30px]',
                         )}
                     >
                         {shortDescription}
                     </div>
+                    <div className='product_brand-container mb-[30px] leading-[18px]'>
+                        <div className='text-sm'>
+                            Brand : <span className='text-blue-700'><Link to="">Bandai Namco</Link></span>
+                        </div>
+                    </div>
+                    <Divider />
                     <div
                         className={cn(
-                            'product_price_container'
+                            'product_price_container',
+                            'py-[30px]'
                         )}
                     >
                         <p
                             data-cy="ProductFullDetail-productPrice"
-                            className={classes.productPrice}
+                            className={cn(
+                                classes.productPrice,
+                                'text-[32px] font-semibold leading-[32px] mb-[15px]',
+                            )}
                         >
                             <Price
                                 currencyCode={productDetails.price.currency}
                                 value={productDetails.price.value}
                             />
                         </p>
+                        <small className='shipping-calculation-notes text-gray-200 text-xs'>
+                            Shipping method is calculated on checkout
+                        </small>
                     </div>
+                    <Divider />
                     <FormError
                         classes={{
                             root: classes.formErrors
@@ -305,8 +430,8 @@ const ProductFullDetail = props => {
                         errors={errors.get('form') || []}
                     />
                     <section className={classes.options}>{options}</section>
-                    <section className={classes.quantity}>
-                        <span
+                    <section className={cn(classes.quantity, 'py-[30px] !border-none')}>
+                        {/* <span
                             data-cy="ProductFullDetail-quantityTitle"
                             className={classes.quantityTitle}
                         >
@@ -314,48 +439,115 @@ const ProductFullDetail = props => {
                                 id={'global.quantity'}
                                 defaultMessage={'Quantity'}
                             />
-                        </span>
+                        </span> */}
                         <QuantityStepper
-                            classes={{ root: classes.quantityRoot }}
                             min={1}
                             message={errors.get('quantity')}
                         />
+
+                        <div className='product_shipping-information mb-[30px] leading-[18px] mt-[25px]'>
+                            <div className='text-xs'>
+                                Shiping From <span className='font-semibold'>Singapore</span>
+                            </div>
+                            <div className='text-xs'>
+                                Shiping To <span className='font-semibold'>Yishun</span>
+                            </div>
+                            <div className='text-xs'>
+                                Shiping Method <span className='font-semibold'>Store Pick Up | Meet Up</span>
+                            </div>
+                        </div>
+
+                        <div className='product_actions-wrapper'>
+                            {cartActionContent}
+                        </div>
                     </section>
-                    <section className={classes.actions}>
-                        {cartActionContent}
-                        <Suspense fallback={null}>
-                            <WishlistButton {...wishlistButtonProps} />
-                        </Suspense>
+                    <Divider />
+                    <section className='product_from-other-platform py-[30px]'>
+                        <div className='text-sm flex mb-5'>
+                            Also available in
+                        </div>
+                        <div className='platform-container flex gap-x-2.5'>
+                            <Link
+                                className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center'
+                                to=""
+                            >
+                                <img
+                                    alt="tokopedia"
+                                    width={60}
+                                    height={30}
+                                    src={'https://upload.wikimedia.org/wikipedia/commons/a/a7/Tokopedia.svg'}
+                                />
+                            </Link>
+                            <Link
+                                className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center'
+                                to=""
+                            >
+                                <img
+                                    alt="shopee"
+                                    width={60}
+                                    height={30}
+                                    src={'https://upload.wikimedia.org/wikipedia/commons/f/fe/Shopee.svg'}
+                                />
+                            </Link>
+                        </div>
                     </section>
+                    <Divider />
+                    <section className='seller-information py-[30px]'>
+                        <div className='flex xs_flex-col md_flex-row xs_items-center md_items-start items-start gap-[15px] relative'>
+                            <div className='flex flex-row justify-between relative w-full'>
+                                <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 className="text-sm">
+                                            Good Smile
+                                        </div>
+                                        <div className="flex items-center relative">
+                                            <Verify variant='Bold' color='#4E31DB' size={20} />
+                                        </div>
+                                    </div>
+                                    <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
+                                        Jurong West
+                                    </div>
+                                </div>
+                                <div className='flex flex-wrap items-start gap-4 relative'>
+                                    <button class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
+                                        <div class="flex items-center justify-center gap-[10px] relative">
+                                            <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
+                                            <div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                                Message
+                                            </div>
+                                        </div>
+                                    </button>
+                                    <button class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
+                                        <div class="flex items-center justify-center gap-[10px] relative">
+                                            <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
+                                            <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                                Chat With Seller
+                                            </div>
+                                        </div>
+                                    </button>
+                                    <button class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
+                                        <div class="flex items-center justify-center gap-[10px] relative">
+                                            <Shop color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
+                                            <div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                                Visit Store
+                                            </div>
+                                        </div>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <Divider />
                 </section>
-                <section className={classes.description}>
-                    <span
-                        data-cy="ProductFullDetail-descriptionTitle"
-                        className={classes.descriptionTitle}
-                    >
-                        <FormattedMessage
-                            id={'productFullDetail.description'}
-                            defaultMessage={'Description'}
-                        />
-                    </span>
-                    <RichContent html={productDetails.description} />
-                </section>
-                <section className={classes.details}>
-                    <span
-                        data-cy="ProductFullDetail-detailsTitle"
-                        className={classes.detailsTitle}
-                    >
-                        <FormattedMessage
-                            id={'productFullDetail.details'}
-                            defaultMessage={'Details'}
-                        />
-                    </span>
-                    <CustomAttributes
-                        customAttributes={customAttributesDetails.list}
-                    />
-                </section>
-                {pageBuilderAttributes}
             </Form>
+            <section className='section_product-details-container my-8'>
+                <Tabs
+                    data={dataTabs}
+                    tabContentWrapperClassName='!p-0'
+                    hasContent
+                    tabWrapperClassName='xl_gap-x-[60px] justify-center'
+                />
+            </section>
         </Fragment>
     );
 };

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

@@ -2,7 +2,7 @@
     composes: lg_grid from global;
     composes: lg_grid-flow-row from global;
     composes: lg_items-start from global;
-    composes: gap-x-5 from global;
+    composes: gap-x-10 from global;
 }
 
 @media (min-width: 1024px) {
@@ -25,10 +25,6 @@
     composes: border-r-0 from global;
     composes: border-b from global;
     composes: border-l-0 from global;
-    composes: my-0 from global;
-    composes: mx-sm from global;
-    composes: px-0 from global;
-    composes: py-xs from global;
 }
 
 .sectionTitle {

package/src/overwrites/venia-ui/lib/components/QuantityStepper/quantityStepper.js

@@ -8,6 +8,7 @@ import Icon from '@magento/venia-ui/lib/components/Icon';
 import TextInput from '../TextInput';
 import { Message } from '@magento/venia-ui/lib/components/Field';
 import defaultClasses from './quantityStepper.module.css';
+import cn from 'classnames';
 
 const QuantityStepper = props => {
     const { initialValue, itemId, label, min, onChange, message } = props;
@@ -34,7 +35,13 @@ const QuantityStepper = props => {
 
     return (
         <Fragment>
-            <div className={classes.root}>
+            <div
+                className={cn(
+                    classes.root,
+                    'flex w-fit border border-gray-100 rounded-md',
+                    ''
+                )}
+            >
                 <label className={classes.label} htmlFor={itemId}>
                     {label}
                 </label>
@@ -43,7 +50,10 @@ const QuantityStepper = props => {
                         id: 'quantity.buttonDecrement',
                         defaultMessage: 'Decrease Quantity'
                     })}
-                    className={classes.button_decrement}
+                    className={cn(
+                        classes.button_decrement,
+                        '!h-full min-w-[40px] min-h-[40px]'
+                    )}
                     disabled={isDecrementDisabled}
                     onClick={handleDecrement}
                     type="button"
@@ -57,7 +67,13 @@ const QuantityStepper = props => {
                         defaultMessage: 'Item Quantity'
                     })}
                     data-cy="QuantityStepper-input"
-                    classes={{ input: classes.input }}
+                    classes={{
+                        input: cn(
+                            classes.input,
+                            '!border max-w-[60px] focus_shadow-none focus_outline-[1px]',
+                            '!border-t-0 !border-b-0 !rounded-none !border-gray-100'
+                        )
+                    }}
                     field="quantity"
                     id={itemId}
                     inputMode="numeric"
@@ -71,7 +87,10 @@ const QuantityStepper = props => {
                         id: 'quantity.buttonIncrement',
                         defaultMessage: 'Increase Quantity'
                     })}
-                    className={classes.button_increment}
+                    className={cn(
+                        classes.button_increment,
+                        '!h-full min-w-[40px] min-h-[40px]'
+                    )}
                     disabled={isIncrementDisabled}
                     onClick={handleIncrement}
                     type="button"

package/src/overwrites/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css

@@ -1,12 +1,12 @@
 .root {
-    --stroke: var(--venia-global-color-gray-600);
+    /* --stroke: var(--venia-global-color-gray-600);
 
     composes: gap-x-2xs from global;
     composes: grid from global;
     composes: items-center from global;
     composes: justify-items-center from global;
     composes: text-center from global;
-    grid-template-columns: 1fr 4rem 1fr;
+    grid-template-columns: 1fr 4rem 1fr; */
 }
 
 .wrap {
@@ -29,9 +29,6 @@
 
 .button {
     composes: bg-white from global;
-    composes: border-2 from global;
-    composes: border-solid from global;
-    composes: border-button from global;
     composes: h-[2rem] from global;
     composes: inline-flex from global;
     composes: items-center from global;
@@ -73,6 +70,5 @@
 
 .input {
     composes: input from '../TextInput/textInput.module.css';
-
     composes: text-center from global;
-}
+}

package/src/overwrites/venia-ui/lib/components/RichText/index.js

@@ -0,0 +1 @@
+export { default } from './richText';

package/src/overwrites/venia-ui/lib/components/RichText/richText.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './richText.module.css';
+import cn from 'classnames';
+
+const toHTML = str => ({ __html: str });
+
+const RichText = (props) => {
+    const { content, rootClassName } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div
+            className={cn(classes.root, rootClassName)}
+            dangerouslySetInnerHTML={toHTML(content)}
+        />
+    );
+};
+
+export default RichText;

package/src/overwrites/venia-ui/lib/components/RichText/richText.module.css

@@ -0,0 +1,19 @@
+.root {
+    composes: leading-tight from global;
+    composes: px-2xs from global;
+    composes: py-0 from global;
+    composes: text-sm from global;
+}
+
+/* TODO @TW: cannot compose */
+.root p {
+    margin: 0 0 1rem;
+}
+
+/* TODO @TW: cannot compose */
+.root ul {
+    /* composes: list-disc from global; */
+    list-style-type: disc;
+    margin: 0 0 1rem;
+    padding-left: 2.5rem;
+}

package/src/talons/CollectibleGameSets/collectibleGameSets.gql.js

@@ -0,0 +1,27 @@
+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
+        }
+    }
+`;
+
+export const GET_COLLECTIBLE_GAME_QUERY = gql`
+    query getCollectibleGameSets($categoryUrlKey: String!) {
+        collectibleGameSets(categoryUrlKey: $categoryUrlKey) {
+            card_set
+            card_game
+            card_set_abbreviation
+            card_release_year
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getCollectibleGameQuery: GET_COLLECTIBLE_GAME_QUERY
+};

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -0,0 +1,65 @@
+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 './collectibleGameSets.gql';
+
+export const useCollectibleGameSets = props => {
+
+    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 slug = pathname.split('/').pop();
+    const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
+    const categoryUrlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+
+    const { error, loading, data } = useQuery(getCollectibleGameQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !storeConfigData,
+        variables: {
+            categoryUrlKey
+        }
+    });
+
+    const isBackgroundLoading = !!data && loading;
+
+    const collectibleGameSets = useMemo(() => {
+        if (!data) {
+            return null;
+        }
+        
+        const collectibleGameSets = data.collectibleGameSets;
+
+        if (!collectibleGameSets) {
+            return null;
+        }
+
+        return collectibleGameSets;
+    }, [data, categoryUrlKey]);
+
+    // Update the page indicator if the GraphQL query is in flight.
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
+
+    return {
+        error,
+        loading,
+        collectibleGameSets
+    };
+};

package/src/theme/vars.js

@@ -6,6 +6,7 @@ export const orange = '#F7C317';
 export const gray100 = '#B9AEC5';
 export const gray600 = '#1BA387';
 export const gray700 = '#999999';
+export const primary900 = "#292D32";
 
 export default {
     textPrimary,
@@ -16,4 +17,5 @@ export default {
     gray100,
     gray600,
     gray700,
+    primary900,
 }