@solidxai/core-ui 0.0.1

package/dist/components/core/common/SolidGenericImport/SolidImportStepper.tsx

@@ -0,0 +1,217 @@
+import { Button } from "primereact/button"
+import { OverlayPanel } from "primereact/overlaypanel"
+import { useEffect, useRef, useState } from "react"
+import styles from './SolidImport.module.css'
+
+export const SolidImportStepper = ({ importStep, setImportStep }: any) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const leftOverlayRef = useRef<OverlayPanel>(null);
+    const rightOverlayRef = useRef<OverlayPanel>(null);
+    const [visibleStepsCount, setVisibleStepsCount] = useState(4);
+
+    const allSteps = [
+        { id: 1, label: "Instructions" },
+        { id: 2, label: "Import" },
+        { id: 3, label: "Map the fields" },
+        { id: 4, label: "Summary" }
+    ];
+
+    const getStepColor = (step: number) => {
+        if (importStep === step) return "var(--primary-color)";      // current step
+        if (importStep > step) return "#eceff1";        // past step
+        return "#F9F9F9";                                  // future step
+    };
+
+    // Dynamic responsive logic - same as SolidFormStepper
+    useEffect(() => {
+        const calculateVisibleSteps = () => {
+            if (!containerRef.current) return;
+            
+            const containerWidth = containerRef.current.offsetWidth;
+            const overflowButtonWidth = 50;
+            const stepWidth = 150; // approximate width per step
+            const arrowOverlap = 14; // overlap between steps
+            
+            // Calculate how many steps can fit
+            let count = 0;
+            let totalWidth = 0;
+
+            for (let i = 0; i < allSteps.length; i++) {
+                const stepSpace = i === 0 ? stepWidth : stepWidth - arrowOverlap;
+                const needsOverflow = (i < allSteps.length - 1 && count + 1 < allSteps.length);
+                const requiredWidth = totalWidth + stepSpace + (needsOverflow ? overflowButtonWidth : 0);
+                
+                if (requiredWidth <= containerWidth) {
+                    totalWidth += stepSpace;
+                    count++;
+                } else {
+                    break;
+                }
+            }
+
+            count = Math.max(1, count); // At least 1 step visible
+            setVisibleStepsCount(count);
+        };
+
+        calculateVisibleSteps();
+        
+        const resizeObserver = new ResizeObserver(calculateVisibleSteps);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+
+        const timeoutId = setTimeout(calculateVisibleSteps, 100);
+
+        return () => {
+            resizeObserver.disconnect();
+            clearTimeout(timeoutId);
+        };
+    }, []);
+
+    const activeIndex = importStep - 1;
+    const isSingleVisibleStep = visibleStepsCount === 1;
+
+    let visibleSteps: any[] = [];
+    let previousSteps: any[] = [];
+    let nextSteps: any[] = [];
+
+    if (isSingleVisibleStep) {
+        // Show only current step
+        visibleSteps = [allSteps[activeIndex]];
+        previousSteps = allSteps.slice(0, activeIndex);
+        nextSteps = allSteps.slice(activeIndex + 1);
+    } else if (activeIndex < visibleStepsCount) {
+        // Active step is in first group
+        visibleSteps = allSteps.slice(0, visibleStepsCount);
+        nextSteps = allSteps.slice(visibleStepsCount);
+    } else {
+        // Active step needs to be centered
+        const slotsAvailable = visibleStepsCount - 1;
+        const afterActive = Math.min(Math.floor(slotsAvailable / 2), allSteps.length - activeIndex - 1);
+        const beforeActive = slotsAvailable - afterActive;
+
+        const startIndex = Math.max(0, activeIndex - beforeActive);
+        const endIndex = Math.min(allSteps.length, activeIndex + afterActive + 1);
+
+        previousSteps = allSteps.slice(0, startIndex);
+        visibleSteps = allSteps.slice(startIndex, endIndex);
+        nextSteps = allSteps.slice(endIndex);
+    }
+
+    const hasPreviousSteps = previousSteps.length > 0 && !isSingleVisibleStep;
+    const hasNextSteps = nextSteps.length > 0 || (isSingleVisibleStep && previousSteps.length > 0);
+
+    const renderStepSVG = (step: any, index: number) => {
+        const isFirst = index === 0 && !hasPreviousSteps;
+        const isLast = index === visibleSteps.length - 1 && !hasNextSteps;
+        const marginLeft = index === 0 ? 0 : -14;
+
+        if (isFirst) {
+            // First step - arrow on right only
+            return (
+                <div className="flex relative" style={{ flex: 1, height: 40, zIndex: 4 - index, marginLeft }} onClick={() => setImportStep(step.id)}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 343 40" fill="none" preserveAspectRatio="none">
+                        <path d="M342 20.1399L329 0H0V40H329L342 20.1399Z" fill={getStepColor(step.id)} stroke={getStepColor(step.id)} strokeLinejoin="round" />
+                    </svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="100%" viewBox="0 0 10 40" fill="none" style={{ marginLeft: -12 }}>
+                        <path d="M1 0L10 20.1399L1 40" stroke="#CFD6DC" strokeLinejoin="round" />
+                    </svg>
+                    <div className={`${styles.StepperText} ${importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText}`}>{step.label}</div>
+                </div>
+            );
+        } else if (isLast) {
+            // Last step - arrow on left only
+            return (
+                <div className="flex relative" style={{ flex: 1, height: 40, zIndex: 4 - index, marginLeft: -22 }} onClick={() => setImportStep(step.id)}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 330 40" fill="none" preserveAspectRatio="none">
+                        <path d="M330 0H0L13.5 20L0 40H330V0Z" fill={getStepColor(step.id)} stroke={getStepColor(step.id)} strokeLinejoin="round" />
+                    </svg>
+                    <div className={`${styles.StepperText} ${importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText}`}>{step.label}</div>
+                </div>
+            );
+        } else {
+            // Middle steps - arrows on both sides
+            return (
+                <div className="flex relative" style={{ flex: 1, height: 40, zIndex: 4 - index, marginLeft: -22 }} onClick={() => setImportStep(step.id)}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 343 40" fill="none" preserveAspectRatio="none">
+                        <path d="M342 20.1399L330 0H0L13.5 20L0 40H330L342 20.1399Z" fill={getStepColor(step.id)} stroke={getStepColor(step.id)} strokeLinejoin="round" />
+                    </svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="100%" viewBox="0 0 10 40" fill="none" style={{ marginLeft: -13 }}>
+                        <path d="M1 0L10 20.1399L1 40" stroke="#CFD6DC" strokeLinejoin="round" />
+                    </svg>
+                    <div className={`${styles.StepperText} ${importStep === step.id ? styles.ActiveStepperText : styles.DeactiveStepperText}`}>{step.label}</div>
+                </div>
+            );
+        }
+    };
+
+    return (
+        <div className="py-2 px-3 px-md-4 secondary-border-bottom" style={{ backgroundColor: '#F6F6F6' }}>
+            <div ref={containerRef} className="flex align-items-center" style={{ borderRadius: 6, border: '1px solid var(--primary-light-color)', overflow: 'hidden', cursor: 'pointer' }}>
+                
+                {/* Left Overflow Button */}
+                {hasPreviousSteps && (
+                    <>
+                        <Button
+                            icon="pi pi-chevron-left"
+                            text
+                            rounded
+                            size="small"
+                            style={{ minWidth: '40px', height: '40px', margin: '0 4px' }}
+                            onClick={(e) => leftOverlayRef.current?.toggle(e)}
+                        />
+                        <OverlayPanel ref={leftOverlayRef}>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.5rem' }}>
+                                {previousSteps.map((step) => (
+                                    <Button
+                                        key={step.id}
+                                        label={step.label}
+                                        text
+                                        className={importStep === step.id ? 'p-button-primary' : ''}
+                                        onClick={() => {
+                                            setImportStep(step.id);
+                                            leftOverlayRef.current?.hide();
+                                        }}
+                                    />
+                                ))}
+                            </div>
+                        </OverlayPanel>
+                    </>
+                )}
+
+                {/* Visible Steps */}
+                {visibleSteps.map((step, index) => renderStepSVG(step, index))}
+
+                {/* Right Overflow Button */}
+                {hasNextSteps && (
+                    <>
+                        <Button
+                            icon="pi pi-chevron-right"
+                            text
+                            rounded
+                            size="small"
+                            style={{ minWidth: '40px', height: '40px' }}
+                            onClick={(e) => rightOverlayRef.current?.toggle(e)}
+                        />
+                        <OverlayPanel ref={rightOverlayRef}>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.5rem' }}>
+                                {(isSingleVisibleStep ? [...previousSteps, ...nextSteps] : nextSteps).map((step) => (
+                                    <Button
+                                        key={step.id}
+                                        label={step.label}
+                                        text
+                                        className={importStep === step.id ? 'p-button-primary' : ''}
+                                        onClick={() => {
+                                            setImportStep(step.id);
+                                            rightOverlayRef.current?.hide();
+                                        }}
+                                    />
+                                ))}
+                            </div>
+                        </OverlayPanel>
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}

package/dist/components/core/common/SolidGenericImport/SolidImportTransaction.d.ts

@@ -0,0 +1,2 @@
+export declare const SolidImportTransaction: ({ setImportStatusResult, transactionId, setImportStep }: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidImportTransaction.d.ts.map

package/dist/components/core/common/SolidGenericImport/SolidImportTransaction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidImportTransaction.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportTransaction.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,sBAAsB,4DAA6D,GAAG,4CA0LlG,CAAA"}

package/dist/components/core/common/SolidGenericImport/SolidImportTransaction.js

@@ -0,0 +1,177 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from 'primereact/button';
+import styles from './SolidImport.module.css';
+import { useCreateImportSyncMutation, useLazyGetImportMappingInfoQuery, usePatchUpdateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';
+import React, { useEffect, useRef, useState } from 'react';
+import { Dropdown } from 'primereact/dropdown';
+import { Toast } from 'primereact/toast';
+import { ERROR_MESSAGES } from '../../../../constants/error-messages';
+import showToast from "../../../../helpers/showToast";
+export var SolidImportTransaction = function (_a) {
+    // console.log("get transaction id", transactionId);
+    var _b, _c, _d, _e, _f;
+    var setImportStatusResult = _a.setImportStatusResult, transactionId = _a.transactionId, setImportStep = _a.setImportStep;
+    var toast = useRef(null);
+    var _g = useLazyGetImportMappingInfoQuery(), trigger = _g[0], _h = _g[1], mappingInfo = _h.data, isLoading = _h.isLoading, isError = _h.isError;
+    var patchUpdateImportTransaction = usePatchUpdateImportTransactionMutation()[0];
+    var _j = useCreateImportSyncMutation(), createImportSync = _j[0], isImporting = _j[1].isLoading;
+    var _k = useState({}), fieldMapping = _k[0], setFieldMapping = _k[1];
+    var _l = useState([]), visibleHeaders = _l[0], setVisibleHeaders = _l[1];
+    useEffect(function () {
+        if (transactionId) {
+            trigger({ id: transactionId });
+        }
+    }, [transactionId]);
+    useEffect(function () {
+        var _a, _b;
+        var defaultMapping = {};
+        var headers = [];
+        (_b = (_a = mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data) === null || _a === void 0 ? void 0 : _a.sampleImportedRecordInfo) === null || _b === void 0 ? void 0 : _b.forEach(function (sample) {
+            defaultMapping[sample.cellHeader] = sample.defaultMappedFieldName || "";
+            headers.push(sample.cellHeader);
+        });
+        setFieldMapping(defaultMapping);
+        setVisibleHeaders(headers);
+    }, [mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data]);
+    var dropdownOptions = (_b = mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data) === null || _b === void 0 ? void 0 : _b.importableFields.map(function (field) { return ({
+        label: field.displayName,
+        value: field.name,
+    }); });
+    var handleChange = function (cellHeader, selectedField) {
+        setFieldMapping(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[cellHeader] = selectedField, _a)));
+        });
+    };
+    var handleRemoveRow = function (cellHeader) {
+        setVisibleHeaders(function (prev) { return prev.filter(function (header) { return header !== cellHeader; }); });
+        setFieldMapping(function (prev) {
+            var updated = __assign({}, prev);
+            delete updated[cellHeader];
+            return updated;
+        });
+    };
+    var handleImportTransaction = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mappingArray, patchData, patchResult, importResult, importError_1, error_1, errorMessage;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    _e.trys.push([0, 6, , 7]);
+                    mappingArray = Object.entries(fieldMapping).map(function (_a) {
+                        var header = _a[0], fieldName = _a[1];
+                        return ({
+                            header: header,
+                            fieldName: fieldName,
+                        });
+                    });
+                    patchData = {
+                        status: "mapping_created",
+                        mapping: JSON.stringify(mappingArray),
+                    };
+                    return [4 /*yield*/, patchUpdateImportTransaction({
+                            id: transactionId,
+                            data: patchData,
+                        }).unwrap()];
+                case 1:
+                    patchResult = _e.sent();
+                    if (!((patchResult === null || patchResult === void 0 ? void 0 : patchResult.statusCode) === 200)) return [3 /*break*/, 5];
+                    _e.label = 2;
+                case 2:
+                    _e.trys.push([2, 4, , 5]);
+                    return [4 /*yield*/, createImportSync({ id: transactionId }).unwrap()];
+                case 3:
+                    importResult = _e.sent();
+                    if (((_a = importResult === null || importResult === void 0 ? void 0 : importResult.data) === null || _a === void 0 ? void 0 : _a.status) === "import_succeeded") {
+                        setImportStatusResult(importResult);
+                        setImportStep(4);
+                    }
+                    if (((_b = importResult === null || importResult === void 0 ? void 0 : importResult.data) === null || _b === void 0 ? void 0 : _b.status) === "import_failed") {
+                        setImportStatusResult(importResult);
+                        setImportStep(4);
+                    }
+                    return [3 /*break*/, 5];
+                case 4:
+                    importError_1 = _e.sent();
+                    showToast(toast, "error", ERROR_MESSAGES.IMPORT_ERROR, (_c = importError_1 === null || importError_1 === void 0 ? void 0 : importError_1.data) === null || _c === void 0 ? void 0 : _c.error);
+                    return [3 /*break*/, 5];
+                case 5: return [3 /*break*/, 7];
+                case 6:
+                    error_1 = _e.sent();
+                    errorMessage = ((_d = error_1 === null || error_1 === void 0 ? void 0 : error_1.data) === null || _d === void 0 ? void 0 : _d.error) || ERROR_MESSAGES.SOMETHING_WRONG;
+                    showToast(toast, "error", ERROR_MESSAGES.ERROR, errorMessage);
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    var sampleRecords = (_d = (_c = mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data) === null || _c === void 0 ? void 0 : _c.sampleImportedRecordInfo) !== null && _d !== void 0 ? _d : [];
+    return (_jsxs("div", { children: [_jsx(Toast, { ref: toast }), _jsx("div", { className: styles.SolidImportContextWrapper, children: _jsxs("div", { className: 'grid m-0 relative', children: [_jsxs("div", { className: "col-6 font-bold p-3 ".concat(styles.ImportTableHeader), children: ["File Column", _jsx("div", { className: styles.TransactionsHeaderDivider })] }), _jsx("div", { className: "col-6 font-bold p-3 ".concat(styles.ImportTableHeader), children: "SolidX Field" }), sampleRecords.length > 0 ? (sampleRecords === null || sampleRecords === void 0 ? void 0 : sampleRecords.filter(function (sample) { return visibleHeaders.includes(sample.cellHeader); }).map(function (sample) {
+                            var fieldMeta = mappingInfo.data.importableFields.find(function (f) { return f.name === fieldMapping[sample.cellHeader]; });
+                            var isRequired = fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.required;
+                            // {sampleRecords.length > 0 ? (
+                            //    sampleRecords    
+                            //     ?.filter((sample: any) => visibleHeaders.includes(sample.cellHeader))
+                            //     ?.sort((a: any, b: any) => {
+                            //         const aRequired = mappingInfo.data.importableFields.find((f: any) => f.name === fieldMapping[a.cellHeader])?.required;
+                            //         const bRequired = mappingInfo.data.importableFields.find((f: any) => f.name === fieldMapping[b.cellHeader])?.required;
+                            //         return (bRequired ? 1 : 0) - (aRequired ? 1 : 0); // true comes before false
+                            //     })
+                            //     .map((sample: any) => {
+                            //         const fieldMeta = mappingInfo.data.importableFields.find(
+                            //             (f: any) => f.name === fieldMapping[sample.cellHeader]
+                            //         );
+                            //         const isRequired = fieldMeta?.required;
+                            return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "col-5 md:col-6 py-2 pl-3 pr-2 md:px-3 flex flex-column justify-content-center", style: { borderBottom: "1px solid var(--gray-100)" }, children: [_jsx("div", { className: "font-medium text-primary", children: sample.cellHeader }), _jsx("div", { className: "text-sm", style: { color: "var(--solid-grey-500)" }, children: sample.cellValue || "" })] }), _jsx("div", { className: "col-7 md:col-6 py-0", style: { borderBottom: "1px solid var(--gray-100)" }, children: _jsxs("div", { className: "flex w-full justify-between align-items-center gap-2  py-2 md:px-3  ".concat(fieldMapping[sample.cellHeader] ? "col-11 sm:col-12" : "col-12", " "), children: [_jsx(Dropdown, { value: fieldMapping[sample.cellHeader], options: dropdownOptions, onChange: function (e) { return handleChange(sample.cellHeader, e.value); }, className: "w-full p-inputtext-sm", placeholder: "Select field" }), !isRequired ? (_jsx("span", { onClick: function () { return handleRemoveRow(sample.cellHeader); }, title: "Remove this row", style: { cursor: 'pointer' }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [_jsx("rect", { width: "16", height: "16", rx: "8", fill: "#F0F0F0" }), _jsx("path", { d: "M5.6 11L5 10.4L7.4 8L5 5.6L5.6 5L8 7.4L10.4 5L11 5.6L8.6 8L11 10.4L10.4 11L8 8.6L5.6 11Z", fill: "#4B4D52" })] }) }))
+                                                    :
+                                                        _jsx("span", { style: { height: 16, width: 16 } })] }) })] }, sample.cellHeader));
+                        })) : (_jsxs("div", { className: 'col-12 flex flex-column align-items-center', children: [_jsx("h4", { className: 'text-center px-2', children: "No Sample Imported Record Info Found" }), _jsx("p", { children: "Please Add Records" })] }))] }) }), _jsx("div", { className: 'mt-3 flex align-items-center gap-3', children: _jsx(Button, { label: 'Import', size: 'small', onClick: handleImportTransaction, loading: isImporting, disabled: isImporting || ((_f = (_e = mappingInfo === null || mappingInfo === void 0 ? void 0 : mappingInfo.data) === null || _e === void 0 ? void 0 : _e.sampleImportedRecordInfo) === null || _f === void 0 ? void 0 : _f.length) === 0 }) })] }));
+};
+//# sourceMappingURL=SolidImportTransaction.js.map

