@riosst100/pwa-marketplace 3.3.1 → 3.3.3

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

@@ -0,0 +1,82 @@
+import React, { useEffect, useMemo } from 'react';
+import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Collapsible';
+
+import useProductFAQ from '@riosst100/pwa-marketplace/src/talons/ProductFAQ/useProductFAQ';
+
+const ProductFAQ = ({ productId }) => {
+	const { loadProductFaqList, productFaqListState } = useProductFAQ();
+
+	useEffect(() => {
+		if (productId) {
+			loadProductFaqList({ productId });
+		}
+	}, [productId, loadProductFaqList]);
+
+	const { data, loading, error } = productFaqListState || {};
+	const items = useMemo(() => {
+		const list = data?.productFaqList || [];
+		// Show only active items if status provided (1 = active)
+		return list.filter(it => it?.status === 1 || it?.status === '1' || it?.status === true || it?.status === 'true' || it?.status === undefined);
+	}, [data]);
+
+	if (loading) {
+		return <div className="p-4 text-sm text-gray-600">Loading FAQs…</div>;
+	}
+
+	if (error) {
+		return (
+			<div className="p-4 text-sm text-red-600">
+				Failed to load FAQs. Please try again.
+			</div>
+		);
+	}
+
+	if (!items.length) {
+		return (
+			<div className="p-4 text-sm text-gray-600">
+				No FAQs available for this product.
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-2">
+			{items.map((faq, idx) => {
+				const headerStyle = {
+					color: faq?.title_color || undefined,
+					background: faq?.title_background || undefined,
+					fontSize: faq?.title_size ? `${faq.title_size}px` : undefined,
+					borderColor: faq?.border_color || undefined,
+					borderWidth: faq?.border_width ? `${faq.border_width}px` : undefined,
+					borderRadius: faq?.border_radius ? `${faq.border_radius}px` : undefined,
+					marginBottom: faq?.margin_bottom ? `${faq.margin_bottom}px` : undefined,
+					marginLeft: faq?.margin_left ? `${faq.margin_left}px` : undefined
+				};
+
+				const bodyStyle = {
+					color: faq?.body_color || undefined,
+					background: faq?.body_background || undefined
+				};
+
+				const title = faq?.title || `Question ${idx + 1}`;
+
+				return (
+					<Collapsible
+						key={`${faq?.question_id || idx}`}
+						title={title}
+						rootClassName="border-b border-gray-100"
+						contentWrapperClassName="!mt-0"
+						titleStyle={headerStyle}
+					>
+						<div style={bodyStyle} className="p-3 text-sm leading-relaxed">
+							{faq?.answer || 'No answer provided.'}
+						</div>
+					</Collapsible>
+				);
+			})}
+		</div>
+	);
+};
+
+export default ProductFAQ;
+

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

@@ -30,6 +30,7 @@ import { Star1, Verify, Sms, Message, Shop, ArrowUp2 } from 'iconsax-react';
 import { Link } from "react-router-dom";
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
 import { GET_PAYMENT_TYPES } from '@riosst100/pwa-marketplace/src/talons/ProductContent/productContent.gql.js';
+import ProductFAQ from './components/productFAQ';
 
 const WishlistButton = React.lazy(() => import('@magento/venia-ui/lib/components/Wishlist/AddToListButton'));
 const Options = React.lazy(() => import('@magento/venia-ui/lib/components/ProductOptions'));
@@ -86,7 +87,7 @@ const ProductDetailsCollapsible = (props) => {
 
 const ProductFullDetail = props => {
     const { product } = props;
-
+    
     const history = useHistory();
 
     const { search } = useLocation();
@@ -118,7 +119,7 @@ const ProductFullDetail = props => {
         errorAddingProductToCart,
         isAddProductLoading,
     } = talonProps;
-
+   
     const [, { addToast }] = useToasts();
     const [{ isSignedIn }] = useUserContext();
 
@@ -348,7 +349,7 @@ const ProductFullDetail = props => {
             pagebuilder: pagebuilder
         };
     }, [productDetailsAttributes, productDetails.sku, formatMessage]);
-
+    
     const shortDescription = productDetails.shortDescription ? (
         <RichText
             rootClassName="px-0"
@@ -409,7 +410,7 @@ const ProductFullDetail = props => {
             }, []),
         [customAttributesDetails.list]
     );
