@solidxai/core-ui 0.1.5-beta.9 → 0.1.6

package/dist/components/common/GeneralSettings.tsx

@@ -1,8 +1,7 @@
 import { useFormik } from 'formik';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
-import { Toast } from 'primereact/toast';
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { CancelButton } from './CancelButton';
 import { InputSwitch } from 'primereact/inputswitch';
 import { RadioButton } from 'primereact/radiobutton';
@@ -21,11 +20,10 @@ import { Dropdown } from 'primereact/dropdown';
 import { OpenAiProviderComponent } from './SolidSettings/LlmSettings/OpenAiProviderComponent';
 import { AnthropicProviderComponent } from './SolidSettings/LlmSettings/AnthropicProviderComponent';
 import { useDispatch, useSelector } from 'react-redux';
-import { handleError } from '../../helpers/ToastContainer';
 import { ERROR_MESSAGES } from '../../constants/error-messages';
 import { useBulkUpdateSolidSettingsMutation, useLazyGetSolidSettingsQuery } from '../../redux/api/solidSettingsApi';
 import { env } from "../../adapters/env";
-import showToast from "../../helpers/showToast";
+import { showToast } from '../../redux/features/toastSlice';
 
 
 export const GeneralSettings = () => {
@@ -43,8 +41,6 @@ export const GeneralSettings = () => {
     }, [trigger])
     const pathname = usePathname();
     const [bulkUpdateSolidSettings] = useBulkUpdateSolidSettingsMutation();
-    const toast = useRef<Toast>(null);
-
     const initialValues = {
         appLogo: solidSettingsData?.data?.appLogo ?? null,
         companylogo: solidSettingsData?.data?.companylogo ?? null,
@@ -134,7 +130,7 @@ export const GeneralSettings = () => {
                 });
 
                 if (updatedSettingsArray.length === 0) {
-                    showToast(toast, "success", "No Changes", "No settings were updated");
+                    dispatch(showToast({ severity: "success", summary: "No Changes", detail: "No settings were updated" }));
                     return;
                 }
 
@@ -145,13 +141,13 @@ export const GeneralSettings = () => {
                 const response = await bulkUpdateSolidSettings({ data: formData }).unwrap();
 
                 if (response.statusCode === 200) {
-                    showToast(toast, "success", "Updated", "Settings updated");
+                    dispatch(showToast({ severity: "success", summary: "Updated", detail: "Settings updated" }));
                     trigger("")
                 }
 
             } catch (error: any) {
                 console.log("Error updating settings:", error);
-                showToast(toast, "error", ERROR_MESSAGES.FAILED, error?.data?.message || ERROR_MESSAGES.SOMETHING_WRONG);
+                dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FAILED, detail: error?.data?.message || ERROR_MESSAGES.SOMETHING_WRONG }));
             }
         },
     });
