@riosst100/pwa-marketplace 3.0.0 → 3.0.3

package/i18n/en_US.json

@@ -63,7 +63,7 @@
     "checkoutPage.additionalText": "You will also receive an email with the details and we will let you know when your order has shipped.",
     "checkoutPage.billingAddressSame": "Billing address same as shipping address",
     "checkoutPage.checkout": "Checkout",
-    "checkoutPage.couponCode": "Enter Coupon Code",
+    "checkoutPage.couponCode": "Apply Coupon Code",
     "checkoutPage.createAccount": "Create Account",
     "checkoutPage.editPaymentInformation": "Edit Payment Information",
     "checkoutPage.editShippingInfo": "Edit Shipping Information",

package/i18n/id_ID.json

@@ -64,7 +64,7 @@
     "checkoutPage.additionalText": "You will also receive an email with the details and we will let you know when your order has shipped.",
     "checkoutPage.billingAddressSame": "Billing address same as shipping address",
     "checkoutPage.checkout": "Checkout",
-    "checkoutPage.couponCode": "Enter Coupon Code",
+    "checkoutPage.couponCode": "Apply Coupon Code",
     "checkoutPage.createAccount": "Create Account",
     "checkoutPage.editPaymentInformation": "Edit Payment Information",
     "checkoutPage.editShippingInfo": "Edit Shipping Information",

package/package.json

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

package/src/componentOverrideMapping.js

