// // src/views/components/product/VariationDetails.tsx // import React, { useEffect, useState } from 'react' // import { // Grid, // TextField, // Button, // Typography, // Box, // Paper, // Switch, // FormControlLabel, // Divider, // CircularProgress // } from '@mui/material' // import { Controller, useFieldArray, Control, useWatch } from 'react-hook-form' // import Icon from 'src/@core/components/icon' // import { ProductFormValues, Category, Attribute } from './types' // import { validateUnit, validateAttributeValue, getFullImageUrl } from './hooks' // import toast from 'react-hot-toast' // import axios from 'src/configs/axios' // interface VariationDetailsProps { // control: Control // errors: any // productType: string // trackStock: boolean // categoryAttributes: Attribute[] // selectedCategory: Category | undefined // isSubmitting: boolean // onRecalcVariation: (index: number, mrpValue: string) => void // onImageChange: (index: number, file: File | null) => void // } // const VariationDetails = ({ // setVariationMRP, // control, // errors, // productType, // trackStock, // categoryAttributes, // selectedCategory, // isSubmitting, // onRecalcVariation, // onImageChange // }: VariationDetailsProps) => { // const { fields: variationFields, append: appendVariation, remove: removeVariation } = useFieldArray({ // control, // name: 'variations' // }) // const [viewImageLoading, setViewImageLoading] = useState<{ [key: number]: boolean }>({}) // // Watch variations to get image previews // const variations = useWatch({ // control, // name: 'variations' // }) || [] // useEffect(()=>{ // if (variations) { // setVariationMRP(variations?.[0]?.mrp); // } // },[variations]) // const handleViewImage = async (imagePath: string, index: number) => { // if (!imagePath) { // toast.error('No image to view') // return // } // setViewImageLoading(prev => ({ ...prev, [index]: true })) // try { // let imageUrl = '' // // If it's already a blob URL or data URL, use it directly // if (imagePath.startsWith('blob:') || imagePath.startsWith('data:')) { // imageUrl = imagePath // // Open directly // window.open(imageUrl, '_blank') // setViewImageLoading(prev => ({ ...prev, [index]: false })) // return // } // // Get full URL // const fullUrl = getFullImageUrl(imagePath) // // Fetch the image as blob with authentication // const response = await axios.get(fullUrl, { // responseType: 'blob', // headers: { // 'Accept': 'image/*' // } // }) // // Create blob URL // const blob = response.data // imageUrl = URL.createObjectURL(blob) // // Open the image in a new window/tab // const newWindow = window.open('', '_blank') // if (newWindow) { // newWindow.document.write(` // // // // Product Image // // // // //
//
// Product Image //
// //
Loading image...
//
//
//
🖼️
//
Failed to load image.
//
Please try again or check the image URL.
//
//
//
// // // // `) // newWindow.document.close() // setViewImageLoading(prev => ({ ...prev, [index]: false })) // } else { // // If popup is blocked, open in new tab // window.open(imageUrl, '_blank') // setViewImageLoading(prev => ({ ...prev, [index]: false })) // } // } catch (error) { // console.error('Error viewing image:', error) // toast.error('Failed to load image. Please try again.') // setViewImageLoading(prev => ({ ...prev, [index]: false })) // } // } // return ( // // // // // Add Product Variations // // // {productType !== 'ServiceBased' && ( // // ( // field.onChange(e.target.checked)} // color='primary' // /> // } // label='Track Stock' // /> // )} // /> // // )} // {variationFields.map((field, index) => { // // Get the current variation data from watched values // const currentVariation = variations[index] || {} // const imagePreview = currentVariation.imagePreview || '' // const isLoading = viewImageLoading[index] || false // return ( // // // // Variation {index + 1} // // {index > 0 && ( // // )} // // // // Upload Image // // // { // const file = e.target.files?.[0] || null // onImageChange(index, file) // }} // style={{ display: 'none' }} // id={`image-upload-${index}`} // /> // // // // // // ( // { // const val = e.target.value // field.onChange(val) // onRecalcVariation(index, val) // }} // /> // )} // /> // // {productType !== 'ServiceBased' && trackStock && ( // // ( // // )} // /> // // )} // // ( // // )} // /> // // // validateUnit(value) || 'Unit should only contain alphabetic characters (A-Z, a-z)' // }} // render={({ field }) => ( // // )} // /> // // // ( // // )} // /> // // // ( // // )} // /> // // // {categoryAttributes.length > 0 && ( // // // // {selectedCategory?.name} Variations // // // {categoryAttributes.map((attr, attrIndex) => ( // // { // if (value && !validateAttributeValue(value, attr.isRequired)) { // return 'Value should only contain alphanumeric characters and spaces' // } // return true // } // }} // render={({ field }) => ( // { // field.onChange(e.target.value) // }} // /> // )} // /> // // ))} // // // )} // // ) // })} // // // // ) // } // export default VariationDetails // sagar changes //////////// import React, { useEffect, useState, useMemo } from 'react' import { Grid, TextField, Button, Typography, Box, Paper, Switch, FormControlLabel, Divider, CircularProgress, Dialog, DialogTitle, DialogContent, IconButton } from '@mui/material' import { Controller, useFieldArray, Control, useWatch } from 'react-hook-form' import Icon from 'src/@core/components/icon' import { ProductFormValues, Category, Attribute } from './types' import { validateUnit, validateAttributeValue, getFullImageUrl } from './hooks' import toast from 'react-hot-toast' import axios from 'src/configs/axios' interface VariationDetailsProps { control: Control errors: any productType: string trackStock: boolean categoryAttributes: Attribute[] selectedCategory: Category | undefined isSubmitting: boolean isEditMode: boolean onRecalcVariation: (index: number, mrpValue: string) => void onImageChange: (index: number, file: File | null) => void setVariationMRP?: any } const VariationDetails = ({ setVariationMRP, control, errors, productType, trackStock, categoryAttributes, selectedCategory, isSubmitting, isEditMode, onRecalcVariation, onImageChange }: VariationDetailsProps) => { const { fields, append: appendVariation, remove: removeVariation, replace: replaceVariations } = useFieldArray({ control, name: 'variations' }) const [viewImageLoading, setViewImageLoading] = useState<{ [key: string]: boolean }>({}) const [imageDialogOpen, setImageDialogOpen] = useState(false) const [selectedImage, setSelectedImage] = useState('') const [imageLoadError, setImageLoadError] = useState(false) const [currentViewingIndex, setCurrentViewingIndex] = useState('') // Watch variations to get image previews const watchedVariations = useWatch({ control, name: 'variations' }) || [] // Create a stable mapping of field id to variation data const variationsMap = useMemo(() => { const map = new Map() fields.forEach((field, index) => { map.set(field.id, watchedVariations[index] || {}) }) return map }, [fields, watchedVariations]) // Get variation data by field id const getVariationByFieldId = (fieldId: string) => { return variationsMap.get(fieldId) || {} } // Check if product type is ServiceBased const isServiceBased = productType === 'ServiceBased' // Ensure only one variation for ServiceBased products useEffect(() => { if (isServiceBased && fields.length > 1) { // Keep only the first variation const firstVariation = fields[0] replaceVariations([firstVariation]) toast.error('Only one service entry is allowed for Service-Based products', { style: { zIndex: 999999 } }) } }, [isServiceBased, fields.length, replaceVariations]) useEffect(() => { if (watchedVariations && watchedVariations.length > 0) { setVariationMRP(watchedVariations?.[0]?.mrp) } }, [watchedVariations, setVariationMRP]) const handleViewImage = async (imagePath: string, fieldId: string) => { if (!imagePath) { toast.error('No image to view', { style: { zIndex: 999999 } }) return } setCurrentViewingIndex(fieldId) setImageLoadError(false) setViewImageLoading(prev => ({ ...prev, [fieldId]: true })) try { // If it's already a blob URL or data URL, use it directly if (imagePath.startsWith('blob:') || imagePath.startsWith('data:')) { setSelectedImage(imagePath) setImageDialogOpen(true) setViewImageLoading(prev => ({ ...prev, [fieldId]: false })) return } // Get full URL const fullUrl = getFullImageUrl(imagePath) // Try to fetch the image to check if it's accessible try { const response = await axios.get(fullUrl, { responseType: 'blob', timeout: 10000 }) // Create blob URL from response const blob = response.data const blobUrl = URL.createObjectURL(blob) setSelectedImage(blobUrl) setImageDialogOpen(true) } catch (fetchError) { console.error('Error fetching image:', fetchError) // If fetch fails, try to use the URL directly setSelectedImage(fullUrl) setImageDialogOpen(true) } } catch (error) { console.error('Error viewing image:', error) toast.error('Failed to load image. Please try again.', { style: { zIndex: 999999 } }) } finally { setViewImageLoading(prev => ({ ...prev, [fieldId]: false })) setCurrentViewingIndex('') } } const handleImageUpload = (index: number, file: File | null) => { // Check file size (5MB = 5 * 1024 * 1024 bytes) if (file && file.size > 5 * 1024 * 1024) { toast.error('Image size should be less than 5MB', { style: { zIndex: 999999 } }) return } onImageChange(index, file) } const handleImageError = () => { setImageLoadError(true) toast.error('Failed to load image. The image might be corrupted or inaccessible.', { style: { zIndex: 999999 } }) } const handleCloseDialog = () => { setImageDialogOpen(false) setSelectedImage('') setImageLoadError(false) setCurrentViewingIndex('') } // Get the section title based on product type const getSectionTitle = () => { return isServiceBased ? 'Service Details' : 'Add Product Variations' } // Get the card title based on product type and index const getCardTitle = (index: number) => { if (isServiceBased) { return 'Service Information' } return `Variation ${index + 1}` } // Handle append variation - always add at the end const handleAppendVariation = () => { appendVariation({ size: '', mrp: '', stockQty: 0, noOfItems: '', unit: '', calculatedAmount: 0, finalAmount: 0, image: null, imagePreview: '', attributeValues: categoryAttributes.map(a => ({ attributeName: a.attributeName, value: '' })) }) } // Render service-based or product variation content const renderContent = () => { // For ServiceBased, always show the first variation const fieldsToRender = isServiceBased ? fields.slice(0, 1) : fields return fieldsToRender.map((field, index) => { // Get variation data using the field id const variation = getVariationByFieldId(field.id) const imagePreview = variation.imagePreview || '' const fieldId = field.id const isLoading = viewImageLoading[fieldId] || false return ( {getCardTitle(index)} {/* Only show Remove button for non-ServiceBased products with more than 1 variation */} {!isServiceBased && fields.length > 1 && ( )} Upload Image (Max 5MB) { const file = e.target.files?.[0] || null handleImageUpload(index, file) }} style={{ display: 'none' }} id={`image-upload-${field.id}`} /> ( { const val = e.target.value field.onChange(val) onRecalcVariation(index, val) }} /> )} /> {!isServiceBased && trackStock && ( { if (value && isNaN(Number(value))) { return 'Stock QTY must be a valid number' } if (value && Number(value) < 0) { return 'Stock QTY must be greater than 0' } return true } }} render={({ field }) => ( )} /> )} { if (!value) return isServiceBased ? 'Quantity is required' : 'Number of items is required' if (isNaN(Number(value))) return 'Must be a valid number' if (Number(value) < 1) return 'Must be at least 1' return true } }} render={({ field }) => ( )} /> validateUnit(value) || 'Unit should only contain alphabetic characters (A-Z, a-z)' }} render={({ field }) => ( )} /> ( )} /> ( )} /> {categoryAttributes.length > 0 && ( {selectedCategory?.name} {isServiceBased ? 'Details' : 'Variations'} {categoryAttributes.map((attr, attrIndex) => ( { if (value && !validateAttributeValue(value, attr.isRequired)) { return 'Value should only contain alphanumeric characters and spaces' } return true } }} render={({ field }) => ( { field.onChange(e.target.value) }} /> )} /> ))} )} ) }) } return ( <> {getSectionTitle()} {/* Track Stock - Only for non-ServiceBased products */} {!isServiceBased && ( ( field.onChange(e.target.checked)} color='primary' /> } label='Track Stock' /> )} /> )} {renderContent()} {/* Add Variation Button - Only for non-ServiceBased products */} {!isServiceBased && ( )} {/* Image View Dialog */} Product Image {viewImageLoading[currentViewingIndex] ? ( Loading image... ) : imageLoadError ? ( Failed to load image The image might be corrupted or inaccessible ) : selectedImage ? ( { setImageLoadError(false) setViewImageLoading(prev => ({ ...prev, [currentViewingIndex]: false })) }} /> ) : ( No image to display )} ) } export default VariationDetails