fix merge

2 files changed, 51 insertions, 45 deletions

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index cc16fb6d..900225a5 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -38,15 +38,16 @@ type Props = {
 const Information = ({ product }: Props) => {
   const { selectedVariant, setSelectedVariant, setSla, sla } = useProductDetail();
 
-  const [inputValue, setInputValue] = useState<string | null>(
-    selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
-  );
+  const [inputValue, setInputValue] = useState<string>('');
   const [disableFilter, setDisableFilter] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // source of truth
+  // const variantOptions = product.variants;
   const [variantOptions, setVariantOptions] = useState<any[]>(
     product?.variants
   );
+
   const variantId = selectedVariant?.id;
   const { slaVariant, isLoading } = useVariant({ variantId });
 
@@ -83,25 +84,32 @@ const Information = ({ product }: Props) => {
   }, [product]);
 
   useEffect(() => {
-    if (selectedVariant) {
-      setInputValue(
-        selectedVariant?.code +
-          (selectedVariant?.attributes[0]
-            ? ' - ' + selectedVariant?.attributes[0]
-            : '')
-      );
-    }
+    if (!selectedVariant) return;
+
+    setInputValue(
+      selectedVariant.code +
+        (selectedVariant.attributes?.[0]
+          ? ` - ${selectedVariant.attributes[0]}`
+          : '')
+    );
   }, [selectedVariant]);
 
+  /* ======================
+   * Sync SLA
+   * ====================== */
   useEffect(() => {
     if (isLoading) {
       setSla(null);
+      return;
     }
     if (slaVariant) {
       setSla(slaVariant);
     }
   }, [slaVariant, isLoading, setSla]);
 
+  /* ======================
+   * Handlers
+   * ====================== */
   const handleOnChange = (vals: any) => {
     setDisableFilter(true);
     let code = vals.replace(/\s-\s.*$/, '').trim();
@@ -132,30 +140,32 @@ const Information = ({ product }: Props) => {
 
   return (
     <div className={style['wrapper']}>
-      <div className='realtive mb-5'>
+      {/* ===== Variant Selector ===== */}
+      <div className='relative mb-5'>
         <label className='form-label mb-2 text-lg text-red-600'>
           Pilih Variant * :{' '}
           <span className='text-gray_r-9 text-sm'>
-            {product?.variants?.length} Variants
-          </span>{' '}
+            {product.variants.length} Variants
+          </span>
         </label>
+
         <AutoComplete
           disableFilter={disableFilter}
           openOnFocus
           className='form-input'
-          onChange={(vals) => handleOnChange(vals)}
+          onChange={handleOnChange}
         >
           <InputGroup>
             <AutoCompleteInput
               ref={inputRef}
-              value={inputValue as string}
-              onChange={(e) => handleOnKeyUp(e)}
+              value={inputValue}
+              onChange={handleOnKeyUp}
               onFocus={() => setDisableFilter(true)}
             />
             <InputRightElement className='mr-4'>
               <ChevronDownIcon
-                className='h-6 w-6 text-gray-500'
-                onClick={() => inputRef?.current?.focus()}
+                className='h-6 w-6 text-gray-500 cursor-pointer'
+                onClick={() => inputRef.current?.focus()}
               />
             </InputRightElement>
           </InputGroup>
@@ -167,41 +177,32 @@ const Information = ({ product }: Props) => {
               })
               .map((option, cid) => (
               <AutoCompleteItem
-                key={`option-${cid}`}
-                value={
-                  option.code +
-                  (option?.attributes[0] ? ' - ' + option?.attributes[0] : '')
-                }
+                key={option.id}
+                value={String(option.id)}
                 _selected={
                   option.id === selectedVariant?.id
                     ? { bg: 'gray.300' }
                     : undefined
                 }
-                textTransform='capitalize'
               >
-                <div
-                  key={cid}
-                  className='flex gap-x-2 w-full justify-between px-3 items-center p-2'
-                >
+                <div className='flex gap-x-2 w-full justify-between px-3 items-center p-2'>
                   <div className='text-small'>
-                    {option.code +
-                      (option?.attributes[0]
-                        ? ' - ' + option?.attributes[0]
-                        : '')}
+                    {option.code}
+                    {option.attributes?.[0] ? ` - ${option.attributes[0]}` : ''}
                   </div>
                   <div className={option?.price?.discount_percentage ? 'flex gap-x-4 items-center justify-between' : ''}>
                     {option?.price?.discount_percentage > 0 && (
                       <>
                         <div className='badge-solid-red text-xs'>
-                          {Math.floor(option?.price?.discount_percentage)}%
+                          {Math.floor(option.price.discount_percentage)}%
                         </div>
                         <div className='min-w-16 sm:min-w-24 text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
-                          {currencyFormat(option?.price?.price)}
+                          {currencyFormat(option.price.price)}
                         </div>
                       </>
                     )}
                     <div className='min-w-20 sm:min-w-28 text-danger-500 font-semibold'>
-                      {currencyFormat(option?.price?.price_discount)}
+                      {currencyFormat(option.price.price_discount)}
                     </div>
                   </div>
                 </div>
@@ -285,7 +286,7 @@ const Information = ({ product }: Props) => {
       <div className={style['row']} style={rowStyle}>
         <div className={style['label']} style={{ color: '#6b7280' }}>Berat Barang</div>
         <div className={style['value']}>
-          {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'}
+          {selectedVariant?.weight > 0 ? `${selectedVariant.weight} Kg` : '-'}
         </div>
       </div>
 
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 03089afa..b6db3f69 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -156,9 +156,19 @@ const ProductDetail = ({ product }: Props) => {
     setAskAdminUrl(createdAskUrl);
   }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl]);
 
-  // =========================================================================
+  // useEffect(() => {
+  //   if (!product?.variants?.length) return;
+
+  //   setIsApproval(auth?.feature?.soApproval);
+
+  //   setSelectedVariant((prev: any) => {
+  //     if (prev) return prev;
+
+  //     return product.variants[0];
+  //   });
+  // }, [product?.id]);
+
   // 1. LOGIC INISIALISASI VARIANT
-  // =========================================================================
   useEffect(() => {
     if (typeof auth === 'object') {
       setIsApproval(auth?.feature?.soApproval);
@@ -175,9 +185,8 @@ const ProductDetail = ({ product }: Props) => {
     
   }, [product, auth]); 
 
-  // =========================================================================
+
   // 2. LOGIC FETCH DATA
-  // =========================================================================
   useEffect(() => {
     const fetchMagentoData = async () => {
       const allVariantIds = product.variants.map(v => v.id);
@@ -247,9 +256,7 @@ const ProductDetail = ({ product }: Props) => {
 
   }, [product.id]); 
 
-  // =========================================================================
   // HELPER 1: GROUPING DATA BY LABEL
-  // =========================================================================
   const processMatrixData = (rawMatrix: any[]) => {
       const groups: any = {};
       const result: any[] = [];
@@ -283,9 +290,7 @@ const ProductDetail = ({ product }: Props) => {
   };
 
 
-  // =========================================================================
   // HELPER 2: RENDER SPEC VALUE
-  // =========================================================================
   const renderSpecValue = (val: any) => {
     if (!val) return '-';
     const strVal = String(val).trim();