@riosst100/pwa-marketplace 1.2.2 → 1.2.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/Seller/index.js

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

package/src/{modules/seller/sellerPage.js → components/Seller/seller.js}

@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
 import Slider from '@riosst100/pwa-marketplace/src/components/commons/Slider';
 import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
-import AllProduct from '@riosst100/pwa-marketplace/src/modules/seller/components/allProduct';
-import StoreInformation from '@riosst100/pwa-marketplace/src/modules/seller/components/storeInformation';
-import Reviews from '@riosst100/pwa-marketplace/src/modules/seller/components/reviews';
+import SellerProducts from '../SellerProducts';
+import SellerInformation from '../SellerInformation';
+import Reviews from '../SellerReview';
 import {
     Verify,
     Sms,
@@ -14,36 +19,70 @@ import {
     Star1,
 } from 'iconsax-react';
 
-const sellerPage = () => {
+const Seller = props => {
+    const talonProps = useSeller({
+        mapSeller
+    });
+
+    const { error, loading, seller } = talonProps;
+
+    if (loading && !seller)
+        return '';
+        // return <SellerShimmer />;
+    if (error && !seller) return <ErrorView />;
+    if (!seller) {
+        return (
+            <h1>
+                <FormattedMessage
+                    id={'seller.notFound'}
+                    defaultMessage={
+                        'Seller Not Found.'
+                    }
+                />
+            </h1>
+        );
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{seller.name}</StoreTitle>
+            <Meta name="description" content={seller.description} />
+            <SellerDetail seller={seller} />
+        </Fragment>
+    );
+};
+
+const SellerDetail = ({ seller }) => {
     const dataTabs =
-        [
-            {
-                id: 'product-tab',
-                title: 'All Products',
-                content: <AllProduct />,
-            },
-            {
-                id: 'store-information',
-                title: 'Store Information',
-                content: <StoreInformation />,
-            },
-            {
-                id: 'reviews',
-                title: 'Reviews',
-                content: <Reviews />,
-            },
-        ]
+    [
+        {
+            id: 'product-tab',
+            title: 'All Products',
+            content: <SellerProducts />
+        },
+        {
+            id: 'store-information',
+            title: 'Store Information',
+            content: <SellerInformation seller={seller} />
+        },
+        {
+            id: 'reviews',
+            title: 'Reviews',
+            content: <Reviews />
+        }
+    ];
+
     return (
-        <div className=' py-8'>
-            <Slider rootClassname='mb-[30px]' />
+        <div className='py-8'>
+            <Slider seller={seller} rootClassname='mb-[30px]' />
             <div className='flex items-center justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-[#e6e9ea] shadow-[0px_0px_5px_3px_#d9d9d933]'>
                 <div className='inline-flex items-center gap-[15px] relative flex-[0_0_auto]'>
-                    <img className="relative w-[100px] h-[100px] object-cover" alt="Rectangle" src="https://c.animaapp.com/2pP7niVX/img/rectangle-81@2x.png" />
+                    <img className="relative w-[100px] h-[100px] object-cover" alt="Rectangle" src={seller ? seller.thumbnail : ''} />
                     <div className='inline-flex flex-col h-[100px] items-start justify-between relative flex-[0_0_auto]'>
                         <div className='inline-flex flex-col items-start gap-[6px] relative flex-[0_0_auto]'>
                             <div className="items-center gap-[10px] inline-flex relative flex-[0_0_auto]">
                                 <div className="relative w-fit mt-[-1.00px] font-semibold text-[#1b1b1b] text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
-                                    Zen Market
+                                    {seller ? seller.name : ''}
                                 </div>
                                 <div className="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
                                     <Verify variant='Bold' color='#4E31DB' size={20} />
@@ -117,4 +156,4 @@ const sellerPage = () => {
     )
 }
 
-export default sellerPage
+export default Seller;

package/src/components/SellerInformation/index.js

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

package/src/{modules/seller/components/storeInformation.js → components/SellerInformation/sellerInformation.js}

@@ -1,8 +1,9 @@
 import React from 'react';
-import StoreItem from '@riosst100/pwa-marketplace/src/modules/seller/components/storeItem';
+import SellerLocation from '../SellerLocation';
 import { Location, ShopAdd } from 'iconsax-react';
 
-const storeInformation = () => {
+const SellerInformation = ({ seller }) => {
+    console.log(seller.operating_hours)
     return (
         <>
             <div class="flex flex-col items-start gap-[30px] px-[10px]">
@@ -12,9 +13,10 @@ const storeInformation = () => {
                             <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Description</div>
                             <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
                                 <p class="relative w-[300px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[16px]">
-                                    Zen Market was established in 12003 and has grown over the years to be the largest hobby store.<br />
+                                    {seller ? seller.description : ''}
                                     <br />
-                                    +6556754325
+                                    <br />
+                                    {seller ? seller.contact_number : ''}
                                 </p>
                             </div>
                             <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
@@ -78,40 +80,15 @@ const storeInformation = () => {
                         <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Terms &amp; Condition</div>
                         <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
                             <div class="flex flex-col w-[500px] items-start gap-[2px]">
-                                <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
-                                    <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Delivery is made on the same day the order is received<br /></span>
-                                </p>
-                                <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
-                                    <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"><br /></span>
-                                </p>
-                                <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
-                                    <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Maximum until 5 PM<br /></span>
-                                </p>
-                                <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
-                                    <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"><br /></span>
-                                </p>
-                                <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
-                                    <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Orders received after 17.00 WIB will be delivered the next day<br /></span>
-                                </p>
-                                <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
-                                    <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"></span>
-                                </p>
+                                {seller ? seller.term_and_conditions : ''}
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="w-full flex flex-col items-start gap-[25px]">
-                    <div class="relative w-fit font-semibold  text-[20px] tracking-[0] leading-[normal]">Our Store</div>
-                    <div class="w-full grid grid-cols-3 gap-4">
-                        <StoreItem />
-                        <StoreItem />
-                        <StoreItem />
-                        <StoreItem />
-                    </div>
-                </div>
+                <SellerLocation />
             </div>
         </>
     )
 }
 
-export default storeInformation
+export default SellerInformation;

package/src/components/SellerLocation/index.js

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

package/src/components/SellerLocation/sellerLocation.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import SellerLocationItem from './sellerLocationItem';
+
+const SellerLocation = () => {
+    return (
+        <>
+            <div class="w-full flex flex-col items-start gap-[25px]">
+                <div class="relative w-fit font-semibold  text-[20px] tracking-[0] leading-[normal]">Our Store</div>
+                <div class="w-full grid grid-cols-3 gap-4">
+                    <SellerLocationItem />
+                    <SellerLocationItem />
+                    <SellerLocationItem />
+                    <SellerLocationItem />
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default SellerLocation;

package/src/{modules/seller/components/storeItem/index.js → components/SellerLocation/sellerLocationItem.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Location, Clock } from 'iconsax-react';
 
-const storeItem = () => {
+const SellerLocationItem = () => {
     return (
         <>
             <div class="flex flex-col w-full items-start gap-[15px] p-[20px] relative rounded-[8px] border border-solid border-[#e6e9ea]">
@@ -25,4 +25,4 @@ const storeItem = () => {
     )
 }
 
-export default storeItem
+export default SellerLocationItem;

package/src/components/SellerPage/core.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Content from './sellerPage';
+
+const core = () => {
+    return (
+        <Content />
+    )
+}
+
+export default core;

package/src/components/SellerPage/index.js

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

package/src/components/SellerPage/sellerPage.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Seller from '@riosst100/pwa-marketplace/src/components/Seller/seller';
+
+const SellerPage = () => {
+    return (
+        <Seller />
+    )
+}
+
+export default SellerPage;

package/src/components/SellerProducts/index.js

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

package/src/{modules/seller/components/allProduct.js → components/SellerProducts/sellerProducts.js}

@@ -3,9 +3,9 @@ import ProductItem from '@riosst100/pwa-marketplace/src/components/ProductItem';
 import Filter from '@riosst100/pwa-marketplace/src/components/Filter';
 import Search from '@riosst100/pwa-marketplace/src/components/Search';
 import SortBy from '@riosst100/pwa-marketplace/src/components/SortBy';
-import Pagination from '@riosst100/pwa-marketplace/src/components/Pagination';
+import Pagination from '..//Pagination';
 
-const allProduct = () => {
+const SellerProducts = () => {
     return (
         <>
             <div className='w-full mb-[30px]'>
@@ -43,4 +43,4 @@ const allProduct = () => {
     )
 }
 
-export default allProduct
+export default SellerProducts;

package/src/components/SellerReview/index.js

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

package/src/{modules/seller/components/reviews.js → components/SellerReview/sellerReview.js}

@@ -1,9 +1,9 @@
 import React from 'react';
-import ReviewItem from '@riosst100/pwa-marketplace/src/components/ReviewItem';
-import Pagination from '@riosst100/pwa-marketplace/src/components/Pagination';
+import SellerReviewItem from '../SellerReviewItem';
+import Pagination from '../Pagination';
 import { Star1 } from 'iconsax-react';
 
-const reviews = () => {
+const SellerReview = () => {
     return (
         <>
             <div className='w-full flex items-start gap-[30px] '>
@@ -124,13 +124,13 @@ const reviews = () => {
                 </div>
                 <div className='flex flex-col w-full'>
                     <div className='flex flex-col w-full items-start gap-[20px] relative mb-[30px]'>
-                        <ReviewItem />
-                        <ReviewItem />
-                        <ReviewItem />
-                        <ReviewItem />
-                        <ReviewItem />
-                        <ReviewItem />
-                        <ReviewItem />
+                        <SellerReviewItem />
+                        <SellerReviewItem />
+                        <SellerReviewItem />
+                        <SellerReviewItem />
+                        <SellerReviewItem />
+                        <SellerReviewItem />
+                        <SellerReviewItem />
                     </div>
                     <div className='pagination-container w-full flex justify-center'>
                         <Pagination />
@@ -141,4 +141,4 @@ const reviews = () => {
     )
 }
 
-export default reviews;
+export default SellerReview;

package/src/components/SellerReviewItem/index.js

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

package/src/components/{ReviewItem/index.js → SellerReviewItem/sellerReviewItem.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Star1 } from 'iconsax-react';
 
-const ReviewItem = () => {
+const SellerReviewItem = () => {
     return (
         <>
             <div class="flex flex-col items-start gap-[10px] p-[25px] relative self-stretch w-full flex-[0_0_auto] bg-white rounded-[6px] border border-solid border-[#e6e9ea]">
@@ -58,4 +58,4 @@ const ReviewItem = () => {
     )
 }
 
-export default ReviewItem;
+export default SellerReviewItem;

package/src/components/commons/Slider/index.js

@@ -2,11 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 
 const Slider = (props) => {
-    const { rootClassname = '' } = props
+    const { rootClassname = '', seller } = props
     const rootClass = cx('slider-container', rootClassname)
     return (
         <div className={rootClass}>
-            <img src="https://cdn.animaapp.com/projects/65c70e0e1dd7109c524e43af/releases/65c70e2bc3e635b310da0a17/img/rectangle-87.png" />
+            <img src={seller ? seller.image : ''} />
         </div>
     )
 }

package/src/intercept.js

@@ -91,9 +91,9 @@ module.exports = targets => {
     },
     {
       exact: true,
-      name: "Seller Page",
-      pattern: "/sellerpage",
-      path: require.resolve("./modules/seller/index.js"),
+      name: "SellerPage",
+      pattern: "/seller/:urlKey",
+      path: require.resolve("./components/SellerPage/index.js"),
       authed: false,
     },
   ];

package/src/talons/Seller/seller.gql.js

@@ -0,0 +1,139 @@
+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_SELLER_DETAIL_QUERY = gql`
+    query getSellerDetailForSellerPage($urlKey: String!) {
+        sellerByUrl(seller_url: $urlKey) {
+            seller_id
+            contact_number
+            shop_title
+            company
+            term_and_conditions
+            website_url
+            ship_to
+            ship_to_country
+            operating_hours {
+                day
+                time {
+                    opening_time
+                    closing_time
+                }
+            }
+            description
+            address
+            country
+            image
+            thumbnail
+            city
+            region
+            group
+            group_id
+            url
+            customer_id
+            email
+            name
+            sale
+            commission_id
+            page_layout
+            status
+            position
+            twitter_id
+            facebook_id
+            gplus_id
+            youtube_id
+            vimeo_id
+            instagram_id
+            pinterest_id
+            linkedin_id
+            tw_active
+            fb_active
+            gplus_active
+            vimeo_active
+            instagram_active
+            pinterest_active
+            linkedin_active
+            banner_pic
+            shop_url
+            url_key
+            logo_pic
+            verify_status
+            product_count
+            telephone
+            creation_time
+            update_time
+            country_id
+            total_sold
+            operating_time
+            order_processing_time
+            shipping_partners
+            offers
+            benefits
+            product_shipping_info
+            prepare_time
+            response_ratio
+            response_time
+            store_id
+            seller_rates {
+                total_count
+                page_info {
+                    page_size
+                    current_page
+                }
+                items {
+                    rating_id
+                    seller_id
+                    customer_id
+                    rate1
+                    rate2
+                    rate3
+                    rate4
+                    rate5
+                    rating
+                    email
+                    title
+                    status
+                    detail
+                    nickname
+                    created_at
+                    verified_buyer
+                    is_recommended
+                    is_hidden
+                    answer
+                    admin_note
+                    like_about
+                    not_like_about
+                    guest_email
+                    plus_review
+                    minus_review
+                    report_abuse
+                    country
+                }
+            }
+            products {
+                total_count
+                page_info {
+                    page_size
+                    current_page
+                }
+                items {
+                    id
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getSellerDetailQuery: GET_SELLER_DETAIL_QUERY
+};

package/src/talons/Seller/useSeller.js

@@ -0,0 +1,66 @@
+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 './seller.gql';
+
+export const useSeller = props => {
+    const { mapSeller } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getStoreConfigData, getSellerDetailQuery } = 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 urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+
+    const { error, loading, data } = useQuery(getSellerDetailQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !storeConfigData,
+        variables: {
+            urlKey
+        }
+    });
+
+    const isBackgroundLoading = !!data && loading;
+
+    const seller = useMemo(() => {
+        if (!data) {
+            return null;
+        }
+        
+        const seller = data.sellerByUrl;
+
+        if (!seller) {
+            return null;
+        }
+
+        return mapSeller(seller);
+    }, [data, mapSeller, urlKey]);
+
+    // Update the page indicator if the GraphQL query is in flight.
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
+
+    return {
+        error,
+        loading,
+        seller
+    };
+};

package/src/util/mapSeller.js

@@ -0,0 +1,7 @@
+const mapSeller = seller => {
+    return {
+        ...seller
+    };
+};
+
+export default mapSeller;

package/src/modules/seller/core.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import Content from '@riosst100/pwa-marketplace/src/modules/seller/sellerPage';
-
-const core = () => {
-    return (
-        <Content />
-    )
-}
-
-export default core;

package/src/modules/seller/index.js

@@ -1 +0,0 @@
-export { default } from '@riosst100/pwa-marketplace/src/modules/seller/core';