546 lines
18 KiB
TypeScript
546 lines
18 KiB
TypeScript
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
|
import type { ZinoClient } from '../../api/client';
|
|
import type { FormScreenResponse } from '../../api/types';
|
|
import { ORDER_BOOKING, LOOKUP_RECORD_LIMIT } from '../../api/config';
|
|
import { Button } from '../buttons/Button';
|
|
import { Select } from '../reusable/Select';
|
|
import { DateField, TimeField, FileInput, TextField } from './fields';
|
|
import { Spinner } from '../reusable/Spinner';
|
|
import { DynamicForm } from './DynamicForm';
|
|
|
|
export interface LogVisitFormProps {
|
|
client: ZinoClient;
|
|
onSuccess?: () => void;
|
|
onCancel?: () => void;
|
|
onActivityChange?: (name: string) => void;
|
|
}
|
|
|
|
// Utility to clean empty values from form data before sending API requests
|
|
const cleanFormData = (data: Record<string, any>) => {
|
|
const result: Record<string, any> = {};
|
|
Object.entries(data).forEach(([k, v]) => {
|
|
if (v !== '' && v !== null && v !== undefined && !(Array.isArray(v) && v.length === 0)) {
|
|
result[k] = v;
|
|
}
|
|
});
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Dedicated form component for the Log Visit activity.
|
|
* Calls client.formSchema() to retrieve form screen fields dynamically,
|
|
* pre-fills daily_log & route_code from initial daily log lookup,
|
|
* lazy-fetches select_store options after daily log completion,
|
|
* handles mobile pipeline prefill,
|
|
* AND wires activity chaining seamlessly into DynamicForm for subsequent activities.
|
|
*/
|
|
export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }: LogVisitFormProps) {
|
|
const activityId = ORDER_BOOKING.activities.LOG_VISIT.uid;
|
|
|
|
const todayStr = new Date().toISOString().split('T')[0];
|
|
const nowTimeStr = new Date().toTimeString().split(' ')[0].substring(0, 5);
|
|
|
|
const [schema, setSchema] = useState<FormScreenResponse | null>(null);
|
|
const schemaRef = useRef<FormScreenResponse | null>(null);
|
|
useEffect(() => { schemaRef.current = schema; }, [schema]);
|
|
|
|
const [loadingSchema, setLoadingSchema] = useState(true);
|
|
|
|
const [values, setValues] = useState<Record<string, any>>({
|
|
date_of_visit: todayStr,
|
|
time_of_visit: nowTimeStr,
|
|
select_store: '',
|
|
upload_image: [],
|
|
daily_log: '',
|
|
route_code: '',
|
|
});
|
|
|
|
const valuesRef = useRef(values);
|
|
useEffect(() => {
|
|
valuesRef.current = values;
|
|
}, [values]);
|
|
|
|
const [storeOptions, setStoreOptions] = useState<{ value: string; label: string; _raw?: any }[]>([]);
|
|
const [storeSearchQuery, setStoreSearchQuery] = useState('');
|
|
const [fetchingDailyLog, setFetchingDailyLog] = useState(false);
|
|
const [fetchingStores, setFetchingStores] = useState(false);
|
|
|
|
const [chainedActivity, setChainedActivity] = useState<{
|
|
activityId: string;
|
|
instanceId?: number | string;
|
|
prefillData?: Record<string, unknown>;
|
|
} | null>(null);
|
|
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [submitError, setSubmitError] = useState<string | null>(null);
|
|
const [storeError, setStoreError] = useState<string | null>(null);
|
|
|
|
// 1. Fetch form schema from API (/app/434/view/form-screens) & Mobile Pipeline prefill
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
setLoadingSchema(true);
|
|
client.formSchema(activityId)
|
|
.then(async (res) => {
|
|
if (!mounted) return;
|
|
setSchema(res);
|
|
schemaRef.current = res;
|
|
|
|
const initialValues: Record<string, any> = {
|
|
date_of_visit: todayStr,
|
|
time_of_visit: nowTimeStr,
|
|
select_store: '',
|
|
upload_image: [],
|
|
daily_log: '',
|
|
route_code: '',
|
|
};
|
|
|
|
if (res.field_defaults) {
|
|
Object.entries(res.field_defaults).forEach(([fieldId, def]) => {
|
|
if (def.value != null) {
|
|
initialValues[fieldId] = def.value;
|
|
} else if (def.prefill) {
|
|
if (def.prefill.value === 'current_date') {
|
|
initialValues[fieldId] = new Date().toISOString().split('T')[0];
|
|
} else if (def.prefill.value === 'current_time') {
|
|
initialValues[fieldId] = new Date().toTimeString().split(' ')[0].substring(0, 5);
|
|
} else if (def.prefill.value === 'current_user_id') {
|
|
const user = client.currentUser();
|
|
initialValues[fieldId] = user ? Number(user.id) : '';
|
|
} else {
|
|
initialValues[fieldId] = def.prefill.value;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
if (res.prefill_data && Object.keys(res.prefill_data).length > 0) {
|
|
Object.assign(initialValues, res.prefill_data);
|
|
} else if (res.data && Object.keys(res.data).length > 0) {
|
|
Object.assign(initialValues, res.data);
|
|
}
|
|
|
|
setValues(prev => {
|
|
const next = { ...initialValues, ...prev };
|
|
valuesRef.current = next;
|
|
return next;
|
|
});
|
|
})
|
|
.catch(err => {
|
|
console.error('Failed to load Log Visit form schema:', err);
|
|
})
|
|
.finally(() => {
|
|
if (mounted) setLoadingSchema(false);
|
|
});
|
|
|
|
return () => { mounted = false; };
|
|
}, [client, activityId, todayStr, nowTimeStr]);
|
|
|
|
// 2. Helper to fetch select_store options ONLY using updated prefilled formData
|
|
const fetchStoreOptions = useCallback(async (formDataOverride?: Record<string, any>, search: string = '') => {
|
|
setFetchingStores(true);
|
|
setStoreError(null);
|
|
|
|
try {
|
|
const formDataToSend = cleanFormData(formDataOverride || valuesRef.current);
|
|
|
|
|
|
const lookupRes = await client.wfLookupRecords({
|
|
activityId,
|
|
fieldId: 'select_store',
|
|
formData: formDataToSend,
|
|
search,
|
|
limit: LOOKUP_RECORD_LIMIT,
|
|
});
|
|
|
|
const arr = Array.isArray(lookupRes)
|
|
? lookupRes
|
|
: lookupRes?.data || lookupRes?.records || [];
|
|
|
|
// Find display_fields configured in schema for select_store
|
|
const selectStoreField = schemaRef.current?.fields.find(
|
|
f => f.id === 'select_store' || f.uid === 'field_1783057892381' || f.name.toLowerCase().includes('select store')
|
|
);
|
|
const displayFields = (selectStoreField?.properties?.wf_lookup_config as any)?.display_fields || [];
|
|
|
|
const opts = arr.map((row: any) => {
|
|
let labelText = '';
|
|
if (displayFields.length > 0) {
|
|
const labelParts = displayFields
|
|
.map((df: any) => row[df.field_id])
|
|
.filter((v: any) => v != null && v !== '');
|
|
if (labelParts.length > 0) {
|
|
labelText = labelParts.join(' - ');
|
|
}
|
|
}
|
|
|
|
if (!labelText) {
|
|
const storeName = row.business_name_2 || row.store_name || row.name || row.store;
|
|
const storeCode = row.store_code || row.code;
|
|
labelText = storeName
|
|
? `${storeCode ? `${storeCode} - ` : ''}${storeName}`
|
|
: `Store #${row.instance_id || row.id}`;
|
|
}
|
|
|
|
return {
|
|
value: String(row.instance_id || row.id),
|
|
label: labelText,
|
|
_raw: row,
|
|
};
|
|
});
|
|
|
|
setStoreOptions(opts);
|
|
} catch (e: any) {
|
|
console.error('Failed to load select_store options:', e);
|
|
const msg = e?.message || e?.data?.message || String(e);
|
|
if (msg.toLowerCase().includes('route_code')) {
|
|
setStoreError('Please punch-in in Daily Logs');
|
|
} else {
|
|
setStoreError('Failed to load stores');
|
|
}
|
|
} finally {
|
|
setFetchingStores(false);
|
|
}
|
|
}, [client, activityId]);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
fetchStoreOptions(undefined, storeSearchQuery);
|
|
}, 300);
|
|
return () => clearTimeout(timer);
|
|
}, [storeSearchQuery, fetchStoreOptions]);
|
|
|
|
// 3. Fetch Daily Log lookup data initially & prefill form state
|
|
const loadDailyLogData = useCallback(async (dateVal: string, timeVal: string) => {
|
|
setFetchingDailyLog(true);
|
|
try {
|
|
const payload = cleanFormData({
|
|
date_of_visit: dateVal,
|
|
time_of_visit: timeVal,
|
|
});
|
|
|
|
|
|
|
|
const dailyLogLookupRes = await client.wfLookupRecords({
|
|
activityId,
|
|
fieldId: 'daily_log',
|
|
formData: payload,
|
|
limit: LOOKUP_RECORD_LIMIT,
|
|
});
|
|
|
|
const arr = Array.isArray(dailyLogLookupRes)
|
|
? dailyLogLookupRes
|
|
: dailyLogLookupRes?.data || dailyLogLookupRes?.records || [];
|
|
|
|
if (arr.length > 0) {
|
|
const firstLog = arr[0];
|
|
|
|
|
|
const dailyLogInstanceId = String(firstLog.instance_id || firstLog.id || '');
|
|
const routeCode = String(
|
|
firstLog.route_code ||
|
|
firstLog.route_code_1 ||
|
|
firstLog.route_code_2 ||
|
|
firstLog.route_code_3 ||
|
|
firstLog.route ||
|
|
''
|
|
);
|
|
|
|
const updated = { ...valuesRef.current };
|
|
|
|
// Copy raw fields from daily log into state
|
|
Object.keys(firstLog).forEach(key => {
|
|
if (firstLog[key] != null && firstLog[key] !== '') {
|
|
updated[key] = firstLog[key];
|
|
}
|
|
});
|
|
|
|
if (dailyLogInstanceId) {
|
|
updated['daily_log'] = dailyLogInstanceId;
|
|
updated['field_1785225403902'] = dailyLogInstanceId;
|
|
updated['instance_id'] = firstLog.instance_id || firstLog.id;
|
|
}
|
|
|
|
if (routeCode) {
|
|
updated['route_code'] = routeCode;
|
|
updated['route_code_1'] = routeCode;
|
|
updated['route_code_2'] = routeCode;
|
|
updated['route_code_3'] = routeCode;
|
|
updated['field_1785311859486'] = routeCode;
|
|
}
|
|
|
|
valuesRef.current = updated;
|
|
setValues(updated);
|
|
|
|
} else {
|
|
console.warn('[LogVisitForm] No daily log records found for date/time:', dateVal, timeVal);
|
|
}
|
|
} catch (e) {
|
|
console.warn('Failed to load daily_log lookup for Log Visit', e);
|
|
} finally {
|
|
setFetchingDailyLog(false);
|
|
}
|
|
}, [client, activityId]);
|
|
|
|
useEffect(() => {
|
|
loadDailyLogData(values.date_of_visit, values.time_of_visit);
|
|
}, [loadDailyLogData, values.date_of_visit, values.time_of_visit]);
|
|
|
|
const handleStoreDropdownOpen = () => {
|
|
fetchStoreOptions();
|
|
};
|
|
|
|
const handleStoreSelect = (fieldId: string, val: string) => {
|
|
const selectedOpt = storeOptions.find(o => String(o.value) === String(val));
|
|
const rawRow = selectedOpt?._raw || {};
|
|
|
|
setValues(prev => {
|
|
const next: Record<string, any> = { ...prev, [fieldId]: val, select_store: val, field_1: val };
|
|
|
|
// Map raw row fields into values
|
|
Object.keys(rawRow).forEach(key => {
|
|
next[key] = rawRow[key];
|
|
});
|
|
|
|
valuesRef.current = next;
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
setSubmitting(true);
|
|
setSubmitError(null);
|
|
|
|
try {
|
|
const validFields = schema?.fields || [];
|
|
const validFieldIds = new Set(validFields.map(f => f.id));
|
|
|
|
// Always include standard Log Visit field IDs
|
|
['select_store', 'date_of_visit', 'time_of_visit', 'upload_image', 'daily_log', 'route_code'].forEach(id => validFieldIds.add(id));
|
|
|
|
const payload: Record<string, any> = {};
|
|
validFieldIds.forEach(fieldId => {
|
|
const val = valuesRef.current[fieldId];
|
|
const isRemark = fieldId.toLowerCase().includes('remark') || fieldId.toLowerCase().includes('note');
|
|
|
|
if (isRemark && (val === undefined || val === null || val === '')) {
|
|
payload[fieldId] = '';
|
|
} else if (val !== undefined && val !== null && val !== '') {
|
|
payload[fieldId] = val;
|
|
}
|
|
});
|
|
|
|
// Handle image upload if present
|
|
let uploadedFiles: any[] = [];
|
|
const imgVal = valuesRef.current.upload_image;
|
|
const fileList = Array.isArray(imgVal) ? imgVal : (imgVal instanceof File ? [imgVal] : []);
|
|
|
|
for (const fileItem of fileList) {
|
|
if (fileItem instanceof File) {
|
|
const fileMeta = await client.uploadFile(fileItem, {
|
|
activityId,
|
|
fieldId: 'upload_image',
|
|
});
|
|
uploadedFiles.push(fileMeta);
|
|
} else {
|
|
uploadedFiles.push(fileItem);
|
|
}
|
|
}
|
|
payload['upload_image'] = uploadedFiles;
|
|
|
|
|
|
|
|
const res: any = await client.startInstance(activityId, payload);
|
|
|
|
const chainSource = res?.activity_chain || schema?.activity_chain || [];
|
|
if (chainSource && chainSource.length > 0) {
|
|
const nextAct = chainSource[0];
|
|
|
|
onActivityChange?.(nextAct.activity_name);
|
|
|
|
setChainedActivity({
|
|
activityId: nextAct.activity_uid,
|
|
instanceId: res?.instance_id,
|
|
prefillData: { ...valuesRef.current },
|
|
});
|
|
} else {
|
|
onSuccess?.();
|
|
}
|
|
} catch (err: any) {
|
|
setSubmitError(err?.message || 'Failed to log visit.');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
// If activity chain triggered (e.g. Productivity of Visit), render DynamicForm seamlessly
|
|
if (chainedActivity) {
|
|
return (
|
|
<DynamicForm
|
|
client={client}
|
|
activityId={chainedActivity.activityId}
|
|
instanceId={chainedActivity.instanceId}
|
|
customPrefillData={chainedActivity.prefillData}
|
|
onSuccess={onSuccess}
|
|
onCancel={onCancel}
|
|
onActivityChange={onActivityChange}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (loadingSchema) {
|
|
return (
|
|
<div className="flex justify-center items-center py-12">
|
|
<Spinner size={24} label="Loading Log Visit form..." />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const fields = schema?.fields || [];
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
|
|
{fields.map(f => {
|
|
const fieldId = f.id;
|
|
const lowerId = fieldId.toLowerCase();
|
|
const lowerName = f.name.toLowerCase();
|
|
|
|
const isHidden = schema?.field_defaults?.[fieldId]?.hidden === true || (f.properties as any)?.hidden === true;
|
|
|
|
// Skip daily_log and route_code (or hidden fields) from visual rendering
|
|
if (
|
|
isHidden ||
|
|
lowerId === 'daily_log' ||
|
|
lowerId === 'field_1785225403902' ||
|
|
lowerId === 'route_code' ||
|
|
lowerId === 'field_1785311859486' ||
|
|
lowerName === 'daily log' ||
|
|
lowerName === 'route code'
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
const type = f.data_type;
|
|
const val = values[fieldId];
|
|
const isDisabled = schema?.field_defaults?.[fieldId]?.disabled === true || f.properties?.disabled === true;
|
|
|
|
if (type === 'wf_lookup' || lowerId === 'select_store' || lowerName.includes('select store')) {
|
|
return (
|
|
<div key={fieldId} className="flex flex-col gap-1 relative">
|
|
<Select
|
|
label={f.name}
|
|
required={f.mandatory}
|
|
value={(val as string) || ''}
|
|
options={[{ value: '', label: `Select ${f.name}...` }, ...storeOptions]}
|
|
onDropdownOpen={handleStoreDropdownOpen}
|
|
onChange={e => handleStoreSelect(fieldId, e.target.value)}
|
|
onSearchChange={setStoreSearchQuery}
|
|
disableLocalSearch={true}
|
|
disabled={isDisabled}
|
|
/>
|
|
{fetchingStores && (
|
|
<div className="absolute right-3 top-9">
|
|
<Spinner size={16} />
|
|
</div>
|
|
)}
|
|
{storeError && (
|
|
<div className="text-sm text-ruby-600 mt-1">
|
|
{storeError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type.startsWith('date')) {
|
|
return (
|
|
<DateField
|
|
key={fieldId}
|
|
label={f.name}
|
|
required={f.mandatory}
|
|
disabled={isDisabled}
|
|
value={(val as string) || ''}
|
|
onChange={v => {
|
|
setValues(p => {
|
|
const next = { ...p, [fieldId]: v, date_of_visit: v };
|
|
valuesRef.current = next;
|
|
return next;
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (type.startsWith('time')) {
|
|
return (
|
|
<TimeField
|
|
key={fieldId}
|
|
label={f.name}
|
|
required={f.mandatory}
|
|
disabled={isDisabled}
|
|
value={(val as string) || ''}
|
|
onChange={v => {
|
|
setValues(p => {
|
|
const next = { ...p, [fieldId]: v, time_of_visit: v };
|
|
valuesRef.current = next;
|
|
return next;
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (type === 'image' || type === 'file') {
|
|
return (
|
|
<FileInput
|
|
key={fieldId}
|
|
label={f.name}
|
|
type={type}
|
|
required={f.mandatory}
|
|
value={val || []}
|
|
onChange={v => {
|
|
setValues(p => {
|
|
const next = { ...p, [fieldId]: v, upload_image: v };
|
|
valuesRef.current = next;
|
|
return next;
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<TextField
|
|
key={fieldId}
|
|
label={f.name}
|
|
required={f.mandatory}
|
|
type={type}
|
|
value={(val as string) || ''}
|
|
onChange={v => {
|
|
setValues(p => {
|
|
const next = { ...p, [fieldId]: v };
|
|
valuesRef.current = next;
|
|
return next;
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{submitError && <div className="text-sm text-ruby-600 mt-2">{submitError}</div>}
|
|
|
|
<div className="flex items-center justify-end gap-3 mt-4 pt-4 border-t border-border-subtle">
|
|
{onCancel && (
|
|
<Button type="button" variant="secondary" onClick={onCancel} disabled={submitting}>
|
|
Cancel
|
|
</Button>
|
|
)}
|
|
<Button type="submit" disabled={Boolean(submitting || fetchingDailyLog)}>
|
|
{submitting ? 'Submitting...' : 'Log Visit'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|