@@ -160,8 +156,8 @@ export const GeneralSettings = () => {
         const errors = await formik.validateForm();
         const errorMessages = Object.values(errors);
 
-        if (errorMessages.length > 0 && toast.current) {
-            handleError(errorMessages)
+        if (errorMessages.length > 0) {
+            dispatch(showToast({ severity: 'error', summary: 'Error', detail: Array.isArray(errorMessages) ? errorMessages.join(', ') : errorMessages }));
         }
     }
     useEffect(() => {
@@ -179,12 +175,7 @@ export const GeneralSettings = () => {
             const file = acceptedFiles[0];
             if (file) {
                 if (file.size > 2 * 1024 * 1024) {
-                    toast.current?.show({
-                        severity: "error",
-                        summary: "File too large",
-                        detail: "Maximum file size is 2MB",
-                        sticky: true
-                    });
+                    dispatch(showToast({ severity: "error", summary: "File too large", detail: "Maximum file size is 2MB" }));
                     return;
                 }
                 formik.setFieldValue("appLogo", file);
@@ -198,12 +189,7 @@ export const GeneralSettings = () => {
         const file = acceptedFiles[0];
         if (file) {
             if (file.size > 2 * 1024 * 1024) {
-                toast.current?.show({
-                    severity: "error",
-                    summary: "File too large",
-                    detail: "Maximum file size is 2MB",
-                    sticky: true
-                });
+                dispatch(showToast({ severity: "error", summary: "File too large", detail: "Maximum file size is 2MB" }));
                 return;
             }
             formik.setFieldValue("companylogo", file);
@@ -262,12 +248,7 @@ export const GeneralSettings = () => {
             const file = acceptedFiles[0];
             if (file) {
                 if (file.size > 2 * 1024 * 1024) {
-                    toast.current?.show({
-                        severity: "error",
-                        summary: ERROR_MESSAGES.FILE_LARGE,
-                        detail: ERROR_MESSAGES.MAX_FILE_SIZE,
-                        sticky: true
-                    });
+                    dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FILE_LARGE, detail: ERROR_MESSAGES.MAX_FILE_SIZE }));
                     return;
                 }
                 formik.setFieldValue("authScreenRightBackgroundImage", file);
@@ -281,12 +262,7 @@ export const GeneralSettings = () => {
         const file = acceptedFiles[0];
         if (file) {
             if (file.size > 2 * 1024 * 1024) {
-                toast.current?.show({
-                    severity: "error",
-                    summary: ERROR_MESSAGES.FILE_LARGE,
-                    detail: ERROR_MESSAGES.MAX_FILE_SIZE,
-                    sticky: true,
-                });
+                dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FILE_LARGE, detail: ERROR_MESSAGES.MAX_FILE_SIZE }));
                 return;
             }
             formik.setFieldValue("authScreenLeftBackgroundImage", file);
@@ -298,12 +274,7 @@ export const GeneralSettings = () => {
         const file = acceptedFiles[0];
         if (file) {
             if (file.size > 2 * 1024 * 1024) {
-                toast.current?.show({
-                    severity: "error",
-                    summary: ERROR_MESSAGES.FILE_LARGE,
-                    detail: ERROR_MESSAGES.MAX_FILE_SIZE,
-                    sticky: true,
-                });
+                dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FILE_LARGE, detail: ERROR_MESSAGES.MAX_FILE_SIZE }));
                 return;
             }
             formik.setFieldValue("authScreenCenterBackgroundImage", file);
@@ -447,7 +418,6 @@ export const GeneralSettings = () => {
 
     return (
         <div className="page-parent-wrapper">
-            <Toast ref={toast} />
             <div className="solid-form-wrapper">
                 <div className="solid-form-section">
                     <form onSubmit={formik.handleSubmit}>

package/dist/components/common/GlobalToast.d.ts

@@ -0,0 +1,2 @@
+export declare const GlobalToast: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GlobalToast.d.ts.map

package/dist/components/common/GlobalToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalToast.d.ts","sourceRoot":"","sources":["../../../src/components/common/GlobalToast.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,+CAmBvB,CAAC"}

package/dist/components/common/GlobalToast.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toast } from 'primereact/toast';
+import { useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { clearToast } from '../../redux/features/toastSlice';
+export var GlobalToast = function () {
+    var toastRef = useRef(null);
+    var dispatch = useDispatch();
+    var message = useSelector(function (state) { return state.toast.message; });
+    useEffect(function () {
+        var _a;
+        if (message && toastRef.current) {
+            toastRef.current.show({
+                severity: message.severity,
+                summary: message.summary,
+                detail: message.detail,
+                sticky: message.sticky,
+                life: message.sticky ? undefined : ((_a = message.life) !== null && _a !== void 0 ? _a : 3000),
+            });
+            dispatch(clearToast());
+        }
+    }, [message]);
+    return _jsx(Toast, { ref: toastRef });
+};
+//# sourceMappingURL=GlobalToast.js.map

package/dist/components/common/GlobalToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalToast.js","sourceRoot":"","sources":["../../../src/components/common/GlobalToast.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAE7D,MAAM,CAAC,IAAM,WAAW,GAAG;IACvB,IAAM,QAAQ,GAAG,MAAM,CAAQ,IAAI,CAAC,CAAC;IACrC,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAM,OAAO,GAAG,WAAW,CAAC,UAAC,KAAU,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,OAAO,EAAnB,CAAmB,CAAC,CAAC;IAEjE,SAAS,CAAC;;QACN,IAAI,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE;YAC7B,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;gBAClB,QAAQ,EAAE,OAAO,CAAC,QAAQ;gBAC1B,OAAO,EAAE,OAAO,CAAC,OAAO;gBACxB,MAAM,EAAE,OAAO,CAAC,MAAM;gBACtB,MAAM,EAAE,OAAO,CAAC,MAAM;gBACtB,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,IAAI,mCAAI,IAAI,CAAC;aAC5D,CAAC,CAAC;YACH,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;SAC1B;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,GAAI,CAAC;AACpC,CAAC,CAAC","sourcesContent":["import { Toast } from 'primereact/toast';\nimport React, { useEffect, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { clearToast } from '../../redux/features/toastSlice';\n\nexport const GlobalToast = () => {\n    const toastRef = useRef<Toast>(null);\n    const dispatch = useDispatch();\n    const message = useSelector((state: any) => state.toast.message);\n\n    useEffect(() => {\n        if (message && toastRef.current) {\n            toastRef.current.show({\n                severity: message.severity,\n                summary: message.summary,\n                detail: message.detail,\n                sticky: message.sticky,\n                life: message.sticky ? undefined : (message.life ?? 3000),\n            });\n            dispatch(clearToast());\n        }\n    }, [message]);\n\n    return <Toast ref={toastRef} />;\n};\n"]}

package/dist/components/common/GlobalToast.tsx

@@ -0,0 +1,25 @@
+import { Toast } from 'primereact/toast';
+import React, { useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { clearToast } from '../../redux/features/toastSlice';
+
+export const GlobalToast = () => {
+    const toastRef = useRef<Toast>(null);
+    const dispatch = useDispatch();
+    const message = useSelector((state: any) => state.toast.message);
+
+    useEffect(() => {
+        if (message && toastRef.current) {
+            toastRef.current.show({
+                severity: message.severity,
+                summary: message.summary,
+                detail: message.detail,
+                sticky: message.sticky,
+                life: message.sticky ? undefined : (message.life ?? 3000),
+            });
+            dispatch(clearToast());
+        }
+    }, [message]);
+
+    return <Toast ref={toastRef} />;
+};

package/dist/components/common/SolidErrorStatePage.d.ts

@@ -0,0 +1,12 @@
+type SolidErrorStatePageProps = {
+    eyebrow?: string;
+    statusCode?: string;
+    title: string;
+    description: string;
+    actionLabel: string;
+    actionHref?: string;
+    onAction?: () => void;
+};
+export declare const SolidErrorStatePage: ({ eyebrow, statusCode, title, description, actionLabel, actionHref, onAction, }: SolidErrorStatePageProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SolidErrorStatePage.d.ts.map

package/dist/components/common/SolidErrorStatePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidErrorStatePage.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidErrorStatePage.tsx"],"names":[],"mappings":"AAEA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,oFAQ7B,wBAAwB,4CAkC1B,CAAC"}

package/dist/components/common/SolidErrorStatePage.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SolidButton } from "../shad-cn-ui/SolidButton";
+export var SolidErrorStatePage = function (_a) {
+    var _b = _a.eyebrow, eyebrow = _b === void 0 ? "Whoops!" : _b, statusCode = _a.statusCode, title = _a.title, description = _a.description, actionLabel = _a.actionLabel, actionHref = _a.actionHref, onAction = _a.onAction;
+    var handleAction = function () {
+        if (onAction) {
+            onAction();
+            return;
+        }
+        if (actionHref) {
+            window.location.href = actionHref;
+        }
+    };
+    return (_jsxs("div", { className: "solid-error-page", children: [_jsx("section", { className: "solid-error-page__content", children: _jsxs("div", { className: "solid-error-page__copy", children: [_jsx("p", { className: "solid-error-page__eyebrow", children: eyebrow }), _jsx("h1", { className: "solid-error-page__title", children: title }), _jsx("p", { className: "solid-error-page__description", children: description }), _jsx(SolidButton, { size: "lg", className: "solid-error-page__cta", onClick: handleAction, children: actionLabel })] }) }), _jsx("section", { className: "solid-error-page__visual", "aria-hidden": "true", children: _jsx("div", { className: "solid-error-page__visual-card", children: statusCode ? _jsx("span", { className: "solid-error-page__code", children: statusCode }) : null }) })] }));
+};
+//# sourceMappingURL=SolidErrorStatePage.js.map

package/dist/components/common/SolidErrorStatePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidErrorStatePage.js","sourceRoot":"","sources":["../../../src/components/common/SolidErrorStatePage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAYxD,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EAQT;QAPzB,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EACnB,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,QAAQ,cAAA;IAER,IAAM,YAAY,GAAG;QACnB,IAAI,QAAQ,EAAE;YACZ,QAAQ,EAAE,CAAC;YACX,OAAO;SACR;QACD,IAAI,UAAU,EAAE;YACd,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,UAAU,CAAC;SACnC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,kBAAkB,aAC/B,kBAAS,SAAS,EAAC,2BAA2B,YAC5C,eAAK,SAAS,EAAC,wBAAwB,aACrC,YAAG,SAAS,EAAC,2BAA2B,YAAE,OAAO,GAAK,EACtD,aAAI,SAAS,EAAC,yBAAyB,YAAE,KAAK,GAAM,EACpD,YAAG,SAAS,EAAC,+BAA+B,YAAE,WAAW,GAAK,EAC9D,KAAC,WAAW,IACV,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAE,YAAY,YAEpB,WAAW,GACA,IACV,GACE,EACV,kBAAS,SAAS,EAAC,0BAA0B,iBAAa,MAAM,YAC9D,cAAK,SAAS,EAAC,+BAA+B,YAC3C,UAAU,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,wBAAwB,YAAE,UAAU,GAAQ,CAAC,CAAC,CAAC,IAAI,GAC7E,GACE,IACN,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { SolidButton } from \"../shad-cn-ui/SolidButton\";\n\ntype SolidErrorStatePageProps = {\n  eyebrow?: string;\n  statusCode?: string;\n  title: string;\n  description: string;\n  actionLabel: string;\n  actionHref?: string;\n  onAction?: () => void;\n};\n\nexport const SolidErrorStatePage = ({\n  eyebrow = \"Whoops!\",\n  statusCode,\n  title,\n  description,\n  actionLabel,\n  actionHref,\n  onAction,\n}: SolidErrorStatePageProps) => {\n  const handleAction = () => {\n    if (onAction) {\n      onAction();\n      return;\n    }\n    if (actionHref) {\n      window.location.href = actionHref;\n    }\n  };\n\n  return (\n    <div className=\"solid-error-page\">\n      <section className=\"solid-error-page__content\">\n        <div className=\"solid-error-page__copy\">\n          <p className=\"solid-error-page__eyebrow\">{eyebrow}</p>\n          <h1 className=\"solid-error-page__title\">{title}</h1>\n          <p className=\"solid-error-page__description\">{description}</p>\n          <SolidButton\n            size=\"lg\"\n            className=\"solid-error-page__cta\"\n            onClick={handleAction}\n          >\n            {actionLabel}\n          </SolidButton>\n        </div>\n      </section>\n      <section className=\"solid-error-page__visual\" aria-hidden=\"true\">\n        <div className=\"solid-error-page__visual-card\">\n          {statusCode ? <span className=\"solid-error-page__code\">{statusCode}</span> : null}\n        </div>\n      </section>\n    </div>\n  );\n};\n"]}

package/dist/components/common/SolidErrorStatePage.tsx

@@ -0,0 +1,55 @@
+import { SolidButton } from "../shad-cn-ui/SolidButton";
+
+type SolidErrorStatePageProps = {
+  eyebrow?: string;
+  statusCode?: string;
+  title: string;
+  description: string;
+  actionLabel: string;
+  actionHref?: string;
+  onAction?: () => void;
+};
+
+export const SolidErrorStatePage = ({
+  eyebrow = "Whoops!",
+  statusCode,
+  title,
+  description,
+  actionLabel,
+  actionHref,
+  onAction,
+}: SolidErrorStatePageProps) => {
+  const handleAction = () => {
+    if (onAction) {
+      onAction();
+      return;
+    }
+    if (actionHref) {
+      window.location.href = actionHref;
+    }
+  };
+
+  return (
+    <div className="solid-error-page">
+      <section className="solid-error-page__content">
+        <div className="solid-error-page__copy">
+          <p className="solid-error-page__eyebrow">{eyebrow}</p>
+          <h1 className="solid-error-page__title">{title}</h1>
+          <p className="solid-error-page__description">{description}</p>
+          <SolidButton
+            size="lg"
+            className="solid-error-page__cta"
+            onClick={handleAction}
+          >
+            {actionLabel}
+          </SolidButton>
+        </div>
+      </section>
+      <section className="solid-error-page__visual" aria-hidden="true">
+        <div className="solid-error-page__visual-card">
+          {statusCode ? <span className="solid-error-page__code">{statusCode}</span> : null}
+        </div>
+      </section>
+    </div>
+  );
+};

package/dist/components/common/SolidExport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidExport.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidExport.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAqC5B,eAAO,MAAM,WAAW,kCAAmC,GAAG,mDA2gB7D,CAAC"}
+{"version":3,"file":"SolidExport.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidExport.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAsC5B,eAAO,MAAM,WAAW,kCAAmC,GAAG,mDA8f7D,CAAC"}

package/dist/components/common/SolidExport.js

@@ -47,8 +47,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useFormik } from "formik";
 import './solid-export.css';
 import { Button } from "primereact/button";
-import { Toast } from "primereact/toast";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useDispatch } from 'react-redux';
+import { showToast } from '../../redux/features/toastSlice';
 import { createSolidEntityApi } from "../../redux/api/solidEntityApi";
 import { Dropdown } from "primereact/dropdown";
 import { Dialog } from "primereact/dialog";
@@ -60,7 +61,7 @@ import { Checkbox } from "primereact/checkbox";
 import { ERROR_MESSAGES } from "../../constants/error-messages";
 export var SolidExport = function (_a) {
     var listViewMetaData = _a.listViewMetaData, filters = _a.filters;
-    var toast = useRef(null);
+    var dispatch = useDispatch();
     var entityApi = createSolidEntityApi("userViewMetadata");
     var useUpsertSolidEntityMutation = entityApi.useUpsertSolidEntityMutation;
     var upsertUserView = useUpsertSolidEntityMutation()[0];
@@ -149,9 +150,9 @@ export var SolidExport = function (_a) {
     }, [templatesData]);
     var handleAddTemplate = function () { return __awaiter(void 0, void 0, void 0, function () {
         var tname, customSelectedFields, fieldsData, exportData, response, newAddedTemplate_1, err_1;
-        var _a, _b, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
                     setIsDialogVisible(false);
                     tname = newTemplateName.trim();
@@ -167,17 +168,13 @@ export var SolidExport = function (_a) {
                         fields: fieldsData,
                         modelMetadataId: (_a = solidView === null || solidView === void 0 ? void 0 : solidView.model) === null || _a === void 0 ? void 0 : _a.id,
                     };
-                    _d.label = 1;
+                    _b.label = 1;
                 case 1:
-                    _d.trys.push([1, 3, , 4]);
+                    _b.trys.push([1, 3, , 4]);
                     return [4 /*yield*/, createExportTemplate(exportData).unwrap()];
                 case 2:
-                    response = _d.sent();
-                    (_b = toast === null || toast === void 0 ? void 0 : toast.current) === null || _b === void 0 ? void 0 : _b.show({
-                        severity: "success",
-                        summary: "Template Added",
-                        detail: "Template Saved",
-                    });
+                    response = _b.sent();
+                    dispatch(showToast({ severity: "success", summary: "Template Added", detail: "Template Saved" }));
                     newAddedTemplate_1 = {
                         name: (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name) || "",
                         code: response.data.id,
@@ -191,17 +188,13 @@ export var SolidExport = function (_a) {
                     setSelectedFormat(formatOptions.find(function (format) { return format.code === (selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.code); }) || null);
                     return [3 /*break*/, 4];
                 case 3:
-                    err_1 = _d.sent();
+                    err_1 = _b.sent();
                     console.error(ERROR_MESSAGES.TEMPLATE_FAILED, err_1);
                     return [3 /*break*/, 4];
                 case 4: return [3 /*break*/, 6];
                 case 5:
-                    (_c = toast === null || toast === void 0 ? void 0 : toast.current) === null || _c === void 0 ? void 0 : _c.show({
-                        severity: "error",
-                        summary: ERROR_MESSAGES.TEMPLATE_FAILED,
-                        detail: ERROR_MESSAGES.TEMPLATE_FAILED,
-                    });
-                    _d.label = 6;
+                    dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.TEMPLATE_FAILED, detail: ERROR_MESSAGES.TEMPLATE_FAILED }));
+                    _b.label = 6;
                 case 6: return [2 /*return*/];
             }
         });
@@ -302,18 +295,13 @@ export var SolidExport = function (_a) {
                 } })] }));
     var handleDeleteTemplate = function (id) { return __awaiter(void 0, void 0, void 0, function () {
         var response;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0: return [4 /*yield*/, deleteExportTemplate(id).unwrap()];
                 case 1:
-                    response = _b.sent();
+                    response = _a.sent();
                     setTemplateOptions(function (prev) { return prev.filter(function (template) { return template.code !== id; }); });
-                    (_a = toast === null || toast === void 0 ? void 0 : toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                        severity: "success",
-                        summary: "Template Deleted",
-                        detail: "Template Deleted",
-                    });
+                    dispatch(showToast({ severity: "success", summary: "Template Deleted", detail: "Template Deleted" }));
                     return [2 /*return*/];
             }
         });
@@ -324,7 +312,7 @@ export var SolidExport = function (_a) {
                         handleDeleteTemplate(option.code);
                     }, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4V4zm2 2h6V4H9v2zM6.074 8l.857 12H17.07l.857-12H6.074zM10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1z", fill: "#ff3d32" }) })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsx("div", { className: "p-0", children: currentStepValue === 'export' &&
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-0", children: currentStepValue === 'export' &&
                     _jsxs(_Fragment, { children: [_jsxs("div", { className: "SolidExportControls mx-2 gap-2", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Checkbox, { inputId: "applyFilters", onChange: function (e) { return setCheckedApplyFilter(!!e.checked); }, checked: checkApplyFilter }), _jsx("label", { htmlFor: "applyFilters", className: "ml-2", children: "  Apply Filters" })] }), _jsx(Dropdown, { value: selectedFormat, onChange: function (e) { return setSelectedFormat(e.value); }, options: formatOptions, optionLabel: "name", placeholder: "Format .", className: "p-dropdown p-outlined", 
                                         // 👇 Render icon + text for dropdown list options
                                         itemTemplate: function (option) {