@oatfi/ui 0.5.0 → 0.7.0

package/dist/index.cjs.js

@@ -2102,6 +2102,17 @@ const MethodCard = styled.div`
   transition:
     border-color 0.15s ease,
     background 0.15s ease;
+
+  /**
+   * The unsaved-edit bar. It thickens the left border rather than adding one, so
+   * the padding gives back the 2px it takes and the card's contents do not shift
+   * when it appears mid-keystroke. Declared last so it wins over the shorthand
+   * above, including on a $default card that already has an accent border.
+   */
+  ${({ theme, $edited }) => $edited && styled.css`
+      border-left: 3px solid ${theme.colors.accent};
+      padding-left: 14px;
+    `}
 `;
 const MethodBody = styled.div`
   flex: 1;
@@ -2166,6 +2177,10 @@ const FooterActions = styled.div`
   button {
     margin-top: 0;
   }
+
+  > :only-child {
+    margin-left: auto;
+  }
 `;
 const FooterRight = styled.div`
   display: flex;
@@ -2216,6 +2231,7 @@ function ManualMethodCard({
   index,
   value,
   isDefault = false,
+  status,
   trashDisabled = false,
   disabled = false,
   accountError,
@@ -2227,7 +2243,7 @@ function ManualMethodCard({
   name = "default-method"
 }) {
   const radioId = `default-${value.id}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(MethodCard, { $default: isDefault, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(MethodCard, { $default: isDefault, $edited: status === "edited", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       RadioInput,
       {
@@ -2246,7 +2262,8 @@ function ManualMethodCard({
             "Account ",
             index + 1
           ] }),
-          isDefault && /* @__PURE__ */ jsxRuntime.jsx(Badge, { $variant: "filled", children: "Default" })
+          isDefault && /* @__PURE__ */ jsxRuntime.jsx(Badge, { $variant: "filled", children: "Default" }),
+          status === "edited" && /* @__PURE__ */ jsxRuntime.jsx(Badge, { $variant: "info", children: "Unsaved" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           IconButton,
@@ -2350,6 +2367,167 @@ function AchVerificationConsent({
   ] });
 }
 
+const AMBER = "#F59E0B";
+const CYAN = "#22D3EE";
+const GREY = "#9CA3AF";
+const GREEN = "#22C55E";
+const WHITE = "#FFFFFF";
+const INK = "#141312";
+const RED = "#DC2626";
+const ENVIRONMENT_MISMATCH_BORDER = RED;
+const ENVIRONMENT_TAGS = Object.freeze({
+  production: Object.freeze({ label: "PROD", name: "Production", fill: WHITE, ink: INK }),
+  staging: Object.freeze({ label: "STG", name: "Staging", fill: AMBER, ink: INK }),
+  qa: Object.freeze({ label: "QA", name: "QA", fill: CYAN, ink: INK }),
+  development: Object.freeze({ label: "DEV", name: "Development", fill: GREY, ink: INK }),
+  local: Object.freeze({ label: "LOCAL", name: "Local", fill: GREEN, ink: INK })
+});
+const UNKNOWN_ENVIRONMENT_TAG = Object.freeze({
+  label: "?",
+  name: "Unknown",
+  fill: WHITE,
+  ink: INK
+});
+const INVALID_API_TAG = Object.freeze({
+  label: "?",
+  name: "Unknown",
+  fill: RED,
+  ink: WHITE
+});
+const ALIASES = /* @__PURE__ */ new Map([
+  ["production", "production"],
+  ["prod", "production"],
+  ["staging", "staging"],
+  ["stg", "staging"],
+  ["qa", "qa"],
+  ["development", "development"],
+  ["dev", "development"],
+  ["local", "local"]
+]);
+const normalizeEnvironment = (value) => {
+  const key = value?.trim().toLowerCase();
+  return key && ALIASES.get(key) || null;
+};
+const resolveComponentEnvTag = ({
+  bundleEnv,
+  apiEnv
+}) => {
+  const apiValue = apiEnv?.trim();
+  if (!apiValue) return null;
+  const api = normalizeEnvironment(apiValue);
+  if (!api) return { kind: "invalid-api", apiEnv: apiValue };
+  const bundleValue = bundleEnv?.trim();
+  const bundle = normalizeEnvironment(bundleValue);
+  const apiTag = ENVIRONMENT_TAGS[api];
+  if (bundleValue && !bundle) {
+    return { kind: "split", bundleEnv: null, bundle: UNKNOWN_ENVIRONMENT_TAG, api: apiTag };
+  }
+  if (bundle === "local" && api !== "local" && api !== "production") {
+    return { kind: "local", api: apiTag };
+  }
+  if (bundle && bundle !== api) {
+    return { kind: "split", bundleEnv: bundle, bundle: ENVIRONMENT_TAGS[bundle], api: apiTag };
+  }
+  if (api === "production") return null;
+  return { kind: "single", tag: apiTag };
+};
+const environmentDebug = (value) => {
+  const env = normalizeEnvironment(value);
+  if (env) return env;
+  const raw = value?.trim();
+  return raw ? `unrecognised:${raw}` : "unknown";
+};
+const describeComponentEnv = ({ bundleEnv, apiEnv, ref, sha }) => [
+  `bundle=${environmentDebug(bundleEnv)}`,
+  `api=${environmentDebug(apiEnv)}`,
+  `ref=${ref || "unknown"}`,
+  `sha=${sha || "unknown"}`
+].join(" ");
+const environmentTitle = (value) => {
+  const env = normalizeEnvironment(value);
+  if (env) return ENVIRONMENT_TAGS[env].name;
+  const raw = value?.trim();
+  return raw ? `Unrecognised "${raw}"` : "Unknown";
+};
+const describeComponentEnvTitle = ({
+  bundleEnv,
+  apiEnv,
+  ref,
+  sha
+}) => {
+  const build = [ref, sha].filter(Boolean).join(", ");
+  return `Bundle: ${environmentTitle(bundleEnv)}${build ? ` (${build})` : ""} \xB7 API: ${environmentTitle(apiEnv)}`;
+};
+
+const FONT_SIZE = { small: 9, medium: 11 };
+const PADDING_X = { small: 6, medium: 8 };
+const FONT_FAMILY = 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+const BORDER_WIDTH = 1.5;
+const base = (size) => ({
+  display: "inline-flex",
+  alignItems: "stretch",
+  boxSizing: "border-box",
+  fontFamily: FONT_FAMILY,
+  fontSize: FONT_SIZE[size],
+  fontWeight: 800,
+  letterSpacing: "0.1em",
+  lineHeight: 1.4,
+  whiteSpace: "nowrap",
+  borderRadius: 0
+});
+const half = (tag, label, size) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: `2px ${PADDING_X[size]}px`, background: tag.fill, color: tag.ink }, children: label });
+const EnvironmentTag = ({
+  bundleEnv,
+  apiEnv,
+  buildRef,
+  buildSha,
+  size = "small",
+  testId = "oatfi-env-tag"
+}) => {
+  const result = resolveComponentEnvTag({ bundleEnv, apiEnv });
+  if (!result) return null;
+  const title = describeComponentEnvTitle({ bundleEnv, apiEnv, ref: buildRef, sha: buildSha });
+  const chip = (border, children) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      role: "note",
+      "aria-label": `Environment: ${title}`,
+      "data-testid": testId,
+      "data-env-kind": result.kind,
+      title,
+      style: { ...base(size), border: `${BORDER_WIDTH}px solid ${border}` },
+      children
+    }
+  );
+  switch (result.kind) {
+    case "single":
+      return chip(result.tag.fill, half(result.tag, result.tag.label, size));
+    case "local":
+      return chip(
+        ENVIRONMENT_TAGS.local.fill,
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          half(ENVIRONMENT_TAGS.local, ENVIRONMENT_TAGS.local.label, size),
+          half(result.api, `API ${result.api.label}`, size)
+        ] })
+      );
+    case "invalid-api":
+      return chip(
+        INVALID_API_TAG.fill,
+        half(INVALID_API_TAG, `API ${INVALID_API_TAG.label}`, size)
+      );
+    case "split": {
+      const bundleLabel = result.bundleEnv === "local" ? "LOCAL" : `BUNDLE ${result.bundle.label}`;
+      return chip(
+        ENVIRONMENT_MISMATCH_BORDER,
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          half(result.bundle, bundleLabel, size),
+          half(result.api, `API ${result.api.label}`, size)
+        ] })
+      );
+    }
+  }
+};
+
 const PreviewCard = styled.div`
   display: flex;
   gap: 2rem;
@@ -2448,6 +2626,7 @@ exports.DropdownContainer = DropdownContainer;
 exports.DropdownItem = DropdownItem;
 exports.DropdownList = DropdownList;
 exports.EmailInput = EmailInput;
+exports.EnvironmentTag = EnvironmentTag;
 exports.FieldsGrid = FieldsGrid;
 exports.FileInput = FileInput;
 exports.FlexColumnWrapper = FlexColumnWrapper;
@@ -2496,6 +2675,9 @@ exports.UnderwritingStatus = UnderwritingStatus;
 exports.UploadZone = UploadZone;
 exports.buildMuiTheme = buildMuiTheme;
 exports.defaultTheme = defaultTheme;
+exports.describeComponentEnv = describeComponentEnv;
+exports.describeComponentEnvTitle = describeComponentEnvTitle;
 exports.mergeBranding = mergeBranding;
+exports.resolveComponentEnvTag = resolveComponentEnvTag;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.cjs.js.map