@dashadmin/dash-admin 1.3.25 → 1.3.26

package/src/components/selects/RASearchableSelectChips.tsx

@@ -0,0 +1,304 @@
+/**
+ * ISearchableSelect for AutoAdmin for ReactAdmin
+ * @author  Franisco Aranda <francisco.aranda@dash.cl> <faranda@gmail.com>
+ * @author  Omar Muñoz <omar.munoz@dash.cl>
+ */
+
+import {
+	Autocomplete,
+	Box,
+	Chip,
+	CircularProgress,
+	InputLabel,
+	TextField,
+} from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { useController } from 'react-hook-form';
+import { useGetList } from 'react-admin';
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+import { useRecordContext } from 'react-admin';
+import { Loading } from 'react-admin';
+import { isArray } from 'lodash';
+import { LoadingIndicator } from 'react-admin';
+
+interface ISearchableSelectChipsControl {
+	name?: string;
+	resource?: string;
+	selectLabel?: string;
+	title?: string;
+	renderText: (option: any, caller: string) => any;
+	transformData?: (val: any) => any; // onChange transformData from the search result item object to the field value (it usually needs to store the id)
+	defaultValues?: any;
+	isMultiple?: boolean;
+	//pagination?: boolean,
+	minSearch?: number;
+	searchResults?: number;
+	timerSearch?: number;
+	isEmpty?: boolean;
+	filter?: { [x: string]: any };
+	queryFilter?: string;
+	isOptionEqualToValue: (option: any, value: any) => boolean;
+	//_transformOptionEqualToValue?:  (option: any, value: any) => boolean
+	viewAttribute: string;
+	valueKeyId?: string;
+	useBaseAttributeName?: boolean;
+	useListAttributeForController?: boolean;
+	transformOption?: (
+		option: any,
+		parsedOptions: any[],
+		caller?: string,
+	) => boolean;
+}
+
+const getDescendantProp = (obj, desc) => {
+	var arr = desc.split('.');
+	while (arr.length && (obj = obj[arr.shift()]));
+	return obj;
+};
+
+export const SearchableSelectChipsControl: React.FC<
+	ISearchableSelectChipsControl & IDashAutoAdminCustomFieldComponent
+> = ({
+	method,
+	attribute,
+	isMultiple = false,
+	//pagination = true,
+	searchResults = 50,
+	minSearch = 3,
+	timerSearch = 500,
+	resource,
+	selectLabel,
+	renderText,
+	transformData = (val: any) => val,
+	queryFilter = 'q',
+	defaultValues = undefined,
+	isEmpty = false,
+	filter,
+	isOptionEqualToValue = undefined,
+	viewAttribute = null,
+	valueKeyId = 'id',
+	useBaseAttributeName = false,
+	useListAttributeForController = false,
+	transformOption,
+}) => {
+	// React Admin record
+	//console.log("useListAttributeForController", useListAttributeForController);
+	let attributeName = useListAttributeForController
+		? attribute.listAttribute
+		: attribute.attribute;
+	attributeName = useBaseAttributeName
+		? attributeName.split('.')[0]
+		: attributeName;
+	//console.log("attributeName", attributeName);
+	const record = useRecordContext();
+	const recordAttributeValue = useBaseAttributeName
+		? attributeName.split('.')[0]
+		: attributeName;
+	//console.log("RECORD VALUE", recordAttributeValue, record[recordAttributeValue]);
+	// sets the initial state of the select dropdown
+	const [open, setOpen] = useState(false);
+	// parsedOptions: stores the postprocessed list of elements returned from the search query
+	const [parsedOptions, setParsedOptions] = useState(null);
+	// q; the search query
+	const [q, setQ] = useState('');
+	// field, checks if the current record contains associated values to the attribute in which this control is associated
+	//console.log("USE CONTROLLER name", attributeName, attribute.attribute, record[recordAttributeValue]);
+	const _transformOption = (option: any, caller: string) => {
+		return typeof transformOption === 'function'
+			? transformOption(option, parsedOptions, caller)
+			: option;
+	};
+
+	const _processFieldValue = (value: any) => {
+		return value
+			? isMultiple && Array.isArray(value)
+				? value.map((valItem) =>
+						_transformOption(valItem, '_processFieldValue'),
+				  )
+				: _transformOption(value, '_processFieldValue')
+			: isMultiple
+			? []
+			: null;
+	};
+
+	const _defaultValues = defaultValues
+		? _processFieldValue(defaultValues)
+		: record && getDescendantProp(record, recordAttributeValue)
+		? _processFieldValue(getDescendantProp(record, recordAttributeValue))
+		: isMultiple
+		? []
+		: null;
+
+	const field = useController({ name: attributeName /*, defaultValue*/ });
+	// Includes, sends an array of the current selected items of the select, the backend sends those items in the first position of the list.
+	let _inc =
+		record && getDescendantProp(record, recordAttributeValue)
+			? getDescendantProp(record, recordAttributeValue)
+			: [];
+	_inc = isArray(_inc) ? _inc : [_inc[valueKeyId]];
+
+	const includes = _inc
+		.filter((element) => element)
+		.map((element) =>
+			element.hasOwnProperty(valueKeyId) ? element[valueKeyId] : element,
+		);
+
+	// React Admin useGetList, to perform the search
+
+	const {
+		data: resourceSearchResults,
+		total: totalSearchResults,
+		isLoading: isResourceSearchLoading,
+		error: isResourceSearchErrored,
+	} = useGetList(resource, {
+		meta: { removeSortFilters: true },
+		filter: { [queryFilter]: q, ...filter, includes: includes },
+	});
+
+	useEffect(() => {
+		if (resourceSearchResults /*&& !isResourceSearchLoading*/) {
+            const resultsArray = Array.isArray(resourceSearchResults) 
+      ? resourceSearchResults 
+      : Object.values(resourceSearchResults);
+    
+    const _parsedOptions = resultsArray.map((ele) => {
+      return { ...ele, key: "option" + ele.id };
+    });
+			setParsedOptions(_parsedOptions);
+			//updateFieldValue(_parsedOptions);
+		}
+		// on component unload, set parsedOptions to []
+	}, [resourceSearchResults /*, isResourceSearchLoading*/]);
+
+	// search timeout
+	const [timeOutSearch, setTimeOutSearch] = useState(undefined);
+	// search debounde
+	const debounce = (fn: Function, delay = 500) => {
+		clearTimeout(timeOutSearch);
+		setTimeOutSearch(
+			setTimeout(() => {
+				fn();
+			}, delay),
+		);
+	};
+
+	const updateFieldValue = (value) => {
+		const val = _processFieldValue(value);
+		//console.log("UPDATE FIELD VALUES", val)
+		field.field.onChange(val);
+	};
+
+	/* useEffect(() => {
+          if (field && field.field && parsedOptions) { 
+              updateFieldValue(record[recordAttributeValue]); 
+          }
+      }, [parsedOptions])*/
+
+	return (
+		<>
+			{parsedOptions ? (
+				<Autocomplete
+					key={'autocomplete-' + attribute.attribute}
+					multiple={isMultiple}
+					loading={isResourceSearchLoading /*&& open*/}
+					fullWidth
+					freeSolo={true}
+					options={parsedOptions}
+					open={open}
+					onOpen={() => setOpen(true)}
+					onClose={() => setOpen(false)}
+					defaultValue={_defaultValues}
+					isOptionEqualToValue={isOptionEqualToValue}
+					autoHighlight
+					getOptionLabel={(option: any) =>
+						renderText(_transformOption(option, 'optionlabel'), 'optionlabel')
+					}
+					renderOption={(props, option: any) => {
+						const { key, ...newProps } = props as any;
+						return (
+							<Box
+								key={option.key}
+								component='li'
+								sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+								{...newProps}
+							>
+								{renderText(_transformOption(option, 'option'), 'option')}
+							</Box>
+						);
+					}}
+					onChange={(event: any, rawValue) => {
+						setOpen(false);
+						updateFieldValue(rawValue);
+					}}
+					renderInput={(params) => {
+						return (
+							<TextField
+								key={params.id}
+								{...params}
+								label={selectLabel}
+								variant='outlined'
+								onChange={(ev) => {
+									let searchValue = ev.target.value;
+									if (
+										searchValue &&
+										searchValue !== '' &&
+										searchValue.length >= minSearch
+									)
+										debounce(() => setQ(searchValue), timerSearch);
+								}}
+								InputProps={{
+									...params.InputProps,
+									autoComplete: 'new-password',
+									endAdornment: (
+										<>
+											{isResourceSearchLoading ? (
+												<CircularProgress color='inherit' size={20} />
+											) : null}
+											{params.InputProps.endAdornment}
+										</>
+									),
+								}}
+							/>
+						);
+					}}
+				/>
+			) : (
+				<LoadingIndicator />
+			)}
+
+			{!isMultiple && parsedOptions && _defaultValues && (
+				<>
+					<Chip
+						label={renderText(_transformOption(_defaultValues, 'chip'), 'chip')}
+					/>
+				</>
+			)}
+		</>
+	);
+};
+
+const RASearchableSelectChips: React.FC<
+	IDashAutoAdminCustomFieldComponent & ISearchableSelectChipsControl
+> = ({ method, attribute, ...props }) => {
+	switch (method) {
+		case 'edit':
+		case 'create':
+			return (
+				<SearchableSelectChipsControl
+					attribute={attribute}
+					method={method}
+					{...props}
+				/>
+			);
+		case 'view':
+			return (
+				<SearchableSelectChipsControl
+					attribute={attribute}
+					method={method}
+					{...props}
+				/>
+			);
+	}
+};
+
+export default RASearchableSelectChips;