-
+    
     const ProductTNC = () => (
         <div className={cn(contentContainerClass, classes.contentContainerTabOverride)}>
             <p>{customAttributesList.map((data, index) => {
@@ -440,21 +441,7 @@ const ProductFullDetail = props => {
         </div>
     )
 
-    const ProductFAQ = () => (
-        <div className={cn(contentContainerClass, classes.contentContainerTabOverride)}>
-            {customAttributesList.map((data, index) => {
-                if (data.code == "faq") {
-                    return (
-                        <RichText
-                            rootClassName="px-0"
-                            content={data.value}
-                        />
-                    );
-                }
-            })}
-
-        </div>
-    )
+    
 
     
     const getAttributeValue = (customAttributesDetails, key, useSuffix = false) => {
@@ -474,11 +461,13 @@ const ProductFullDetail = props => {
         return attr.entered_attribute_value?.value || "";
     };
 
-    const preOrder = getAttributeValue(productCardDetailsAttributes, "card_pre_orders", true);
-    const preOrderDate = getAttributeValue(productCardDetailsAttributes, "pre_order_date", true);
-    const preOrderDeposite = getAttributeValue(productCardDetailsAttributes, "pre_order_deposit", true);
-    const preOrderNote = getAttributeValue(productCardDetailsAttributes, "pre_order_notes", true);
-    const preOrderPaymentType = getAttributeValue(productCardDetailsAttributes, "pre_order_payment_type", true);
+    // Prefer preorder info from product props; fallback to productDetails if present
+    const preorderData = (product && product.preorder) || (productDetails && productDetails.preorder) || null;
+    const preOrder = preorderData;
+    const preOrderDate = preorderData?.pre_order_date || "";
+    const preOrderDeposite = preorderData?.pre_order_deposit || "";
+    const preOrderNote = preorderData?.pre_order_notes || "";
+    const preOrderPaymentType = preorderData?.pre_order_payment_type || "";
     const releaseDate = getAttributeValue(productCardDetailsAttributes, "release_date", true);
     const setNameValue = getAttributeValue(productCardDetailsAttributes, "card_set", true);
     const cardNameValue = getAttributeValue(productCardDetailsAttributes, "card_name", true);
@@ -509,6 +498,17 @@ const ProductFullDetail = props => {
         preOrderClosingDateObj !== null &&
         new Date().getTime() > preOrderClosingDateObj.getTime();
 
+    // Ensure payment type is only set for preorder products
+    useEffect(() => {
+        if (isPreOrderProduct) {
+            if (preOrderPaymentType) {
+                setSelectedPaymentType(preOrderPaymentType);
+            }
+        } else {
+            setSelectedPaymentType(null);
+        }
+    }, [isPreOrderProduct, preOrderPaymentType]);
+
     const cartCallToActionText =
         isPreOrderClosed
             ? (
@@ -680,7 +680,11 @@ const ProductFullDetail = props => {
         {
             id: 'product-faq',
             title: 'FAQ',
-            content: <ProductFAQ />
+            content: (
+                <div className={cn(contentContainerClass, classes.contentContainerTabOverride)}>
+                    <ProductFAQ productId={product?.id} />
+                </div>
+            )
         },
         {
             id: 'product-reviews',
@@ -740,7 +744,7 @@ const ProductFullDetail = props => {
             };
 
             let preorderPayload;
-            if (selectedPaymentType) {
+            if (isPreOrderProduct && selectedPaymentType) {
                 preorderPayload = {
                     pre_order_payment_type: selectedPaymentType
                 };
@@ -753,9 +757,11 @@ const ProductFullDetail = props => {
             }
 
             const nextValues = {
-                ...formValues,
-                preorder: preorderPayload
+                ...formValues
             };
+            if (preorderPayload) {
+                nextValues.preorder = preorderPayload;
+            }
             await originalHandleAddToCart(nextValues);
         } catch (e) {
             addToast({
@@ -948,17 +954,19 @@ const ProductFullDetail = props => {
                                             />
                                         </Suspense>
                                     </div>
-                                    <PreorderDetail 
-                                        preOrder={preOrder}
-                                        preOrderDate={preOrderDate}
-                                        preOrderDeposite={preOrderDeposite}
-                                        preOrderNote={preOrderNote}
-                                        preOrderPaymentType={preOrderPaymentType}
-                                        releaseDate={releaseDate}    
-                                        className={'preorder_detail-container'}
-                                        paymentTypeOptions={paymentTypeOptions}
-                                        onPaymentTypeChange={setSelectedPaymentType}
-                                    />
+                                    {isPreOrderProduct && (
+                                        <PreorderDetail 
+                                            preOrder={preOrder}
+                                            preOrderDate={preOrderDate}
+                                            preOrderDeposite={preOrderDeposite}
+                                            preOrderNote={preOrderNote}
+                                            preOrderPaymentType={preOrderPaymentType}
+                                            releaseDate={releaseDate}    
+                                            className={'preorder_detail-container'}
+                                            paymentTypeOptions={paymentTypeOptions}
+                                            onPaymentTypeChange={setSelectedPaymentType}
+                                        />
+                                    )}
                                     <div className='product_actions-wrapper'>
                                         {cartActionContent}
                                     </div>

package/src/overwrites/venia-ui/lib/components/SignIn/signIn.js

@@ -27,6 +27,7 @@ const SignIn = props => {
         showCreateAccount,
         showForgotPassword,
         initialValues,
+        setIsLoading,
         showSocialLogin = true,
     } = props;
 
@@ -36,7 +37,8 @@ const SignIn = props => {
         getCartDetailsQuery: GET_CART_DETAILS_QUERY,
         setDefaultUsername,
         showCreateAccount,
-        showForgotPassword
+        showForgotPassword,
+        setIsLoading
     });
 
     const {

package/src/overwrites/venia-ui/lib/components/SignInPage/signInPage.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { shape, string } from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -9,37 +9,43 @@ import SignIn from '@magento/venia-ui/lib/components/SignIn';
 import cn from 'classnames';
 
 import defaultClasses from './signInPage.module.css';
+import LoadingRequest from '@riosst100/pwa-marketplace/src/components/LoadingRequest';
 
 const SignInPage = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const { signInProps } = useSignInPage(props);
     const { formatMessage } = useIntl();
 
+    const [isLoading, setIsLoading] = useState(false);
+
     return (
-        <div className={classes.signInRootContainer}>
-            <div className={cn(classes.root, '!py-[60px]')}>
-                <StoreTitle>
-                    {formatMessage({
-                        id: 'signInPage.title',
-                        defaultMessage: 'Sign In'
-                    })}
-                </StoreTitle>
-                <div className={cn(classes.leftContentContainer, '')}>
-                    <div class="auth-left">
-                        <img src="https://img.freepik.com/premium-vector/sign-concept-illustration_114360-125.jpg" width="50%" />
-                        <p style={{
-                            "fontSize": "20px",
-                            "fontWeight": 500
-                        }}>Sign in to start shopping or sell your collectibles.</p>
+        <>
+            <LoadingRequest isLoading={isLoading} />
+            <div className={classes.signInRootContainer}>
+                <div className={cn(classes.root, '!py-[60px]')}>
+                    <StoreTitle>
+                        {formatMessage({
+                            id: 'signInPage.title',
+                            defaultMessage: 'Sign In'
+                        })}
+                    </StoreTitle>
+                    <div className={cn(classes.leftContentContainer, '')}>
+                        <div class="auth-left">
+                            <img src="https://img.freepik.com/premium-vector/sign-concept-illustration_114360-125.jpg" width="50%" />
+                            <p style={{
+                                "fontSize": "20px",
+                                "fontWeight": 500
+                            }}>Sign in to start shopping or sell your collectibles.</p>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div className={cn(classes.root, '!py-[60px]')}>
-                <div className={cn(classes.contentContainer, 'border border-gray-100 rounded-lg')}>
-                    <SignIn {...signInProps} />
+                <div className={cn(classes.root, '!py-[60px]')}>
+                    <div className={cn(classes.contentContainer, 'border border-gray-100 rounded-lg')}>
+                        <SignIn setIsLoading={setIsLoading} {...signInProps} />
+                    </div>
                 </div>
             </div>
-        </div>
+        </>
     );
 };
 

package/src/overwrites/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js

@@ -1,8 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
 import { BrowserPersistence } from '@magento/peregrine/lib/util';
-import { useCartContext } from '@magento/peregrine/lib/context/cart';
-import { useApolloClient, useQuery } from '@apollo/client';
 
 const storage = new BrowserPersistence();
 
@@ -12,7 +9,6 @@ const storage = new BrowserPersistence();
  * and reloads the page so that they are used in the graphQL headers.
  */
 const StoreCodeRoute = () => {
-    const history = useHistory();
 
     const websiteCodes = [];
     const websiteStores = useMemo(() => ({}), []);
@@ -34,61 +30,32 @@ const StoreCodeRoute = () => {
     // ie `https://example.com/fr/foo/baz.html` => `fr`.
     const { location } = globalThis;
     const match = location && location.pathname.split("/")[1];
+    const defaultWebsiteCode = process.env.WEBSITE_CODE;
     let websiteCodeInUrl = websiteCodes.find((str) => str === match);
 
     // Determine what the current store code is using the configured basename.
-    const currentWebsiteCode = storage && storage.getItem('website_code') || process.env.WEBSITE_CODE;
-
-    
 
     // If we find a store code in the url that is not the current one, update
     // the storage value and refresh so that we start using the new code.
     useEffect(() => {
-        if (!websiteCodeInUrl) {
-            history.replace(location.pathname + location.search)
-        } else if (websiteCodeInUrl && websiteCodeInUrl !== currentWebsiteCode) {
-            const storeCodeInUrl = websiteStores[websiteCodeInUrl];
-
-            // alert(storeCodeInUrl)
-
-            // update store/website saat url berubah, misal /id ke /sg
-
-            // issue store view code gk berubah, klo di graphql aman
-
-            // ini update di graphql dan di cookie, tapi di cookie beda klo ga di hardcode
+        if (websiteCodeInUrl) {
+            let prefix = '';
+            let storeCodeInUrl = websiteStores[websiteCodeInUrl];
 
-            // ini oke, store di graphql dari sini
-            // storeCodeInUrl = 'id_id_store_view';
-            // console.log('storeCodeInUrl',storeCodeInUrl)
-
-            // await apolloClient.clearCacheData(apolloClient, 'cart');
-            // await removeCart();
-            alert('22ok')
-            storage.removeItem('cartId');
-
-            storage.setItem('store_view_code', storeCodeInUrl);
-            storage.setItem('website_code', websiteCodeInUrl);
+            storage.setItem(prefix + 'store_view_code', storeCodeInUrl);
+            storage.setItem(prefix + 'website_code', websiteCodeInUrl);
             storage.setItem(
-                'store_view_currency',
+                prefix + 'store_view_currency',
                 storeCurrencies[storeCodeInUrl]
             );
+
             storage.setItem(
-                'store_view_secure_base_media_url',
+                prefix + 'store_view_secure_base_media_url',
                 storeSecureBaseMediaUrl[storeCodeInUrl]
             );
-
-            // We're required to reload the page as the basename doesn't
-            // change entirely without a full page reload.
-            // history.go(0);
         }
     }, [
-        websiteCodeInUrl,
-        // currentWebsiteCode,
-        history
-        // , apolloClient, removeCart
-        // storeCodeInUrl,
-        // storeCurrencies,
-        // storeSecureBaseMediaUrl
+        websiteCodeInUrl
     ]);
 
     return null;

package/src/talons/ProductFAQ/productFaq.gql.js

@@ -0,0 +1,39 @@
+import { gql } from '@apollo/client';
+
+export const GET_PRODUCT_FAQ_LIST_QUERY = gql`
+	query getProductFaqList($productId: Int!) {
+		productFaqList(product_id: $productId) {
+			question_id
+			seller_id
+			customer_name
+			customer_email
+			category_id
+			store_id
+			title
+			title_size
+			title_color
+			title_background
+			border_width
+			border_color
+			border_radius
+			body_color
+			body_background
+			margin_bottom
+			margin_left
+			icon
+			answer
+			status
+			position
+			creation_time
+			update_time
+			meta_keywords
+			meta_description
+			page_title
+		}
+	}
+`;
+
+export default {
+	getProductFaqListQuery: GET_PRODUCT_FAQ_LIST_QUERY,
+};
+

package/src/talons/ProductFAQ/useProductFAQ.js

@@ -0,0 +1,48 @@
+import { useLazyQuery } from '@apollo/client';
+import { useCallback } from 'react';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './productFaq.gql';
+
+export const useProductFAQ = props => {
+	const operations = mergeOperations(DEFAULT_OPERATIONS, props?.operations);
+	const { getProductFaqListQuery } = operations;
+
+	const [fetchProductFaqList, productFaqListState] = useLazyQuery(
+		getProductFaqListQuery,
+		{
+			fetchPolicy: 'network-only',
+			nextFetchPolicy: 'cache-first',
+			notifyOnNetworkStatusChange: true,
+			errorPolicy: 'all'
+		}
+	);
+
+	const loadProductFaqList = useCallback(
+		variables => {
+			const id = variables && variables.productId;
+			const parsedId = typeof id === 'number' ? id : parseInt(id, 10);
+			if (isNaN(parsedId)) {
+				return Promise.resolve(null);
+			}
+			return fetchProductFaqList({ variables: { productId: parsedId } });
+		},
+		[fetchProductFaqList]
+	);
+
+	return {
+		loadProductFaqList,
+		productFaqListState,
+		startPolling:
+			productFaqListState && productFaqListState.startPolling
+				? productFaqListState.startPolling
+				: undefined,
+		stopPolling:
+			productFaqListState && productFaqListState.stopPolling
+				? productFaqListState.stopPolling
+				: undefined
+	};
+};
+
+export default useProductFAQ;
+

package/src/talons/RFQ/useRFQ.js

@@ -10,8 +10,6 @@ export const useRFQ = props => {
 	const { pathname } = useLocation();
 	const rfqQuoteId = pathname.split('/')[2];
 
-	console.log('rfqQuoteId',rfqQuoteId)
-
 	const operations = mergeOperations(DEFAULT_OPERATIONS, props?.operations);
 
 	const {

package/src/talons/SocialLogin/useSocialLogin.js

@@ -31,6 +31,7 @@ export const useSocialLogin = props => {
 
     const apolloClient = useApolloClient();
     const [isSigningIn, setIsSigningIn] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
 
     const [
         { cartId },
@@ -60,6 +61,7 @@ export const useSocialLogin = props => {
 
     useEffect(async () => {
         if (jwtToken) {
+            setIsLoading(true);
             setIsSigningIn(true);
             try {
                 // Get source cart id (guest cart id).
@@ -124,6 +126,8 @@ export const useSocialLogin = props => {
                     }),
                     timeout: 5000
                 });
+
+                setIsLoading(false);
             } catch (error) {
                 if (process.env.NODE_ENV !== 'production') {
                     console.error(error);
@@ -162,6 +166,7 @@ export const useSocialLogin = props => {
 
     return {
         errors,
+        isLoading,
         // isBusy: isGettingDetails || isSigningIn || recaptchaLoading,
         isBusy: isGettingDetails || isSigningIn,
         setFormApi