@riosst100/pwa-marketplace 2.8.8 → 2.8.9

package/package.json

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

package/src/components/PaymentMethod/PaypalExpress/paypalExpress.js

@@ -3,7 +3,7 @@ import {mergeClasses} from '@magento/venia-ui/lib/classify';
 import {shape, string, bool, func} from 'prop-types';
 import BillingAddress from '@magento/venia-ui/lib/components/CheckoutPage/BillingAddress';
 
-import {usePaypalExpress} from '../../talons/PaymentMethod/PaypalExpress/usePaypalExpress';
+import {usePaypalExpress} from '@riosst100/pwa-marketplace/src/talons/PaymentMethod/PaypalExpress/usePaypalExpress';
 import defaultClasses from './paypalExpress.css';
 import {FormattedMessage} from 'react-intl';
 
@@ -56,7 +56,8 @@ PaypalExpress.propTypes = {
     shouldSubmit: bool.isRequired,
     onPaymentSuccess: func,
     onPaymentError: func,
-    resetShouldSubmit: func.isRequired
+    resetShouldSubmit: func.isRequired,
+    currentSelectedPaymentMethod: string
 };
 
 export default PaypalExpress;

package/src/components/PaymentMethod/Xendit/xendit.js

@@ -0,0 +1,53 @@
+import React, { useEffect, useCallback } from 'react';
+import { shape, string, bool, func } from 'prop-types';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
+import BillingAddress from '@magento/venia-ui/lib/components/CheckoutPage/BillingAddress';
+
+// Keep styles minimal; reuse global utilities if needed
+const defaultClasses = {};
+
+/**
+ * Xendit payment component (minimal flow)
+ * - Assumes method is set via Radio change.
+ * - Syncs billing address and advances on submit.
+ * - Extend to add Xendit tokenization/redirect before calling onPaymentSuccess.
+ */
+const Xendit = props => {
+    const classes = mergeClasses(defaultClasses, props.classes);
+    const { shouldSubmit, onPaymentSuccess, resetShouldSubmit } = props;
+
+    useEffect(() => {
+        if (shouldSubmit) {
+            onPaymentSuccess && onPaymentSuccess();
+        }
+    }, [shouldSubmit, onPaymentSuccess]);
+
+    const onBillingAddressChangedError = useCallback(() => {
+        resetShouldSubmit && resetShouldSubmit();
+    }, [resetShouldSubmit]);
+
+    const onBillingAddressChangedSuccess = useCallback(() => {
+        /* Hook: start Xendit tokenization here if required by your backend */
+    }, []);
+
+    return (
+        <div className={classes.root}>
+            <BillingAddress
+                shouldSubmit={shouldSubmit}
+                resetShouldSubmit={resetShouldSubmit}
+                onBillingAddressChangedError={onBillingAddressChangedError}
+                onBillingAddressChangedSuccess={onBillingAddressChangedSuccess}
+            />
+        </div>
+    );
+};
+
+Xendit.propTypes = {
+    classes: shape({ root: string }),
+    shouldSubmit: bool.isRequired,
+    onPaymentSuccess: func,
+    onPaymentError: func,
+    resetShouldSubmit: func.isRequired
+};
+
+export default Xendit;

package/src/components/ProductReviewItem/index.js

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

