@solidxai/core-ui 0.1.8-beta.9 → 0.1.9-alpha.0

package/dist/components/common/SettingsComponent.tsx

@@ -0,0 +1,582 @@
+import { useEffect, useMemo, useState, type ComponentType } from "react";
+import { Search } from "lucide-react";
+import { useDispatch } from "react-redux";
+import { env } from "../../adapters/env";
+import { ERROR_MESSAGES } from "../../constants/error-messages";
+import { getExtensionComponent } from "../../helpers/registry";
+import {
+  extractSettingsList,
+  getSettingOptionLabel,
+  getSettingsMap,
+  humanizeSettingToken,
+  type AdminSettingDefinition,
+} from "../../helpers/settingsPayload";
+import type { SolidSettingsWidgetProps } from "../../types/solid-core";
+import { showToast } from "../../redux/features/toastSlice";
+import {
+  useBulkUpdateSolidSettingsMutation,
+  useGetSolidSettingsQuery,
+} from "../../redux/api/solidSettingsApi";
+import {
+  SolidButton,
+  SolidDatePicker,
+  SolidInput,
+  SolidSelect,
+  SolidSwitch,
+  SolidTabGroup,
+  SolidTag,
+  SolidTextarea,
+  SolidTooltip,
+  SolidTooltipContent,
+  SolidTooltipTrigger,
+} from "../shad-cn-ui";
+import { SettingDropzoneActivePlaceholder } from "./SolidSettings/SettingDropzoneActivePlaceholder";
+import { SettingsImageRemoveButton } from "./SolidSettings/SettingsImageRemoveButton";
+import { SolidUploadedImage } from "./SolidSettings/SolidUploadedImage";
+import styles from "./SettingsComponent.module.css";
+
+type SettingsFormValue = string | number | boolean | null | File;
+type SettingsFilterMode = "all" | "read-only" | "editable";
+
+function normalizeAssetUrl(src?: string | null) {
+  if (!src) return "";
+  const isBlobOrAbsolute = src.startsWith("blob:") || src.startsWith("http");
+  if (isBlobOrAbsolute || src.startsWith("/")) return src;
+  return `${env("API_URL")}/${src}`;
+}
+
+function toModuleInitials(moduleName: string) {
+  return moduleName
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((token) => token[0]?.toUpperCase())
+    .join("")
+    .slice(0, 2);
+}
+
+function serializeValue(value: unknown) {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "string") return value;
+  return JSON.stringify(value);
+}
+
+function areValuesEqual(left: unknown, right: unknown) {
+  if (left instanceof File || right instanceof File) return false;
+  return serializeValue(left) === serializeValue(right);
+}
+
+function formatReadonlyValue(setting: AdminSettingDefinition, value: unknown) {
+  if (value === null || value === undefined || value === "") {
+    return "Not set";
+  }
+
+  if (setting.controlType === "boolean") {
+    return value ? "Enabled" : "Disabled";
+  }
+
+  if (setting.controlType === "selectionStatic") {
+    return getSettingOptionLabel(setting, value);
+  }
+
+  if (setting.controlType === "mediaSingle") {
+    return String(value);
+  }
+
+  if (typeof value === "object") {
+    return JSON.stringify(value, null, 2);
+  }
+
+  return String(value);
+}
+
+function getSettingsWidgetName(setting: AdminSettingDefinition) {
+  return setting.settingsWidget || "";
+}
+
+function getCustomWidgetErrorText(setting: AdminSettingDefinition, widgetName: string, settingsWidget: ComponentType<any> | null) {
+  if (setting.controlType !== "custom") return null;
+  if (!widgetName) {
+    return `controlType is "custom" for setting "${setting.key}" but no settingsWidget is specified.`;
+  }
+  if (!settingsWidget) {
+    return `Widget "${widgetName}" is not registered for setting "${setting.key}".`;
+  }
+  return null;
+}
+
+export function SettingsComponent() {
+  const dispatch = useDispatch();
+  const { data: settingsResponse, refetch } = useGetSolidSettingsQuery(undefined);
+  const [bulkUpdateSolidSettings] = useBulkUpdateSolidSettingsMutation();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filterMode, setFilterMode] = useState<SettingsFilterMode>("all");
+  const [activeModule, setActiveModule] = useState("");
+  const [formValues, setFormValues] = useState<Record<string, SettingsFormValue>>({});
+  const [filePreviews, setFilePreviews] = useState<Record<string, string>>({});
+
+  const settingsList = useMemo(
+    () => extractSettingsList(settingsResponse).filter((setting) => setting.level !== "internal-user"),
+    [settingsResponse],
+  );
+  const settingsMap = useMemo(() => getSettingsMap(settingsResponse), [settingsResponse]);
+  const totalSettingsCount = settingsList.length;
+  const editableSettingsCount = useMemo(
+    () => settingsList.filter((setting) => setting.editable).length,
+    [settingsList],
+  );
+
+  useEffect(() => {
+    if (!settingsList.length) return;
+    const nextValues = Object.fromEntries(
+      settingsList.map((setting) => [setting.key, settingsMap[setting.key] ?? setting.value ?? null]),
+    );
+    setFormValues(nextValues);
+  }, [settingsList, settingsMap]);
+
+  const filteredSettings = useMemo(() => {
+    const scopedSettings = settingsList.filter((setting) => {
+      if (filterMode === "read-only") return !setting.editable;
+      if (filterMode === "editable") return setting.editable;
+      return true;
+    });
+    const query = searchTerm.trim().toLowerCase();
+    if (!query) return scopedSettings;
+
+    return scopedSettings.filter((setting) => {
+      const haystack = [
+        setting.moduleName,
+        setting.group,
+        setting.key,
+        setting.label,
+        setting.description,
+        setting.options?.map((option) => `${option.label} ${option.value}`).join(" "),
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+
+      return haystack.includes(query);
+    });
+  }, [filterMode, searchTerm, settingsList]);
+
+  const moduleEntries = useMemo(() => {
+    const grouped = new Map<string, AdminSettingDefinition[]>();
+    filteredSettings.forEach((setting) => {
+      const current = grouped.get(setting.moduleName) ?? [];
+      current.push(setting);
+      grouped.set(setting.moduleName, current);
+    });
+
+    return Array.from(grouped.entries()).map(([moduleName, moduleSettings]) => ({
+      moduleName,
+      label: humanizeSettingToken(moduleName),
+      badge: toModuleInitials(moduleName) || "S",
+      settings: moduleSettings,
+    }));
+  }, [filteredSettings]);
+
+  useEffect(() => {
+    if (!moduleEntries.length) {
+      setActiveModule("");
+      return;
+    }
+
+    if (!moduleEntries.some((entry) => entry.moduleName === activeModule)) {
+      setActiveModule(moduleEntries[0].moduleName);
+    }
+  }, [activeModule, moduleEntries]);
+
+  const hasChanges = useMemo(
+    () =>
+      settingsList.some(
+        (setting) =>
+          setting.editable &&
+          !areValuesEqual(formValues[setting.key], settingsMap[setting.key] ?? setting.value ?? null),
+      ),
+    [formValues, settingsList, settingsMap],
+  );
+
+  const groupedModuleSettings = useMemo(() => {
+    const currentModule = moduleEntries.find((entry) => entry.moduleName === activeModule);
+    if (!currentModule) return [];
+
+    const grouped = new Map<string, AdminSettingDefinition[]>();
+    currentModule.settings.forEach((setting) => {
+      const groupKey = setting.group || "general";
+      const current = grouped.get(groupKey) ?? [];
+      current.push(setting);
+      grouped.set(groupKey, current);
+    });
+
+    return Array.from(grouped.entries()).map(([groupKey, groupSettings]) => ({
+      key: groupKey,
+      label: humanizeSettingToken(groupKey),
+      settings: groupSettings.sort((left, right) => {
+        const leftSort = left.sortOrder ?? Number.MAX_SAFE_INTEGER;
+        const rightSort = right.sortOrder ?? Number.MAX_SAFE_INTEGER;
+        if (leftSort !== rightSort) return leftSort - rightSort;
+        return (left.label ?? left.key).localeCompare(right.label ?? right.key);
+      }),
+    }));
+  }, [activeModule, moduleEntries]);
+
+  const updateValue = (key: string, value: SettingsFormValue) => {
+    setFormValues((current) => ({ ...current, [key]: value }));
+  };
+
+  const updateFileValue = (key: string, file: File | null) => {
+    if (!file) {
+      if (filePreviews[key]) {
+        URL.revokeObjectURL(filePreviews[key]);
+      }
+      setFilePreviews((current) => {
+        const next = { ...current };
+        delete next[key];
+        return next;
+      });
+      updateValue(key, null);
+      return;
+    }
+
+    if (file.size > 2 * 1024 * 1024) {
+      dispatch(showToast({ severity: "error", summary: "File too large", detail: "Maximum file size is 2MB" }));
+      return;
+    }
+
+    if (filePreviews[key]) {
+      URL.revokeObjectURL(filePreviews[key]);
+    }
+
+    const preview = URL.createObjectURL(file);
+    setFilePreviews((current) => ({ ...current, [key]: preview }));
+    updateValue(key, file);
+  };
+
+  useEffect(
+    () => () => {
+      Object.values(filePreviews).forEach((preview) => URL.revokeObjectURL(preview));
+    },
+    [filePreviews],
+  );
+
+  const handleSave = async () => {
+    try {
+      const updatedSettingsArray: Array<{ key: string; value: string; type: string }> = [];
+      const formData = new FormData();
+
+      settingsList.forEach((setting) => {
+        if (!setting.editable) return;
+
+        const nextValue = formValues[setting.key];
+        const currentValue = settingsMap[setting.key] ?? setting.value ?? null;
+
+        if (nextValue instanceof File) {
+          formData.append(setting.key, nextValue);
+          updatedSettingsArray.push({ key: setting.key, value: "", type: "system" });
+          return;
+        }
+
+        if (!areValuesEqual(nextValue, currentValue)) {
+          updatedSettingsArray.push({
+            key: setting.key,
+            value: serializeValue(nextValue),
+            type: "system",
+          });
+        }
+      });
+
+      if (!updatedSettingsArray.length) {
+        dispatch(showToast({ severity: "success", summary: "No Changes", detail: "No settings were updated" }));
+        return;
+      }
+
+      formData.append("settings", JSON.stringify(updatedSettingsArray));
+      const response = await bulkUpdateSolidSettings({ data: formData }).unwrap();
+
+      if (response?.statusCode === 200) {
+        dispatch(showToast({ severity: "success", summary: "Updated", detail: "Settings updated" }));
+      } else {
+        dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FAILED, detail: ERROR_MESSAGES.SOMETHING_WRONG }));
+      }
+
+      await refetch();
+      setFilePreviews({});
+    } catch (error: any) {
+      dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FAILED, detail: error?.data?.message || ERROR_MESSAGES.SOMETHING_WRONG }));
+    }
+  };
+
+  const moduleTabs = moduleEntries.map((entry) => ({
+    value: entry.moduleName,
+    label: (
+      <span className={styles.moduleTab}>
+        <span className={styles.moduleTabBadge}>{entry.badge}</span>
+        <span className={styles.moduleTabText}>
+          <span className={styles.moduleTabLabel}>{entry.label}</span>
+          <span className={styles.moduleTabMeta}>{entry.settings.length} settings</span>
+        </span>
+      </span>
+    ),
+    content: (
+      <div>
+        {groupedModuleSettings.length ? (
+          groupedModuleSettings.map((group) => (
+            <section key={group.key} className={styles.groupSection}>
+              <div className={styles.groupCard}>
+                <div className={styles.groupHeader}>
+                  <div>
+                    <h3 className={styles.groupTitle}>{group.label}</h3>
+                    <div className={styles.groupMeta}>{group.settings.length} item{group.settings.length === 1 ? "" : "s"}</div>
+                  </div>
+                </div>
+                <div className={styles.groupBody}>
+                  {group.settings.map((setting) => {
+                    const value = formValues[setting.key];
+                    const settingsWidgetName = getSettingsWidgetName(setting);
+                    const SettingsWidget = settingsWidgetName ? getExtensionComponent(settingsWidgetName) : null;
+                    const customWidgetErrorText = getCustomWidgetErrorText(setting, settingsWidgetName, SettingsWidget);
+                    const settingsWidgetProps: SolidSettingsWidgetProps = {
+                      setting,
+                      value,
+                      settingsMap,
+                      formValues,
+                      editable: Boolean(setting.editable),
+                      updateValue,
+                      updateFileValue,
+                    };
+                    return (
+                      <div key={setting.key} className={styles.settingRow}>
+                        <div className={styles.settingLabelWrap}>
+                          <div className={styles.settingLabelLine}>
+                            <p className={styles.settingLabel}>{setting.label || humanizeSettingToken(setting.key)}</p>
+                            {!setting.editable ? (
+                              <SolidTooltip>
+                                <SolidTooltipTrigger asChild>
+                                  <span>
+                                    <SolidTag tone="warn">Read only</SolidTag>
+                                  </span>
+                                </SolidTooltipTrigger>
+                                <SolidTooltipContent>
+                                  This value comes from system configuration and cannot be changed from the admin UI.
+                                </SolidTooltipContent>
+                              </SolidTooltip>
+                            ) : null}
+                          </div>
+                          {setting.description ? <p className={styles.settingDescription}>{setting.description}</p> : null}
+                        </div>
+
+                        {!setting.editable ? (
+                          setting.controlType === "custom" ? (
+                            customWidgetErrorText ? (
+                              <div className={styles.readonlyValue}>
+                                <span className={styles.customWidgetError}>{customWidgetErrorText}</span>
+                              </div>
+                            ) : SettingsWidget ? (
+                              (() => {
+                                const ResolvedSettingsWidget = SettingsWidget as ComponentType<any>;
+                                return <ResolvedSettingsWidget {...settingsWidgetProps} />;
+                              })()
+                            ) : null
+                          ) : setting.controlType === "mediaSingle" && value ? (
+                            <div className={styles.mediaPreview}>
+                              <SolidUploadedImage src={normalizeAssetUrl(String(value))} />
+                            </div>
+                          ) : (
+                            <div className={styles.readonlyValue}>
+                              <span className={value === null || value === undefined || value === "" ? styles.emptyValue : undefined}>
+                                {formatReadonlyValue(setting, value)}
+                              </span>
+                            </div>
+                          )
+                        ) : (
+                          <div className={`${styles.controlStack} ${setting.controlType === "custom" ? styles.customControlStack : ""}`}>
+                            {setting.controlType === "boolean" ? (
+                              <div className={styles.boolRow}>
+                                <SolidSwitch checked={Boolean(value)} onChange={(checked) => updateValue(setting.key, checked)} />
+                                <span className={styles.boolText}>{value ? "Enabled" : "Disabled"}</span>
+                              </div>
+                            ) : null}
+
+                            {setting.controlType === "shortText" ? (
+                              <SolidInput
+                                type="text"
+                                value={value == null ? "" : String(value)}
+                                placeholder={setting.placeholder || setting.label}
+                                onChange={(event: any) => updateValue(setting.key, event.target.value)}
+                              />
+                            ) : null}
+
+                            {setting.controlType === "longText" ? (
+                              <SolidTextarea
+                                rows={4}
+                                value={value == null ? "" : typeof value === "string" ? value : JSON.stringify(value, null, 2)}
+                                placeholder={setting.placeholder || setting.label}
+                                onChange={(event: any) => updateValue(setting.key, event.target.value)}
+                              />
+                            ) : null}
+
+                            {setting.controlType === "numeric" ? (
+                              <SolidInput
+                                type="number"
+                                value={value == null ? "" : String(value)}
+                                placeholder={setting.placeholder || setting.label}
+                                onChange={(event: any) => updateValue(setting.key, event.target.value === "" ? null : Number(event.target.value))}
+                              />
+                            ) : null}
+
+                            {setting.controlType === "selectionStatic" ? (
+                              <SolidSelect
+                                value={value}
+                                options={setting.options || []}
+                                placeholder={setting.placeholder || "Select"}
+                                onChange={(event) => updateValue(setting.key, event.value)}
+                              />
+                            ) : null}
+
+                            {setting.controlType === "date" || setting.controlType === "datetime" ? (
+                              <SolidDatePicker
+                                selected={value ? new Date(String(value)) : null}
+                                showTimeSelect={setting.controlType === "datetime"}
+                                dateFormat={setting.controlType === "datetime" ? "yyyy-MM-dd HH:mm:ss" : "yyyy-MM-dd"}
+                                onChange={(date: Date | null) => updateValue(setting.key, date instanceof Date ? date.toISOString() : null)}
+                              />
+                            ) : null}
+
+                            {setting.controlType === "mediaSingle" ? (
+                              <div className={styles.mediaField}>
+                                <div className={styles.mediaComposer}>
+                                  <label className={styles.mediaDropzone}>
+                                    <input
+                                      className={styles.mediaInput}
+                                      type="file"
+                                      accept=".png,.jpg,.jpeg,.svg,.webp"
+                                      onChange={(event) => updateFileValue(setting.key, event.target.files?.[0] ?? null)}
+                                    />
+                                    <SettingDropzoneActivePlaceholder note="PNG, JPG, JPEG, SVG, WEBP | Max size: 2 MB" />
+                                  </label>
+                                  {(filePreviews[setting.key] || value) ? (
+                                    <div className={styles.mediaPreview}>
+                                      <SolidUploadedImage src={filePreviews[setting.key] || normalizeAssetUrl(String(value))} />
+                                    </div>
+                                  ) : (
+                                    <div className={styles.mediaEmptyState}>Preview appears here after upload</div>
+                                  )}
+                                </div>
+                                {(filePreviews[setting.key] || value) ? (
+                                  <SettingsImageRemoveButton onClick={() => updateFileValue(setting.key, null)} />
+                                ) : null}
+                              </div>
+                            ) : null}
+
+                            {setting.controlType === "custom" ? (
+                              customWidgetErrorText ? (
+                                <div className={styles.readonlyValue}>
+                                  <span className={styles.customWidgetError}>{customWidgetErrorText}</span>
+                                </div>
+                              ) : SettingsWidget ? (
+                                (() => {
+                                  const ResolvedSettingsWidget = SettingsWidget as ComponentType<any>;
+                                  return <ResolvedSettingsWidget {...settingsWidgetProps} />;
+                                })()
+                              ) : null
+                            ) : null}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </section>
+          ))
+        ) : (
+          <div className={styles.emptyState}>No settings match the current filter.</div>
+        )}
+      </div>
+    ),
+  }));
+
+  return (
+    <div className={styles.page}>
+      <div className="page-header secondary-border-bottom">
+        <div className={styles.headerIntro}>
+          <div className="form-wrapper-title">Settings</div>
+          <div className={styles.subtitle}>Manage platform configuration across modules from a single workspace.</div>
+          <div className={styles.summaryChips}>
+            <span className={styles.summaryChip}>{moduleEntries.length} module{moduleEntries.length === 1 ? "" : "s"}</span>
+            <span className={styles.summaryChip}>{totalSettingsCount} setting{totalSettingsCount === 1 ? "" : "s"}</span>
+            <button
+              type="button"
+              className={`${styles.summaryChip} ${styles.summaryChipButton} ${filterMode === "editable" ? styles.summaryChipActive : ""}`}
+              aria-pressed={filterMode === "editable"}
+              onClick={() => setFilterMode((current) => (current === "editable" ? "all" : "editable"))}
+            >
+              {editableSettingsCount} editable
+            </button>
+          </div>
+        </div>
+        <div className={styles.headerSearch}>
+          <div className={styles.searchIcon}>
+            <Search size={16} />
+            <SolidInput
+              className={styles.searchInput}
+              value={searchTerm}
+              placeholder="Search settings, groups, or modules"
+              onChange={(event: any) => setSearchTerm(event.target.value)}
+            />
+          </div>
+          {searchTerm ? (
+            <span className={styles.resultsMeta}>
+              {filteredSettings.length} result{filteredSettings.length === 1 ? "" : "s"}
+            </span>
+          ) : null}
+        </div>
+        <div className={styles.toolbarActions}>
+          <div className={styles.legend}>
+            <button
+              type="button"
+              className={`${styles.readonlyFilterButton} ${filterMode === "read-only" ? styles.readonlyFilterButtonActive : ""}`}
+              aria-pressed={filterMode === "read-only"}
+              aria-label={filterMode === "read-only" ? "Disable read-only filter" : "Enable read-only filter"}
+              onClick={() => setFilterMode((current) => (current === "read-only" ? "all" : "read-only"))}
+            >
+              <SolidTag tone="warn">Read only</SolidTag>
+            </button>
+            <span className={filterMode === "read-only" ? styles.legendLabelActive : undefined}>
+              {filterMode === "read-only" ? "Read-only filter active" : "System-managed value"}
+            </span>
+            <SolidTooltip>
+              <SolidTooltipTrigger asChild>
+                <button type="button" className={styles.legendButton} aria-label="Read-only legend details">
+                  i
+                </button>
+              </SolidTooltipTrigger>
+              <SolidTooltipContent>
+                Read-only settings are visible here for context, but can only be changed through environment or backend configuration.
+              </SolidTooltipContent>
+            </SolidTooltip>
+          </div>
+          <SolidButton size="sm" type="button" loading={false} onClick={handleSave} disabled={!hasChanges}>
+            Save
+          </SolidButton>
+        </div>
+      </div>
+
+      <div className={styles.workspace}>
+        {moduleTabs.length ? (
+          <SolidTabGroup
+            tabs={moduleTabs}
+            value={activeModule}
+            onValueChange={setActiveModule}
+            className={styles.tabGroup}
+            listClassName={styles.tabList}
+            panelClassName={styles.tabPanel}
+            orientation="vertical"
+          />
+        ) : (
+          <div className={styles.emptyState}>No settings are available.</div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,2 +1,9 @@
-export declare const SocialMediaLogin: () => import("react/jsx-runtime").JSX.Element;
+type SocialMediaLoginProps = {
+    googleEnabled?: boolean;
+    facebookEnabled?: boolean;
+    appleEnabled?: boolean;
+    microsoftEnabled?: boolean;
+};
+export declare const SocialMediaLogin: ({ googleEnabled, facebookEnabled, appleEnabled, microsoftEnabled, }: SocialMediaLoginProps) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=SocialMediaLogin.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SocialMediaLogin.d.ts","sourceRoot":"","sources":["../../../src/components/common/SocialMediaLogin.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,+CA6D5B,CAAC"}
+{"version":3,"file":"SocialMediaLogin.d.ts","sourceRoot":"","sources":["../../../src/components/common/SocialMediaLogin.tsx"],"names":[],"mappings":"AAIA,KAAK,qBAAqB,GAAG;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wEAK1B,qBAAqB,4CAiHvB,CAAC"}

package/dist/components/common/SocialMediaLogin.js

@@ -2,20 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRouter } from "../../hooks/useRouter";
 import { env } from "../../adapters/env";
 import { SolidButton } from "../shad-cn-ui";
-import { useDispatch } from "react-redux";
-import { showToast } from "../../redux/features/toastSlice";
-export var SocialMediaLogin = function () {
+export var SocialMediaLogin = function (_a) {
+    var _b = _a.googleEnabled, googleEnabled = _b === void 0 ? false : _b, _c = _a.facebookEnabled, facebookEnabled = _c === void 0 ? false : _c, _d = _a.appleEnabled, appleEnabled = _d === void 0 ? false : _d, _e = _a.microsoftEnabled, microsoftEnabled = _e === void 0 ? false : _e;
     var router = useRouter();
-    var dispatch = useDispatch();
     var googleApiConnectRedirectUrl = "".concat(env("NEXT_PUBLIC_BACKEND_API_URL"), "/api/iam/google/connect");
-    var showNotEnabledToast = function (provider) {
-        dispatch(showToast({
-            severity: "info",
-            summary: "".concat(provider, " login"),
-            detail: "This provider is not enabled yet.",
-            life: 2200,
-        }));
-    };
-    return (_jsx("div", { className: "mt-4", children: _jsxs("div", { className: "solid-auth-social-grid", children: [_jsx(SolidButton, { type: "button", variant: "outline", className: "solid-auth-social-btn", onClick: function () { return showNotEnabledToast("Apple"); }, "aria-label": "Login with Apple (not enabled)", children: _jsx("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" }) }) }), _jsx(SolidButton, { type: "button", variant: "outline", className: "solid-auth-social-btn", onClick: function () { return router.push(googleApiConnectRedirectUrl); }, "aria-label": "Login with Google", children: _jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M21.8 12.23c0-.74-.07-1.45-.2-2.13H12v4.03h5.5a4.7 4.7 0 0 1-2.04 3.08v2.55h3.3c1.93-1.78 3.04-4.4 3.04-7.53z", fill: "#4285F4" }), _jsx("path", { d: "M12 22c2.75 0 5.05-.91 6.73-2.47l-3.3-2.55c-.92.62-2.1.99-3.43.99-2.64 0-4.88-1.78-5.68-4.18H2.9v2.63A10 10 0 0 0 12 22z", fill: "#34A853" }), _jsx("path", { d: "M6.32 13.79a6 6 0 0 1 0-3.58V7.58H2.9a10 10 0 0 0 0 8.84l3.42-2.63z", fill: "#FBBC05" }), _jsx("path", { d: "M12 6.02c1.49 0 2.82.51 3.87 1.5l2.9-2.9C17.04 2.98 14.74 2 12 2A10 10 0 0 0 2.9 7.58l3.42 2.63c.8-2.4 3.04-4.19 5.68-4.19z", fill: "#EA4335" })] }) }), _jsx(SolidButton, { type: "button", variant: "outline", className: "solid-auth-social-btn", onClick: function () { return showNotEnabledToast("Meta"); }, "aria-label": "Login with Meta (not enabled)", children: _jsx("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M5.4 15.6c0-3.14 1.62-7.09 3.76-7.09 1.43 0 2.56 1.72 2.84 2.25.28-.53 1.41-2.25 2.84-2.25 2.14 0 3.76 3.95 3.76 7.09 0 1.79-.63 2.89-1.82 2.89-2.12 0-3.75-3.02-4.78-4.82-1.03 1.8-2.66 4.82-4.78 4.82-1.19 0-1.82-1.1-1.82-2.89z", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }) }));
+    var facebookApiConnectRedirectUrl = "".concat(env("NEXT_PUBLIC_BACKEND_API_URL"), "/api/iam/facebook/connect");
+    var appleApiConnectRedirectUrl = "".concat(env("NEXT_PUBLIC_BACKEND_API_URL"), "/api/iam/apple/connect");
+    var microsoftApiConnectRedirectUrl = "".concat(env("NEXT_PUBLIC_BACKEND_API_URL"), "/api/iam/microsoft/connect");
+    return (_jsx("div", { className: "mt-4", children: _jsxs("div", { className: "solid-auth-social-grid", children: [appleEnabled && (_jsx(SolidButton, { type: "button", variant: "outline", className: "solid-auth-social-btn", onClick: function () { return router.push(appleApiConnectRedirectUrl); }, "aria-label": "Login with Apple", children: _jsx("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" }) }) })), googleEnabled && (_jsx(SolidButton, { type: "button", variant: "outline", className: "solid-auth-social-btn", onClick: function () { return router.push(googleApiConnectRedirectUrl); }, "aria-label": "Login with Google", children: _jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M21.8 12.23c0-.74-.07-1.45-.2-2.13H12v4.03h5.5a4.7 4.7 0 0 1-2.04 3.08v2.55h3.3c1.93-1.78 3.04-4.4 3.04-7.53z", fill: "#4285F4" }), _jsx("path", { d: "M12 22c2.75 0 5.05-.91 6.73-2.47l-3.3-2.55c-.92.62-2.1.99-3.43.99-2.64 0-4.88-1.78-5.68-4.18H2.9v2.63A10 10 0 0 0 12 22z", fill: "#34A853" }), _jsx("path", { d: "M6.32 13.79a6 6 0 0 1 0-3.58V7.58H2.9a10 10 0 0 0 0 8.84l3.42-2.63z", fill: "#FBBC05" }), _jsx("path", { d: "M12 6.02c1.49 0 2.82.51 3.87 1.5l2.9-2.9C17.04 2.98 14.74 2 12 2A10 10 0 0 0 2.9 7.58l3.42 2.63c.8-2.4 3.04-4.19 5.68-4.19z", fill: "#EA4335" })] }) })), facebookEnabled && (_jsx(SolidButton, { type: "button", variant: "outline", className: "solid-auth-social-btn", onClick: function () { return router.push(facebookApiConnectRedirectUrl); }, "aria-label": "Login with Meta", children: _jsx("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M5.4 15.6c0-3.14 1.62-7.09 3.76-7.09 1.43 0 2.56 1.72 2.84 2.25.28-.53 1.41-2.25 2.84-2.25 2.14 0 3.76 3.95 3.76 7.09 0 1.79-.63 2.89-1.82 2.89-2.12 0-3.75-3.02-4.78-4.82-1.03 1.8-2.66 4.82-4.78 4.82-1.19 0-1.82-1.1-1.82-2.89z", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })), microsoftEnabled && (_jsx(SolidButton, { type: "button", variant: "outline", className: "solid-auth-social-btn", onClick: function () { return router.push(microsoftApiConnectRedirectUrl); }, "aria-label": "Login with Microsoft", children: _jsx("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", children: _jsxs("g", { transform: "translate(2, 2)", children: [_jsx("rect", { width: "9", height: "9", x: "0", y: "0", fill: "#f25022" }), _jsx("rect", { width: "9", height: "9", x: "11", y: "0", fill: "#7fba00" }), _jsx("rect", { width: "9", height: "9", x: "0", y: "11", fill: "#00a4ef" }), _jsx("rect", { width: "9", height: "9", x: "11", y: "11", fill: "#ffb900" })] }) }) }))] }) }));
 };
 //# sourceMappingURL=SocialMediaLogin.js.map