@@ -1,4 +1,6 @@
 module.exports = componentOverrideMapping = {
+    ['@magento/peregrine/lib/talons/Header/useCartTrigger.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Header/useCartTrigger.js',
+    ['@magento/peregrine/lib/talons/CartPage/useCartPage.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CartPage/useCartPage.js',
     [`@magento/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js',
     [`@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js',
     [`@magento/venia-ui/lib/components/Adapter/adapter.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Adapter/adapter.js',

package/src/components/CheckoutHeader/checkoutHeader.js

@@ -0,0 +1,162 @@
+import React, { Fragment, Suspense } from 'react';
+import { shape, string } from 'prop-types';
+import { Link, Route } from 'react-router-dom';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+
+import AccountTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/accountTrigger';
+
+import CartTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/cartTrigger';
+import { Lock } from 'react-feather';
+import WishlistTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/wishlistTrigger';
+import NavTrigger from '@magento/venia-ui/lib/components/Header/navTrigger';
+import SearchTrigger from '@magento/venia-ui/lib/components/Header/searchTrigger';
+import OnlineIndicator from '@magento/venia-ui/lib/components/Header/onlineIndicator';
+import { useHeader } from '@magento/peregrine/lib/talons/Header/useHeader';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './checkoutHeader.module.css';
+import StoreSwitcher from '@magento/venia-ui/lib/components/Header/storeSwitcher';
+import WebsiteSwitcher from '@riosst100/pwa-marketplace/src/components/WebsiteSwitcher/websiteSwitcher';
+// import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
+import CurrencySwitcher from '@riosst100/pwa-marketplace/src/components/CurrencySwitcher';
+import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/BecomeSellerLink/becomeSellerLink';
+import MegaMenu from '@magento/venia-ui/lib/components/MegaMenu';
+import PageLoadingIndicator from '@magento/venia-ui/lib/components/PageLoadingIndicator';
+import { useIntl } from 'react-intl';
+import cn from 'classnames';
+// const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
+const SearchBar = React.lazy(() => import('@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar'));
+import { SearchNormal } from 'iconsax-react';
+
+import { useLogo } from '@riosst100/pwa-marketplace/src/talons/Header/useLogo';
+import Image from '@magento/venia-ui/lib/components/Image';
+
+const CheckoutHeader = props => {
+    const {
+        handleSearchTriggerClick,
+        hasBeenOffline,
+        isOnline,
+        isSearchOpen,
+        searchRef,
+        searchTriggerRef
+    } = useHeader();
+
+    const talonPropsLogo = useLogo();
+    const { data } = talonPropsLogo
+    const baseUrl = data?.storeConfig?.base_media_url;
+    const imageSource = data?.storeConfig?.header_logo_src;
+    const LogoImageSource = `${baseUrl}/logo/${imageSource}`;
+    const IMAGE_HEIGHT = data?.storeConfig?.logo_width || 28;
+    const IMAGE_WIDTH = data?.storeConfig?.logo_height || 190;
+    const IMAGE_ALT = data?.storeConfig?.logo_alt || 'TCG Collective';
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClass = isSearchOpen ? classes.open : classes.closed;
+
+    const searchBarFallback = (
+        <div className={classes.searchFallback} ref={searchRef}>
+            <div className={classes.input}>
+                <div className={classes.loader}>
+                    <div className={classes.loaderBefore} />
+                    <div className={classes.loaderAfter} />
+                </div>
+            </div>
+        </div>
+    );
+    // const searchBar = isSearchOpen ? (
+    //     <Suspense fallback={searchBarFallback}>
+    //         <Route>
+    //             <SearchBar isOpen={true} ref={searchRef} />
+    //         </Route>
+    //     </Suspense>
+    // ) : null;
+
+    const { formatMessage } = useIntl();
+    const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
+
+    return (
+        <Fragment>
+            <PageLoadingIndicator absolute />
+            <header className={cn(rootClass, '!flex flex-col !px-0 border-gray-100 ')} data-cy="Header-root">
+                <div className={cn('middle-header border-b border-gray-100')}>
+                    <div className={cn('w-full max-w-[1000px] px-[0px] py-[15px] mx-[auto] flex justify-between items-center')}>
+                        <div className='flex items-center'>
+                            <NavTrigger />
+
+                            <Link
+                                aria-label={title}
+                                to={resourceUrl('/')}
+                                className={''}
+                                data-cy="Header-logoContainer"
+                            >
+                                {imageSource ? (
+                                    <Image
+                                        alt={IMAGE_ALT}
+                                        height={IMAGE_HEIGHT}
+                                        src={LogoImageSource}
+                                        width={IMAGE_WIDTH}
+                                        classes={{
+                                            container: 'logo-wrapper relative'
+                                        }}
+                                    />
+                                ) : (
+                                    <>
+                                        <div className='text-[14px]'><b>TCG Collective</b></div>
+                                        <small>Bringing Collectors Together</small>
+                                    </>
+                                )}
+
+                            </Link>
+                        </div>
+                        <div className='flex flex-auto max-w-[700px]'>
+                            <div className='flex w-full' style={{
+                                    "alignItems": "center",
+                                    "fontSize": "14px",
+                                    "fontWeight": "500",
+                                    "justifyContent": "center"
+                            }}>
+                                <Icon src={Lock} attrs={{ width: 16 }} /><span style={{
+                                    "paddingLeft": "5px"
+                                }}>Secure Checkout</span>
+                            </div>
+                        </div>
+                        <div className={cn(classes.secondaryActions, 'lg_gap-x-5 pl-5')}>
+                            {/* <SearchTrigger
+                                onClick={handleSearchTriggerClick}
+                                ref={searchTriggerRef}
+                            /> */}
+                            <CartTrigger />
+                        </div>
+                    </div>
+                </div>
+            </header>
+            <OnlineIndicator
+                hasBeenOffline={hasBeenOffline}
+                isOnline={isOnline}
+            />
+            <style jsx="true">
+                {`
+                    .logo-wrapper>img:first-child {
+                        height: ${IMAGE_HEIGHT}px;
+                    }
+                `}
+            </style>
+        </Fragment>
+    );
+};
+
+CheckoutHeader.propTypes = {
+    classes: shape({
+        closed: string,
+        logo: string,
+        open: string,
+        primaryActions: string,
+        secondaryActions: string,
+        toolbar: string,
+        switchers: string,
+        switchersContainer: string
+    })
+};
+
+export default CheckoutHeader;

package/src/components/CheckoutHeader/checkoutHeader.module.css

@@ -0,0 +1,171 @@
+.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 {
+    @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/components/CheckoutHeader/index.js

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

package/src/components/FavoriteSeller/AddToListButton/addToListButton.module.css

@@ -26,7 +26,7 @@
 }
 .root:hover svg {
     stroke: #fff !important;
-    fill: #fff !important;
+    /* fill: #fff !important; */
 }
 .root:hover span {
     color: #fff !important;
@@ -37,7 +37,7 @@
 }
 .root_selected:hover svg {
     stroke: #fff !important;
-    fill: #fff !important;
+    /* fill: #fff !important; */
 }
 .root_selected:hover span {
     color: #fff !important;

package/src/components/FilterTop/FilterBlockList/filterTopItem.module.css

@@ -10,5 +10,7 @@
     composes: text-colorDefault from global;
     composes: bg-white from global;
     composes: border-gray-100 from global;
+    composes: hover_shadow-type-1 from global;
+    composes: cursor-pointer from global;
     border-radius: 5px;
 }

package/src/components/OrderDetail/components/itemsOrdered.js

@@ -11,6 +11,11 @@ const ItemsOrdered = ({ order }) => {
     const tax = order?.total?.total_tax?.value || 0;
     const grandTotal = order?.total?.grand_total?.value || 0;
 
+    const itemLink = useMemo(
+        () => resourceUrl(`/${urlKey}${urlSuffix || ''}`),
+        [urlKey, urlSuffix]
+    );
+
     return (
         <>
             <div className='rounded-md border border-gray-100 pb-4'>
@@ -29,7 +34,7 @@ const ItemsOrdered = ({ order }) => {
                             {items.map((item, idx) => (
                                 <tr key={item.id || idx} className='border-b border-gray-150'>
                                     <td className="col name text-left align-top py-3 px-2.5" data-th="Product Name">
-                                        <strong className="product name product-item-name">{item.product_name}</strong>
+                                        <Link  to={itemLink} className="product name product-item-name">{item.product_name}</Link>
                                         {item.selected_options && item.selected_options.length > 0 && (
                                             <dl className="item-options">
                                                 {item.selected_options.map((opt, i) => (

package/src/components/RMAPage/components/productItem.css

@@ -0,0 +1,15 @@
+.quantityLabel {
+    composes: font-medium from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: pt-xs from global;
+    composes: text-colorDefault from global;
+}
+
+.quantityRoot {
+    composes: root from '@magento/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css';
+    grid-template-columns: auto 4rem auto;
+    composes: justify-start from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+}

package/src/components/RMAPage/components/productItem.js

@@ -4,7 +4,9 @@ import { Link } from 'react-router-dom';
 import Select from '@riosst100/pwa-marketplace/src/components/commons/Select';
 import TextField from '@riosst100/pwa-marketplace/src/components/commons/Textfield';
 import Checkbox from '@riosst100/pwa-marketplace/src/components/commons/Checkbox';
-
+import QuantityStepper from '@magento/venia-ui/lib/components/QuantityStepper';
+import defaultClasses from './productItem.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
 
 const productItem = (props) => {
     const {
@@ -41,6 +43,8 @@ const productItem = (props) => {
     // Input change handler with qty_requested validation
     const handleFieldChange = (field, value) => {
         if (field === 'qty_requested' && item && item.quantity_ordered) {
+            console.log('value',value)
+            console.log('item.quantity_ordered',item.quantity_ordered)
             if (value > item.quantity_ordered) {
                 value = item.quantity_ordered;
             }
@@ -51,6 +55,8 @@ const productItem = (props) => {
         if (onItemChange) onItemChange(field, value);
     };
 
+    const classes = useStyle(defaultClasses, props.classes);
+
     return (
         <>
             <div className='item flex flex-col lg_flex-row justify-between border border-gray-100 rounded-md p-4'>
@@ -102,23 +108,47 @@ const productItem = (props) => {
                                 <p className='mb-1'>
                                     Qty Return
                                 </p>
-                                <TextField
+                                <QuantityStepper
+                                    classes={{
+                                        root: classes.quantityRoot
+                                    }}
+                                    initialValue={item.quantity_ordered}
+                                    // itemId={item.id}
+                                />
+                                {/* <TextField
+                                    type="number"
                                     value={
-                                        itemState.qty_requested > item.quantity_ordered
-                                            ? item.quantity_ordered
-                                            : itemState.qty_requested || ''
+                                        itemState.qty_requested !== undefined
+                                        ? String(itemState.qty_requested)
+                                        : ''
                                     }
-                                    onChange={e => {
-                                        let val = parseFloat(e.target.value);
-                                        if (isNaN(val)) val = '';
+                                    min={1}
+                                    max={item.quantity_ordered}
+                                    onChange={(e) => {
+                                        let val = e.target.value;
+
+                                        // Jika kosong
+                                        if (val === '') {
+                                        handleFieldChange('qty_requested', '');
+                                        return;
+                                        }
+
+                                        val = parseFloat(val);
+
+                                        if (isNaN(val)) {
+                                        handleFieldChange('qty_requested', '');
+                                        return;
+                                        }
+
+                                        // batas maksimum
                                         if (val > item.quantity_ordered) val = item.quantity_ordered;
-                                        if (val < 1 && val !== '') val = 1;
+
+                                        // batas minimum
+                                        if (val < 1) val = 1;
+
                                         handleFieldChange('qty_requested', val);
                                     }}
-                                    type="number"
-                                    min={1}
-                                    max={item.quantity_ordered}
-                                />
+                                    /> */}
                             </div>
                             <div className='flex flex-col mb-2.5'>
                                 <p className='mb-1'>

package/src/components/RMAPage/components/productItem.module.css

@@ -0,0 +1,15 @@
+.quantityLabel {
+    composes: font-medium from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: pt-xs from global;
+    composes: text-colorDefault from global;
+}
+
+.quantityRoot {
+    composes: root from '@magento/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css';
+    grid-template-columns: auto 4rem auto;
+    composes: justify-start from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+}

package/src/components/SellerCoupon/index.js

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

package/src/components/SellerCoupon/sellerCoupon.js

@@ -0,0 +1,84 @@
+import React, { useMemo, useState } from 'react';
+import classes from './sellerCoupon.module.css';
+
+const dayDiff = (toDate) => {
+    if (!toDate) return null;
+    const end = new Date(toDate);
+    if (Number.isNaN(end.getTime())) return null;
+    const now = new Date();
+    const diffMs = end.setHours(23, 59, 59, 999) - now.getTime();
+    const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
+    return diffDays;
+};
+
+const SellerCoupon = ({ couponData, couponError, couponLoading }) => {
+    if (couponLoading) {
+        return <div className={classes.container}><p className={classes.metaText}>Loading coupons...</p></div>;
+    }
+
+    if (couponError) {
+        return <div className={classes.container}><p className={classes.metaText}>Failed to load coupons.</p></div>;
+    }
+
+    const items = couponData?.sellerCoupons?.items || [];
+
+    if (!items.length) {
+        return <div className={classes.container}><p className={classes.metaText}>No coupons available.</p></div>;
+    }
+
+    const [copied, setCopied] = useState(null);
+
+    const handleClaim = async (code) => {
+        try {
+            if (navigator?.clipboard?.writeText) {
+                await navigator.clipboard.writeText(code);
+            }
+        } catch (_) {
+            // ignore clipboard issues
+        }
+        setCopied(code);
+        setTimeout(() => setCopied(null), 2000);
+    };
+
+    return (
+        <section className={classes.container} aria-label="Seller coupons">
+            <div className={classes.scroller}>
+                {items.map(item => {
+                    const key = item.couponcode_id || item.coupon_id || item.code;
+                    const daysLeft = dayDiff(item.to_date);
+                    const expiryLabel = daysLeft === null
+                        ? 'No expiry'
+                        : daysLeft <= 0
+                            ? 'Ends today'
+                            : `Ends in ${daysLeft} day${daysLeft > 1 ? 's' : ''}`;
+
+                    const title = item.description || item.name || `Discount ${item.discount_amount || ''}`;
+
+                    return (
+                        <div className={classes.card} key={key} role="group" aria-label={`Coupon ${item.code}`}>
+                            <div className={classes.perf} aria-hidden="true" />
+                            <div className={classes.content}>
+                                <div className={classes.title}>{title}</div>
+                                <div className={classes.subtext}>Code: <span className={classes.code}>{item.code}</span></div>
+                                <div className={classes.expiry}>{expiryLabel}</div>
+                            </div>
+                            <div className={classes.divider} aria-hidden="true" />
+                            <div className={classes.actions}>
+                                <button
+                                    type="button"
+                                    className={classes.claimBtn}
+                                    onClick={() => handleClaim(item.code)}
+                                    aria-label={`Claim coupon ${item.code}`}
+                                >
+                                    {copied === item.code ? 'Copied' : 'Claim'}
+                                </button>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </section>
+    );
+};
+
+export default SellerCoupon;