package/src/components/ProductReviewItem/productReviewItem.js

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import Pagination from '../Pagination';
+import { Star1 } from 'iconsax-react';
+
+const ProductReviewItem = ({ reviews }) => {
+
+    // count stars
+    const getStarCounts = () => {
+        const counts = { 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 };
+        if (reviews && reviews.items) {
+            reviews.items.forEach(item => {
+                if (counts[item.rating] !== undefined) {
+                    counts[item.rating]++;
+                }
+            });
+        }
+        return counts;
+    };
+    const starCounts = getStarCounts();
+
+    const displayedReviews = reviews && reviews.items ? reviews.items : [];
+
+    return (
+        <>
+            <div className="flex-1">
+                <div className="space-y-4 mb-6">
+                    {displayedReviews.map((review, index) => (
+                        <div key={index} className="border border-[#E6E9EA] rounded-md p-4">
+                            <div className="flex items-center mb-2">
+                                <div className="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold mr-3">
+                                    Pict
+                                </div>
+                                <div>
+                                    <div className="font-medium">{review.name}</div>
+                                    <div className="text-gray-500 text-sm">{review.date}</div>
+                                </div>
+                            </div>
+
+                            <div className="flex mb-3">
+                                {[...Array(5)].map((_, i) => (
+                                    <Star1 
+                                        key={i}
+                                        color={i < review.rating ? '#F7C317' : '#D9D9D9'} 
+                                        size={16} 
+                                        className={i < review.rating ? 'fill-[#F7C317]' : ''}
+                                    />
+                                ))}
+                            </div>
+                            <p className="text-gray-700">{review.comment}</p>
+                        </div>
+                    ))}
+                </div>
+                <div className="flex justify-center">
+                    {reviews && reviews.page_info && reviews.page_info.total_pages > 0 && (
+                        <Pagination
+                            currentPage={reviews.page_info.current_page}
+                            totalPages={reviews.page_info.total_pages}
+                            pageSize={reviews.page_info.page_size}
+                        />
+                    )}
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default ProductReviewItem;

package/src/components/SellerReview/sellerReview.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import SellerReviewItem from '../SellerReviewItem';
 import Pagination from '../Pagination';
 import { Star1 } from 'iconsax-react';
@@ -41,6 +41,7 @@ const SellerReview = ({ seller }) => {
     // });
     // const { reviews, loading } = talonProps;
     
+    const [filter, setFilter] = useState('All');
     const reviews = dummyReviews;
 
     // count stars
@@ -55,9 +56,13 @@ const SellerReview = ({ seller }) => {
         }
         return counts;
     };
-
     const starCounts = getStarCounts();
 
+    // Filter reviews sesuai rating
+    const filteredReviews = filter === 'All'
+        ? reviews.items
+        : reviews.items.filter(item => item.rating === parseInt(filter));
+
     return (
         <>
             <div className='w-full'>
@@ -68,7 +73,6 @@ const SellerReview = ({ seller }) => {
                 <div className='w-full flex items-start xs_flex-col lg_flex-row gap-[30px]'>
                     <div className="w-full xs_max-w-full lg_max-w-[365px] border border-[#E6E9EA] rounded-md p-6">
                         <div className="flex justify-between items-start mb-1">
-                            {/* Left - Star rating */}
                             <div className="flex flex-col">
                                 <div className="flex items-center gap-1 mb-1">
                                     {[...Array(5)].map((_, i) => (
@@ -93,7 +97,6 @@ const SellerReview = ({ seller }) => {
                             </div>
                         </div>
                         
-                        {/* Rating Bars */}
                         <div className="mt-4">
                             {[5, 4, 3, 2, 1].map(star => {
                                 const count = starCounts[star] || 0;
@@ -101,21 +104,17 @@ const SellerReview = ({ seller }) => {
                                 
                                 return (
                                     <div key={star} className="flex items-center mb-2">
-                                        {/* Star number */}
                                         <div className="flex items-center mr-2">
                                             <Star1 color="#F7C317" size={14} className="fill-[#F7C317]" />
                                             <span className="text-sm ml-1">{star}</span>
                                         </div>
                                         
-                                        {/* Progress bar */}
                                         <div className="relative h-[8px] flex-1 bg-[#E4EBF5] rounded-sm mr-2">
                                             <div 
                                                 className="absolute h-[8px] bg-[#FF7A00] rounded-sm" 
                                                 style={{width: `${percentage}%`}}
                                             />
                                         </div>
-                                        
-                                        {/* Percentage */}
                                         <span className="text-sm text-right">{percentage}%</span>
                                     </div>
                                 );
@@ -123,24 +122,25 @@ const SellerReview = ({ seller }) => {
                         </div>
                     </div>
                     
-                    {/* Right Column - Reviews */}
                     <div className="flex-1">
-                        {/* Filter */}
                         <div className="flex items-center mb-6">
                             <span className="font-medium mr-3">Filter By</span>
-                            <select className="border border-[#E6E9EA] rounded px-3 py-2 text-sm">
-                                <option>All Stars</option>
-                                <option>5 Stars</option>
-                                <option>4 Stars</option>
-                                <option>3 Stars</option>
-                                <option>2 Stars</option>
-                                <option>1 Stars</option>
+                            <select
+                                className="border border-[#E6E9EA] rounded px-3 py-2 text-sm"
+                                value={filter}
+                                onChange={e => setFilter(e.target.value)}
+                            >
+                                <option value="All">All Stars</option>
+                                <option value="5">5 Stars</option>
+                                <option value="4">4 Stars</option>
+                                <option value="3">3 Stars</option>
+                                <option value="2">2 Stars</option>
+                                <option value="1">1 Stars</option>
                             </select>
                         </div>
-                        
-                        {/* Reviews List */}
+
                         <div className="space-y-4 mb-6">
-                            {reviews && reviews.items && reviews.items.map((review, index) => (
+                            {filteredReviews.map((review, index) => (
                                 <div key={index} className="border border-[#E6E9EA] rounded-md p-4">
                                     <div className="flex items-center mb-2">
                                         <div className="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold mr-3">
@@ -151,8 +151,7 @@ const SellerReview = ({ seller }) => {
                                             <div className="text-gray-500 text-sm">{review.date}</div>
                                         </div>
                                     </div>
-                                    
-                                    {/* Star Rating */}
+
                                     <div className="flex mb-3">
                                         {[...Array(5)].map((_, i) => (
                                             <Star1 
@@ -163,14 +162,11 @@ const SellerReview = ({ seller }) => {
                                             />
                                         ))}
                                     </div>
-                                    
-                                    {/* Review Text */}
                                     <p className="text-gray-700">{review.comment}</p>
                                 </div>
                             ))}
                         </div>
                         
-                        {/* Pagination */}
                         <div className="flex justify-center">
                             {reviews && reviews.page_info && reviews.page_info.total_pages > 0 && (
                                 <Pagination

package/src/components/VerifyEmailPage/index.js

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

package/src/components/VerifyEmailPage/verifyEmail.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import { FormattedMessage } from 'react-intl';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './verifyEmail.module.css';
+import { GET_CUSTOMER_INFORMATION } from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/AccountInformationPage/accountInformationPage.gql';
+
+
+const VerifyEmailPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { data, loading } = useQuery(GET_CUSTOMER_INFORMATION);
+    const email = data?.customer?.email || '';
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.card}>
+                <h2 className={classes.title}>
+                    <FormattedMessage
+                        id={'verifyEmail.title'}
+                        defaultMessage={'Please verify your email'}
+                    />
+                </h2>
+                <p className={classes.subtitle}>
+                    <FormattedMessage
+                        id={'verifyEmail.sentTo'}
+                        defaultMessage={'You\'re almost there! We sent an email to'}
+                    />
+                    <br />
+                    <span className={classes.email}>{loading ? '.......' : email}</span>
+                </p>
+                <p className={classes.instructions}>
+                    <FormattedMessage
+                        id={'verifyEmail.instructions'}
+                        defaultMessage={'Just click on the link in that email to complete your signup. If you don\'t see it, you may need to check your spam folder.'}
+                    />
+                </p>
+                <button
+                    className={classes.resendButton}
+                    type="button"
+                    onClick={() => alert('Resend email logic goes here')}
+                >
+                    <FormattedMessage
+                        id={'verifyEmail.resend'}
+                        defaultMessage={'Resend Email'}
+                    />
+                </button>
+                <div className={classes.contactHelp}>
+                    <FormattedMessage
+                        id={'verifyEmail.needHelp'}
+                        defaultMessage={'Need help?'}
+                    />{' '}
+                    <a href="/contact" className={classes.contactLink}>
+                        <FormattedMessage
+                            id={'verifyEmail.contactUs'}
+                            defaultMessage={'Contact Us'}
+                        />
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+VerifyEmailPage.propTypes = {
+    classes: shape({
+        root: string,
+        card: string,
+        title: string,
+        subtitle: string,
+        email: string,
+        instructions: string,
+        resendButton: string,
+        contactHelp: string,
+        contactLink: string
+    })
+};
+
+export default VerifyEmailPage;

package/src/components/VerifyEmailPage/verifyEmail.module.css

@@ -0,0 +1,71 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 80vh;
+    background: #f8f9fa;
+    font-family: inherit;
+}
+
+.card {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    padding: 32px 40px;
+    max-width: 700px;
+    width: 100%;
+    text-align: center;
+}
+
+.title {
+    margin-bottom: 16px;
+    color: #222;
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.subtitle {
+    margin-bottom: 8px;
+    color: #555;
+    font-size: 1rem;
+}
+
+.email {
+    font-weight: bold;
+    color: #eb5202;
+}
+
+.instructions {
+    margin-bottom: 16px;
+    color: #555;
+    font-size: 1rem;
+}
+
+.resendButton {
+    background: #eb5202;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 24px;
+    font-size: 16px;
+    cursor: pointer;
+    margin-bottom: 12px;
+}
+.resendButton:hover {
+    background: #ba4000;
+    border-color: #b84002;
+    box-shadow: 0 0 0 1px #b84002;
+    color: #fff;
+    text-decoration: none;
+
+}
+.contactHelp {
+    margin-top: 8px;
+    font-size: 14px;
+}
+
+.contactLink {
+    color: #eb5202;
+    text-decoration: underline;
+}

package/src/intercept.js

@@ -34,6 +34,7 @@ module.exports = targets => {
         plugin => plugin instanceof LocalizationPlugin
       );
 
+    // ...existing code...
       // Check if LocalizationPlugin is found
       if (localizationPlugin) {
         // Store the original mergeLocales function
@@ -86,6 +87,13 @@ module.exports = targets => {
       authed: true,
       redirectTo: "/sign-in"
     },
+    {
+      exact: true,
+      name: "VerifyEmailPage",
+      pattern: "/verify-email",
+      path: require.resolve("./components/VerifyEmailPage/index.js"),
+      authed: true,
+    },
     {
       exact: true,
       name: "SellerAccountRoute",

package/src/overwrites/peregrine/lib/talons/CheckoutPage/checkoutPage.extended.gql.js

@@ -0,0 +1,88 @@
+import { gql } from '@apollo/client';
+import { CheckoutPageFragment } from '@magento/peregrine/lib/talons/CheckoutPage/checkoutPageFragments.gql';
+import { ItemsReviewFragment } from '@magento/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReviewFragments.gql';
+
+export const CREATE_CART = gql`
+    mutation createCart {
+        cartId: createEmptyCart
+    }
+`;
+
+export const PLACE_ORDER = gql`
+    mutation placeOrder($cartId: String!) {
+        placeOrder(input: { cart_id: $cartId }) {
+            order {
+                order_number
+            }
+        }
+    }
+`;
+
+// Extended to include selected_payment_method.code
+export const GET_ORDER_DETAILS = gql`
+    query getOrderDetails($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            email
+            total_quantity
+            shipping_addresses {
+                firstname
+                lastname
+                street
+                city
+                region { label }
+                postcode
+                country { label }
+                selected_shipping_method {
+                    amount { value currency }
+                    carrier_title
+                    method_title
+                }
+            }
+            selected_payment_method {
+                code
+                purchase_order_number
+                title
+            }
+            prices {
+                grand_total { value currency }
+                discounts {
+                    amount { currency value }
+                    label
+                }
+            }
+            ...ItemsReviewFragment
+        }
+    }
+    ${ItemsReviewFragment}
+`;
+
+export const GET_CHECKOUT_DETAILS = gql`
+    query getCheckoutDetails($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...CheckoutPageFragment
+            ...ItemsReviewFragment
+        }
+    }
+    ${CheckoutPageFragment}
+    ${ItemsReviewFragment}
+`;
+
+export const GET_CUSTOMER = gql`
+    query GetCustomerForCheckout {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        customer {
+            default_shipping
+            firstname
+        }
+    }
+`;
+
+export default {
+    createCartMutation: CREATE_CART,
+    getCheckoutDetailsQuery: GET_CHECKOUT_DETAILS,
+    getCustomerQuery: GET_CUSTOMER,
+    getOrderDetailsQuery: GET_ORDER_DETAILS,
+    placeOrderMutation: PLACE_ORDER
+};