@pisell/private-materials 6.6.2 → 6.6.4

package/lib/components/authentication/admin/AuthMethods/types.js

@@ -0,0 +1,53 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/authentication/admin/AuthMethods/types.ts
+var types_exports = {};
+__export(types_exports, {
+  AuthMethodCategory: () => AuthMethodCategory,
+  AuthMethodType: () => AuthMethodType
+});
+module.exports = __toCommonJS(types_exports);
+var AuthMethodType = /* @__PURE__ */ ((AuthMethodType2) => {
+  AuthMethodType2["EMAIL"] = "email";
+  AuthMethodType2["PHONE"] = "phone";
+  AuthMethodType2["WALLET_PIN"] = "wallet_pin";
+  AuthMethodType2["CUSTOMER_PASSCODE"] = "customer_passcode";
+  AuthMethodType2["DEVICE_PASSCODE"] = "device_passcode";
+  AuthMethodType2["TEAM_MEMBER"] = "team_member";
+  AuthMethodType2["PASSWORD_RULES"] = "password_rules";
+  AuthMethodType2["GUEST"] = "guest";
+  AuthMethodType2["WALK_IN"] = "walk_in";
+  AuthMethodType2["GOOGLE"] = "google";
+  AuthMethodType2["FACEBOOK"] = "facebook";
+  AuthMethodType2["APPLE"] = "apple";
+  AuthMethodType2["DIGIT_ID_PIN"] = "digit_id_pin";
+  return AuthMethodType2;
+})(AuthMethodType || {});
+var AuthMethodCategory = /* @__PURE__ */ ((AuthMethodCategory2) => {
+  AuthMethodCategory2["GENERAL"] = "General";
+  AuthMethodCategory2["PASSWORD_FREE"] = "Password-free";
+  AuthMethodCategory2["AUTH_FREE"] = "Auth-free";
+  AuthMethodCategory2["OAUTH"] = "OAuth";
+  return AuthMethodCategory2;
+})(AuthMethodCategory || {});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthMethodCategory,
+  AuthMethodType
+});

package/lib/components/authentication/admin/ChannelAuthSetting/AuthenticationMethods/AuthenticationMethods.less