package/src/components/selects/SearchableSelect.tsx

@@ -0,0 +1,135 @@
+import {
+	Autocomplete,
+	Box,
+	CircularProgress,
+	InputLabel,
+	TextField,
+} from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { useController, useWatch } from 'react-hook-form';
+import { useGetList } from 'react-admin';
+import TrendingUpRounded from '@mui/icons-material/TrendingUpRounded';
+
+const SearchableSelect: React.FC<any> = ({
+	name,
+	isMultiple = false,
+	resource,
+	selectLabel,
+	title,
+	renderText,
+	transformData,
+	defaultValues = undefined,
+	isEmpty = false,
+	filter = {},
+}) => {
+	const [open, setOpen] = useState(false);
+	const [settedInitialValues, setSettedInitialValues] = useState(false);
+	const [q, setQ] = useState('');
+	const field = useController({ name });
+
+	const {
+		data: resourceData,
+		total,
+		isLoading,
+		error,
+	} = useGetList(resource, {
+		pagination: { page: 1, perPage: 100 },
+		filter: { q, ...filter },
+	});
+
+	useEffect(() => {
+		if (resourceData && !settedInitialValues) {
+			if (defaultValues) {
+				field.field.onChange(defaultValues);
+			}
+			setSettedInitialValues(true);
+		}
+		return () => {
+			setSettedInitialValues(false);
+		};
+	}, [resourceData]);
+
+	//const productIds = useWatch({ name: 'product_ids' });
+
+	// const selectLabel = "Seleccionar Plantilla";
+
+	// if(resourceData && selectedDefault?.length > 0)
+	//     setSelectedDefault(defaultValues?.map(item => resourceData.find(template => template.id === item)));
+
+	// console.log(field.field.value);
+
+	return (
+		<>
+			<InputLabel>{title}</InputLabel>
+			{/*<SearchBar />*/}
+			{TrendingUpRounded && (
+				<Autocomplete
+					multiple={isMultiple}
+					loading={isLoading && open}
+					sx={{ width: 373 }}
+					options={
+						!resourceData ? [] : !defaultValues ? resourceData : resourceData
+					}
+					open={open}
+					onOpen={() => setOpen(true)}
+					onClose={() => setOpen(false)}
+					// defaultValue={field.field.value.map(item => resourceData.find(template => template.id === item))}
+
+					autoHighlight
+					{...(!isEmpty && { value: field.field.value })}
+					{...(isEmpty && { renderTags: (value, getTagProps) => <></> })}
+					getOptionLabel={(option: any) =>
+						renderText ? renderText(option) : option.name
+					}
+					renderOption={(props, option: any) => (
+						<Box
+							component='li'
+							sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+							{...props}
+						>
+							{renderText ? renderText(option) : option.name}
+						</Box>
+					)}
+					onChange={(event: any, rawValue) => {
+						let newValue = rawValue;
+						if (Array.isArray(rawValue)) {
+							if (isEmpty) newValue = [...rawValue, ...field.field.value];
+							newValue = [...new Map((newValue as any[]).map((v) => [v.id, v])).values()];
+						}
+
+						if (transformData) field.field.onChange(transformData(newValue));
+						else field.field.onChange(newValue);
+					}}
+					renderInput={(params) => (
+						<TextField
+							{...params}
+							label={selectLabel}
+							variant='outlined'
+							onChange={(ev) => {
+								// dont fire API if the user delete or not entered anything
+								if (ev.target.value !== '' || ev.target.value !== null) {
+									setQ(ev.target.value);
+								}
+							}}
+							onBlur={() => setQ('')}
+							InputProps={{
+								...params.InputProps,
+								autoComplete: 'new-password',
+								endAdornment: (
+									<>
+										{isLoading ? (
+											<CircularProgress color='inherit' size={20} />
+										) : null}
+										{params.InputProps.endAdornment}
+									</>
+								),
+							}}
+						/>
+					)}
+				/>
+			)}
+		</>
+	);
+};
+
+export default SearchableSelect;