package/dist/components/core/common/SolidGenericImport/SolidImportTransaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidImportTransaction.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportTransaction.tsx"],"names":[],"mappings":"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"}

package/dist/components/core/common/SolidGenericImport/SolidImportTransaction.tsx

@@ -0,0 +1,196 @@
+
+import { Button } from 'primereact/button'
+import styles from './SolidImport.module.css'
+import { useCreateImportSyncMutation, useLazyGetImportMappingInfoQuery, usePatchUpdateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';
+import React, { useEffect, useRef, useState } from 'react';
+import { Dropdown } from 'primereact/dropdown';
+import { Toast } from 'primereact/toast';
+import { ERROR_MESSAGES } from '../../../../constants/error-messages';
+import showToast from "../../../../helpers/showToast";
+export const SolidImportTransaction = ({ setImportStatusResult, transactionId, setImportStep }: any) => {
+    // console.log("get transaction id", transactionId);
+
+    const toast = useRef<Toast>(null);
+    const [trigger, { data: mappingInfo, isLoading, isError }] = useLazyGetImportMappingInfoQuery();
+    const [patchUpdateImportTransaction] = usePatchUpdateImportTransactionMutation();
+    const [createImportSync, { isLoading: isImporting }] = useCreateImportSyncMutation();
+    const [fieldMapping, setFieldMapping] = useState<Record<string, string>>({});
+    const [visibleHeaders, setVisibleHeaders] = useState<string[]>([]);
+
+    useEffect(() => {
+        if (transactionId) {
+            trigger({ id: transactionId });
+        }
+    }, [transactionId]);
+
+    useEffect(() => {
+        const defaultMapping: Record<string, string> = {};
+        const headers: string[] = [];
+        mappingInfo?.data?.sampleImportedRecordInfo?.forEach((sample: any) => {
+            defaultMapping[sample.cellHeader] = sample.defaultMappedFieldName || "";
+            headers.push(sample.cellHeader);
+        });
+        setFieldMapping(defaultMapping);
+        setVisibleHeaders(headers);
+    }, [mappingInfo?.data]);
+
+
+    const dropdownOptions = mappingInfo?.data?.importableFields.map((field: any) => ({
+        label: field.displayName,
+        value: field.name,
+    }));
+
+    const handleChange = (cellHeader: string, selectedField: string) => {
+        setFieldMapping((prev) => ({
+            ...prev,
+            [cellHeader]: selectedField,
+        }));
+    };
+
+    const handleRemoveRow = (cellHeader: string) => {
+        setVisibleHeaders((prev) => prev.filter(header => header !== cellHeader));
+        setFieldMapping((prev) => {
+            const updated = { ...prev };
+            delete updated[cellHeader];
+            return updated;
+        });
+    };
+
+    const handleImportTransaction = async () => {
+        try {
+            const mappingArray = Object.entries(fieldMapping).map(([header, fieldName]) => ({
+                header,
+                fieldName,
+            }));
+
+            const patchData = {
+                status: "mapping_created",
+                mapping: JSON.stringify(mappingArray),
+            };
+            const patchResult = await patchUpdateImportTransaction({
+                id: transactionId,
+                data: patchData,
+            }).unwrap();
+            if (patchResult?.statusCode === 200) {
+
+                // Sync
+                try {
+                    const importResult = await createImportSync({ id: transactionId }).unwrap();
+
+                    if (importResult?.data?.status === "import_succeeded") {
+                        setImportStatusResult(importResult)
+                        setImportStep(4);
+                    }
+                    if (importResult?.data?.status === "import_failed") {
+                        setImportStatusResult(importResult);
+                        setImportStep(4);
+                    }
+                } catch (importError: any) {
+                    showToast(toast, "error", ERROR_MESSAGES.IMPORT_ERROR, importError?.data?.error);
+                }
+
+                // Async
+            }
+        } catch (error: any) {
+            const errorMessage = error?.data?.error || ERROR_MESSAGES.SOMETHING_WRONG;
+            showToast(toast, "error", ERROR_MESSAGES.ERROR, errorMessage);
+        }
+    };
+
+    const sampleRecords = mappingInfo?.data?.sampleImportedRecordInfo ?? [];
+
+    return (
+        <div>
+            <Toast ref={toast} />
+            <div className={styles.SolidImportContextWrapper}>
+                <div className='grid m-0 relative'>
+                    <div className={`col-6 font-bold p-3 ${styles.ImportTableHeader}`}>
+                        File Column
+                        <div className={styles.TransactionsHeaderDivider}></div>
+                    </div>
+                    <div className={`col-6 font-bold p-3 ${styles.ImportTableHeader}`}>
+                        SolidX Field
+                    </div>
+                    {sampleRecords.length > 0 ? (
+                        sampleRecords
+                            ?.filter((sample: any) => visibleHeaders.includes(sample.cellHeader))
+                            .map((sample: any) => {
+                                const fieldMeta = mappingInfo.data.importableFields.find(
+                                    (f: any) => f.name === fieldMapping[sample.cellHeader]
+                                );
+                                const isRequired = fieldMeta?.required;
+                                // {sampleRecords.length > 0 ? (
+                                //    sampleRecords    
+                                //     ?.filter((sample: any) => visibleHeaders.includes(sample.cellHeader))
+                                //     ?.sort((a: any, b: any) => {
+                                //         const aRequired = mappingInfo.data.importableFields.find((f: any) => f.name === fieldMapping[a.cellHeader])?.required;
+                                //         const bRequired = mappingInfo.data.importableFields.find((f: any) => f.name === fieldMapping[b.cellHeader])?.required;
+                                //         return (bRequired ? 1 : 0) - (aRequired ? 1 : 0); // true comes before false
+                                //     })
+                                //     .map((sample: any) => {
+                                //         const fieldMeta = mappingInfo.data.importableFields.find(
+                                //             (f: any) => f.name === fieldMapping[sample.cellHeader]
+                                //         );
+                                //         const isRequired = fieldMeta?.required;
+                                return (
+                                    <React.Fragment key={sample.cellHeader}>
+                                        <div
+                                            className="col-5 md:col-6 py-2 pl-3 pr-2 md:px-3 flex flex-column justify-content-center"
+                                            style={{ borderBottom: "1px solid var(--gray-100)" }}
+                                        >
+                                             
+                                            <div className="font-medium text-primary">{sample.cellHeader}</div>
+                                            <div className="text-sm" style={{ color: "var(--solid-grey-500)" }}>
+                                                {sample.cellValue || ""}
+                                            </div>
+                                        </div>
+                                        <div className="col-7 md:col-6 py-0" style={{ borderBottom: "1px solid var(--gray-100)" }}>
+                                            <div className={`flex w-full justify-between align-items-center gap-2  py-2 md:px-3  ${fieldMapping[sample.cellHeader] ? "col-11 sm:col-12" : "col-12"} `}>
+                                                <Dropdown
+                                                    value={fieldMapping[sample.cellHeader]}
+                                                    options={dropdownOptions}
+                                                    onChange={(e) => handleChange(sample.cellHeader, e.value)}
+                                                    className="w-full p-inputtext-sm"
+                                                    placeholder="Select field"
+                                                />
+                                                {!isRequired ? (
+                                                    <span
+                                                        onClick={() => handleRemoveRow(sample.cellHeader)}
+                                                        title="Remove this row"
+                                                        style={{ cursor: 'pointer' }}
+                                                    >
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                                            <rect width="16" height="16" rx="8" fill="#F0F0F0" />
+                                                            <path d="M5.6 11L5 10.4L7.4 8L5 5.6L5.6 5L8 7.4L10.4 5L11 5.6L8.6 8L11 10.4L10.4 11L8 8.6L5.6 11Z" fill="#4B4D52" />
+                                                        </svg>
+                                                    </span>
+                                                )
+                                                    :
+                                                    <span style={{ height: 16, width: 16 }}></span>
+                                                }
+                                            </div>
+
+                                        </div>
+                                    </React.Fragment>
+                                );
+                            })
+                    ) : (
+                        <div className='col-12 flex flex-column align-items-center'>
+                            <h4 className='text-center px-2'>No Sample Imported Record Info Found</h4>
+                            <p>Please Add Records</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+            <div className='mt-3 flex align-items-center gap-3'>
+                <Button
+                    label='Import'
+                    size='small'
+                    onClick={handleImportTransaction}
+                    loading={isImporting}
+                    disabled={isImporting || mappingInfo?.data?.sampleImportedRecordInfo?.length === 0}
+                />
+            </div>
+        </div>
+    )
+}

package/dist/components/core/common/SolidGenericImport/SolidImportTransactionStatus.d.ts

@@ -0,0 +1,2 @@
+export declare const SolidImportTransactionStatus: ({ importStatusResult, transactionId, setOpenImportDialog, handleFetchUpdatedRecords }: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidImportTransactionStatus.d.ts.map

package/dist/components/core/common/SolidGenericImport/SolidImportTransactionStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidImportTransactionStatus.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportTransactionStatus.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,4BAA4B,0FAA2F,GAAG,4CAqJtI,CAAA"}