@@ -0,0 +1,231 @@
+.authentication-methods {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px;
+  background: #fff;
+}
+
+/* Upper Section - Authentication Settings Mode */
+.authentication-methods-upper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border: 1px solid #f0f0f0;
+  padding: 16px;
+}
+
+.authentication-methods-header {
+  margin-bottom: 8px;
+}
+
+.authentication-methods-title {
+  margin: 0 !important;
+  font-size: 20px;
+  font-weight: 600;
+  color: #000;
+}
+
+.authentication-methods-mode {
+  display: flex;
+  flex-direction: column;
+}
+
+.authentication-methods-mode .ant-radio-wrapper {
+  display: flex;
+  align-items: flex-start;
+}
+
+.authentication-methods-mode-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.authentication-methods-mode-option {
+  padding: 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+
+.authentication-methods-mode-option:hover {
+  border-color: #1890ff;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+}
+
+.authentication-methods-mode-option:has(.ant-radio-wrapper-checked) {
+  border-color: #1890ff;
+  background-color: #f0f7ff;
+}
+
+.authentication-methods-mode-content {
+  margin-left: 8px;
+  flex: 1;
+}
+
+.authentication-methods-mode-title {
+  display: block;
+  font-size: 16px;
+  color: #262626;
+  margin-bottom: 4px;
+}
+
+.authentication-methods-mode-description {
+  margin: 0 0 8px 0;
+  color: #8c8c8c;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.authentication-methods-configure-link {
+  color: #1890ff;
+  font-size: 14px;
+}
+
+.authentication-methods-configure-link:hover {
+  text-decoration: underline;
+}
+
+
+/* Lower Section - Customer (Left-Right Layout) */
+.authentication-methods-lower {
+  display: flex;
+  flex-direction: column;
+}
+
+.authentication-methods-customer {
+  display: flex;
+  gap: 32px;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
+}
+
+.authentication-methods-customer-left {
+  flex: 0 0 250px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.authentication-methods-customer-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.authentication-methods-customer-icon {
+  font-size: 24px;
+  color: #262626;
+}
+
+.authentication-methods-customer-title {
+  margin: 0 !important;
+  font-size: 16px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.authentication-methods-customer-description {
+  margin: 0 !important;
+  font-size: 14px;
+  color: #8c8c8c;
+  line-height: 1.5;
+}
+
+.authentication-methods-customer-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.authentication-methods-customer-right .authentication-methods-inherited {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.authentication-methods-customer-right .auth-methods {
+  padding: 0;
+}
+
+.authentication-methods-inherited {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.authentication-methods-inherited-title {
+  font-size: 14px;
+  color: #595959;
+  margin: 0 !important;
+  font-weight: 400;
+}
+
+.authentication-methods-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.authentication-methods .auth-method-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0;
+  background: transparent;
+}
+
+.authentication-methods .auth-method-status {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  min-width: 70px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.authentication-methods .auth-method-status.enabled {
+  background: #52c41a;
+  color: #fff;
+}
+
+.authentication-methods .auth-method-status.disabled {
+  background: #8c8c8c;
+  color: #fff;
+}
+
+.authentication-methods .auth-method-item .ant-typography {
+  font-size: 14px;
+  color: #262626;
+  margin: 0;
+}
+
+/* Footer */
+.authentication-methods-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 24px;
+  border-top: 1px solid #f0f0f0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .authentication-methods {
+    padding: 16px;
+  }
+
+  .authentication-methods-customer {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .authentication-methods-customer-left {
+    flex: 1;
+  }
+}

package/lib/components/authentication/admin/ChannelAuthSetting/AuthenticationMethods/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AuthenticationMethodsProps } from './types';
+import './AuthenticationMethods.less';
+declare const AuthenticationMethods: React.FC<AuthenticationMethodsProps>;
+export default AuthenticationMethods;
+export type { AuthenticationMethodsProps, AuthenticationMethodsValue, GlobalAuthMethod } from './types';

package/lib/components/authentication/admin/ChannelAuthSetting/AuthenticationMethods/index.js

@@ -0,0 +1,311 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/authentication/admin/ChannelAuthSetting/AuthenticationMethods/index.tsx
+var AuthenticationMethods_exports = {};
+__export(AuthenticationMethods_exports, {
+  default: () => AuthenticationMethods_default
+});
+module.exports = __toCommonJS(AuthenticationMethods_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_classnames = __toESM(require("classnames"));
+var import_utils = require("@pisell/utils");
+var import_locales = __toESM(require("./locales"));
+var import_useEngineContext = __toESM(require("../../../../../hooks/useEngineContext"));
+var import_AuthMethods = __toESM(require("../../AuthMethods"));
+var import_constants = require("../../AuthMethods/constants");
+var import_AuthenticationMethods = require("./AuthenticationMethods.less");
+var { Title, Paragraph, Text } = import_antd.Typography;
+var convertApiDataToComponent = (apiData) => {
+  const { method } = apiData;
+  const processedKeys = /* @__PURE__ */ new Set();
+  const authMethods = Object.keys(method).map((key) => {
+    processedKeys.add(key);
+    const methodData = method[key];
+    const methodId = key === "phone" ? "phone" : key;
+    const baseMethod = (0, import_constants.getDefaultAuthMethods)().find((m) => m.id === methodId);
+    if (!baseMethod) {
+      return null;
+    }
+    return {
+      ...baseMethod,
+      enabled: methodData.enabled,
+      sort: methodData.sort
+    };
+  }).filter(Boolean);
+  (0, import_constants.getDefaultAuthMethods)().forEach((defaultMethod) => {
+    if (!processedKeys.has(defaultMethod.id)) {
+      authMethods.push({
+        ...defaultMethod,
+        enabled: false
+      });
+    }
+  });
+  authMethods.sort((a, b) => {
+    const sortA = a.sort ?? 0;
+    const sortB = b.sort ?? 0;
+    return sortA - sortB;
+  });
+  const globalMethods = authMethods.map((method2) => {
+    const methodKey = method2.id === "phone" ? "phoneNumber" : method2.id;
+    const labelMap = {
+      email: { en: "Email", "zh-CN": "邮箱", "zh-HK": "郵箱" },
+      phone: { en: "Phone Number", "zh-CN": "手机号", "zh-HK": "手機號" },
+      facebook: { en: "Facebook", "zh-CN": "Facebook", "zh-HK": "Facebook" },
+      apple: { en: "Apple", "zh-CN": "Apple", "zh-HK": "Apple" },
+      guest: { en: "Guest", "zh-CN": "访客", "zh-HK": "訪客" }
+    };
+    return {
+      method: methodKey,
+      enabled: method2.enabled,
+      label: labelMap[method2.id] || { en: method2.id, "zh-CN": method2.id, "zh-HK": method2.id }
+    };
+  });
+  return { authMethods, globalMethods };
+};
+var mockGlobalMethods = [
+  {
+    method: "email",
+    enabled: true,
+    label: {
+      en: "Email",
+      "zh-CN": "邮箱",
+      "zh-HK": "郵箱"
+    }
+  },
+  {
+    method: "phoneNumber",
+    enabled: true,
+    label: {
+      en: "Phone Number",
+      "zh-CN": "手机号",
+      "zh-HK": "手機號"
+    }
+  },
+  {
+    method: "facebook",
+    enabled: true,
+    label: {
+      en: "Facebook",
+      "zh-CN": "Facebook",
+      "zh-HK": "Facebook"
+    }
+  },
+  {
+    method: "apple",
+    enabled: true,
+    label: {
+      en: "Apple",
+      "zh-CN": "Apple",
+      "zh-HK": "Apple"
+    }
+  }
+];
+var AuthenticationMethods = ({
+  className,
+  style,
+  value,
+  onChange,
+  globalMethods = mockGlobalMethods,
+  onConfigureGlobal
+}) => {
+  var _a, _b;
+  const context = (0, import_useEngineContext.default)();
+  import_utils.locales.init(import_locales.default, ((_b = (_a = context == null ? void 0 : context.engine) == null ? void 0 : _a.props) == null ? void 0 : _b.locale) || "en");
+  const { request, data, history } = context.appHelper.utils.getApp();
+  const dataKey = "auth.customer";
+  const [tenantId, setTenantId] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [mode, setMode] = (0, import_react.useState)("default");
+  const [authMethods, setAuthMethods] = (0, import_react.useState)((0, import_constants.getDefaultAuthMethods)());
+  const [fetchedGlobalMethods, setFetchedGlobalMethods] = (0, import_react.useState)(mockGlobalMethods);
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    const coreData = data.storage.getStorage("core");
+    if (coreData) {
+      try {
+        const coreDataJson = JSON.parse(coreData);
+        if ((_a2 = coreDataJson == null ? void 0 : coreDataJson.tenant) == null ? void 0 : _a2.id) {
+          setTenantId(coreDataJson.tenant.id);
+        }
+      } catch (error) {
+        console.error("Error parsing core data:", error);
+      }
+    }
+  }, [data.storage]);
+  (0, import_react.useEffect)(() => {
+    if (tenantId) {
+      setLoading(true);
+      request.get(`/tenant/core/meta?key=${dataKey}&metable_type=tenant&metable_id=${tenantId}`).then((res) => {
+        var _a2, _b2;
+        console.log("res_customer_auth_methods", res);
+        if ((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.length) {
+          const data2 = (_b2 = res.data[0]) == null ? void 0 : _b2.value;
+          const { authMethods: convertedAuthMethods, globalMethods: convertedGlobalMethods } = convertApiDataToComponent(data2);
+          setFetchedGlobalMethods(convertedGlobalMethods);
+          console.log("Converted data:", {
+            authMethods: convertedAuthMethods,
+            globalMethods: convertedGlobalMethods
+          });
+        }
+        setLoading(false);
+      }).catch((error) => {
+        console.error("Error fetching tenant data:", error);
+        setLoading(false);
+      });
+    }
+  }, [tenantId, request]);
+  (0, import_react.useEffect)(() => {
+    if (value) {
+      setMode(value.mode || "default");
+      console.log("同步外部value - 输入的 value.methods:", value.methods);
+      const updatedMethods = (0, import_constants.getDefaultAuthMethods)().map((method, index) => {
+        var _a2;
+        const methodKey = method.id === "phone" ? "phoneNumber" : method.id;
+        const config = (_a2 = value.methods) == null ? void 0 : _a2[methodKey];
+        if (config && typeof config === "object" && "enabled" in config) {
+          return {
+            ...method,
+            enabled: config.enabled ?? method.enabled,
+            sort: config.sort ?? index
+          };
+        }
+        return {
+          ...method,
+          sort: method.sort ?? index
+        };
+      }).sort((a, b) => {
+        const sortA = a.sort ?? 0;
+        const sortB = b.sort ?? 0;
+        return sortA - sortB;
+      });
+      console.log("同步外部value - 生成的 updatedMethods:", updatedMethods);
+      setAuthMethods(updatedMethods);
+    }
+  }, [value]);
+  const convertAuthMethodsToConfig = (methods) => {
+    console.log("convertAuthMethodsToConfig - 输入的 methods:", methods);
+    const config = {};
+    methods.forEach((method, index) => {
+      const key = method.id === "phone" ? "phoneNumber" : method.id;
+      config[key] = {
+        enabled: method.enabled,
+        sort: method.sort ?? index
+        // 优先使用 method.sort，如果没有则使用 index
+      };
+    });
+    console.log("convertAuthMethodsToConfig - 输出的 config:", config);
+    return config;
+  };
+  const handleModeChange = (e) => {
+    setMode(e.target.value);
+    onChange == null ? void 0 : onChange({
+      mode: e.target.value,
+      methods: convertAuthMethodsToConfig(authMethods)
+    });
+  };
+  const handleConfigureGlobal = () => {
+    history.push("/system-settings/auth/customer");
+  };
+  const handleOAuthConfig = () => {
+    history.push("/system-settings/auth/oauth-config");
+  };
+  const handleAuthMethodsOrderChange = (methods) => {
+    console.log("handleAuthMethodsOrderChange", methods);
+    setAuthMethods(methods);
+    onChange == null ? void 0 : onChange({
+      mode,
+      methods: convertAuthMethodsToConfig(methods)
+    });
+  };
+  const handleAuthMethodsToggle = (method, enabled) => {
+    const updatedMethods = authMethods.map((m) => m.id === method.id ? { ...m, enabled } : m);
+    setAuthMethods(updatedMethods);
+    setTimeout(() => {
+      onChange == null ? void 0 : onChange({
+        mode,
+        methods: convertAuthMethodsToConfig(updatedMethods)
+      });
+    }, 0);
+  };
+  const renderMethodTag = (method) => {
+    var _a2, _b2;
+    const statusText = method.enabled ? import_utils.locales.getText("auth.methods.status.enabled") : import_utils.locales.getText("auth.methods.status.disabled");
+    const locale = ((_b2 = (_a2 = context == null ? void 0 : context.engine) == null ? void 0 : _a2.props) == null ? void 0 : _b2.locale) || "en";
+    const label = method.label[locale] || method.label.en;
+    return /* @__PURE__ */ import_react.default.createElement("div", { key: method.method, className: "auth-method-item" }, /* @__PURE__ */ import_react.default.createElement("span", { className: `auth-method-status ${method.enabled ? "enabled" : "disabled"}` }, statusText), /* @__PURE__ */ import_react.default.createElement(Text, null, label));
+  };
+  if (loading) {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("authentication-methods", className), style: { ...style, display: "flex", justifyContent: "center", alignItems: "center", minHeight: "400px" } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { size: "large" }));
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("authentication-methods", className), style }, /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-upper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-header" }, /* @__PURE__ */ import_react.default.createElement(Title, { level: 2, className: "authentication-methods-title" }, import_utils.locales.getText("auth.methods.title"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-mode" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Radio.Group, { value: mode, onChange: handleModeChange }, /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-mode-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-mode-option" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Radio, { value: "default" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-mode-content" }, /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, className: "authentication-methods-mode-title" }, import_utils.locales.getText("auth.methods.mode.default.title")), /* @__PURE__ */ import_react.default.createElement(Paragraph, { className: "authentication-methods-mode-description" }, import_utils.locales.getText("auth.methods.mode.default.description")), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      type: "link",
+      className: "authentication-methods-configure-link",
+      onClick: handleConfigureGlobal,
+      style: { padding: 0, height: "auto" }
+    },
+    import_utils.locales.getText("auth.methods.mode.default.configure")
+  )))), /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-mode-option" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Radio, { value: "custom" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-mode-content" }, /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, className: "authentication-methods-mode-title" }, import_utils.locales.getText("auth.methods.mode.custom.title")), /* @__PURE__ */ import_react.default.createElement(Paragraph, { className: "authentication-methods-mode-description" }, import_utils.locales.getText("auth.methods.mode.custom.description"))))))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-middle" }, mode === "default" && /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Alert,
+    {
+      message: import_utils.locales.getText("auth.methods.preview.title"),
+      description: import_utils.locales.getText("auth.methods.preview.description"),
+      type: "info",
+      showIcon: true,
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.InfoCircleOutlined, null)
+    }
+  ), mode === "custom" && /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Alert,
+    {
+      message: import_utils.locales.getText("auth.methods.custom.warning.title"),
+      description: import_utils.locales.getText("auth.methods.custom.warning.description"),
+      type: "warning",
+      showIcon: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-lower" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-customer" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-customer-left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-customer-header" }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, { className: "authentication-methods-customer-icon" }), /* @__PURE__ */ import_react.default.createElement(Title, { level: 4, className: "authentication-methods-customer-title" }, import_utils.locales.getText("auth.methods.customer.title"))), /* @__PURE__ */ import_react.default.createElement(Paragraph, { className: "authentication-methods-customer-description" }, import_utils.locales.getText("auth.methods.customer.description"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-customer-right" }, mode === "default" ? (
+    // Default mode: Show inherited methods list
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-inherited" }, /* @__PURE__ */ import_react.default.createElement(Paragraph, { className: "authentication-methods-inherited-title" }, import_utils.locales.getText("auth.methods.preview.inherited")), /* @__PURE__ */ import_react.default.createElement("div", { className: "authentication-methods-list" }, fetchedGlobalMethods.map(renderMethodTag)))
+  ) : (
+    // Custom mode: Show AuthMethods component
+    /* @__PURE__ */ import_react.default.createElement(
+      import_AuthMethods.default,
+      {
+        methods: authMethods,
+        onOrderChange: handleAuthMethodsOrderChange,
+        onToggle: handleAuthMethodsToggle,
+        onConfigClick: handleOAuthConfig,
+        enableSetting: false
+      }
+    )
+  )))));
+};
+var AuthenticationMethods_default = AuthenticationMethods;