package/src/components/subscription/BillingCycleSelectInput.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { SelectInput } from 'react-admin';
+import { Box, CircularProgress, Alert } from '@mui/material';
+import { usePaymentGatewayCapabilities } from 'dash-web/src/hooks/usePaymentGatewayCapabilities';
+
+/**
+ * Billing Cycle Select Input
+ * 
+ * Dynamically filters billing cycle options based on the active payment gateway's capabilities.
+ * This ensures users can only select billing cycles that are supported by their payment gateway.
+ */
+const BillingCycleSelectInput: React.FC = () => {
+    const { supportedBillingCycles, isLoading, gatewayName } = usePaymentGatewayCapabilities();
+
+    // All possible billing cycles with user-friendly labels
+    const allBillingCycles = [
+        { id: 'daily', name: 'Daily' },
+        { id: 'weekly', name: 'Weekly' },
+        { id: 'monthly', name: 'Monthly' },
+        { id: 'yearly', name: 'Yearly' },
+    ];
+
+    if (isLoading) {
+        return (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, my: 2 }}>
+                <CircularProgress size={20} />
+                <span>Loading payment gateway capabilities...</span>
+            </Box>
+        );
+    }
+
+    // Filter choices based on gateway capabilities
+    const filteredChoices = allBillingCycles.filter(cycle =>
+        supportedBillingCycles.includes(cycle.id)
+    );
+
+    // Get unsupported cycles for info message
+    const unsupportedCycles = allBillingCycles
+        .filter(cycle => !supportedBillingCycles.includes(cycle.id))
+        .map(c => c.name);
+
+    return (
+        <Box>
+            <SelectInput
+                source="billing_cycle"
+                label="Billing Cycle"
+                choices={filteredChoices}
+                fullWidth
+                defaultValue="monthly"
+                helperText={
+                    gatewayName
+                        ? `Available cycles for ${gatewayName}`
+                        : 'Select billing cycle for this plan'
+                }
+                validate={(value) => !value ? 'Required' : undefined}
+            />
+            
+            {unsupportedCycles.length > 0 && (
+                <Alert severity="info" sx={{ mt: 1 }}>
+                    Note: {unsupportedCycles.join(', ')} billing cycle
+                    {unsupportedCycles.length > 1 ? 's are' : ' is'} not supported by your current payment gateway ({gatewayName}).
+                </Alert>
+            )}
+        </Box>
+    );
+};
+
+export default BillingCycleSelectInput;