package/lib/components/authentication/admin/ChannelAuthSetting/AuthenticationMethods/locales.d.ts

@@ -0,0 +1,84 @@
+declare const _default: {
+    en: {
+        'auth.methods.title': string;
+        'auth.methods.mode.default.title': string;
+        'auth.methods.mode.default.description': string;
+        'auth.methods.mode.default.configure': string;
+        'auth.methods.mode.custom.title': string;
+        'auth.methods.mode.custom.description': string;
+        'auth.methods.custom.warning.title': string;
+        'auth.methods.custom.warning.description': string;
+        'auth.methods.preview.title': string;
+        'auth.methods.preview.description': string;
+        'auth.methods.preview.inherited': string;
+        'auth.methods.customer.title': string;
+        'auth.methods.customer.description': string;
+        'auth.methods.label.email': string;
+        'auth.methods.label.phoneNumber': string;
+        'auth.methods.label.walletCode': string;
+        'auth.methods.label.guest': string;
+        'auth.methods.label.walkIn': string;
+        'auth.methods.label.google': string;
+        'auth.methods.label.facebook': string;
+        'auth.methods.label.apple': string;
+        'auth.methods.status.enabled': string;
+        'auth.methods.status.disabled': string;
+        'auth.methods.button.cancel': string;
+        'auth.methods.button.save': string;
+    };
+    'zh-CN': {
+        'auth.methods.title': string;
+        'auth.methods.mode.default.title': string;
+        'auth.methods.mode.default.description': string;
+        'auth.methods.mode.default.configure': string;
+        'auth.methods.mode.custom.title': string;
+        'auth.methods.mode.custom.description': string;
+        'auth.methods.custom.warning.title': string;
+        'auth.methods.custom.warning.description': string;
+        'auth.methods.preview.title': string;
+        'auth.methods.preview.description': string;
+        'auth.methods.preview.inherited': string;
+        'auth.methods.customer.title': string;
+        'auth.methods.customer.description': string;
+        'auth.methods.label.email': string;
+        'auth.methods.label.phoneNumber': string;
+        'auth.methods.label.walletCode': string;
+        'auth.methods.label.guest': string;
+        'auth.methods.label.walkIn': string;
+        'auth.methods.label.google': string;
+        'auth.methods.label.facebook': string;
+        'auth.methods.label.apple': string;
+        'auth.methods.status.enabled': string;
+        'auth.methods.status.disabled': string;
+        'auth.methods.button.cancel': string;
+        'auth.methods.button.save': string;
+    };
+    'zh-HK': {
+        'auth.methods.title': string;
+        'auth.methods.mode.default.title': string;
+        'auth.methods.mode.default.description': string;
+        'auth.methods.mode.default.configure': string;
+        'auth.methods.mode.custom.title': string;
+        'auth.methods.mode.custom.description': string;
+        'auth.methods.custom.warning.title': string;
+        'auth.methods.custom.warning.description': string;
+        'auth.methods.preview.title': string;
+        'auth.methods.preview.description': string;
+        'auth.methods.preview.inherited': string;
+        'auth.methods.customer.title': string;
+        'auth.methods.customer.description': string;
+        'auth.methods.label.email': string;
+        'auth.methods.label.phoneNumber': string;
+        'auth.methods.label.walletCode': string;
+        'auth.methods.label.guest': string;
+        'auth.methods.label.walkIn': string;
+        'auth.methods.label.google': string;
+        'auth.methods.label.facebook': string;
+        'auth.methods.label.apple': string;
+        'auth.methods.status.enabled': string;
+        'auth.methods.status.disabled': string;
+        'auth.methods.button.cancel': string;
+        'auth.methods.button.save': string;
+    };
+};
+export default _default;