@stamprally/admin-ui 0.9.0 → 0.10.0

package/dist/index.js

@@ -1,8 +1,11 @@
-import { resolveLocalizedText } from '@stamprally/core';
+import { resolveLocalizedText, updateLocalizedField, safeParseAdminConfig } from '@stamprally/core';
 import { useState } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/index.tsx
+function text(dictionary, locale, key, fallback) {
+  return dictionary?.[locale]?.[key] ?? fallback;
+}
 var condition = () => ({ type: "passcode", code: "" });
 var newSpot = (index) => ({
   id: `spot-${index + 1}`,
@@ -17,21 +20,372 @@ var newReward = (index) => ({
   redemptionMethod: "server_claim",
   requiredStampCount: index + 1
 });
-function AdminRallyEditor({
-  config,
+function move(items, index, direction) {
+  const target = index + direction;
+  if (target < 0 || target >= items.length) return items;
+  const next = [...items];
+  const [item] = next.splice(index, 1);
+  if (item !== void 0) next.splice(target, 0, item);
+  return next;
+}
+function ConditionEditor({
+  condition: condition2,
+  onChange,
+  onRemove,
+  locale,
+  dictionary
+}) {
+  const activeLocale = locale ?? "en";
+  const field = (key, fallback) => text(dictionary, activeLocale, key, fallback);
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsx("legend", { children: field("condition", "Condition") }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("conditionType", "Type"),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: condition2.type,
+          onChange: (event) => {
+            const type = event.target.value;
+            onChange(
+              type === "qr" ? { type, secretToken: "" } : type === "passcode" ? { type, code: "", caseSensitive: false } : type === "gps" ? { type, latitude: 0, longitude: 0, radiusMeters: 100 } : type === "nfc" ? { type, tagId: "" } : { type, validatorName: "" }
+            );
+          },
+          children: ["qr", "passcode", "gps", "nfc", "custom"].map((type) => /* @__PURE__ */ jsx("option", { value: type, children: field(`condition.${type}`, type.toUpperCase()) }, type))
+        }
+      )
+    ] }),
+    condition2.type === "qr" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        field("secretToken", "QR token"),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: condition2.secretToken,
+            onChange: (event) => onChange({ ...condition2, secretToken: event.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        field("qrEntryUrl", "QR entry URL"),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: condition2.qrEntryUrl ?? "",
+            onChange: (event) => onChange({ ...condition2, qrEntryUrl: event.target.value })
+          }
+        )
+      ] })
+    ] }),
+    condition2.type === "passcode" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        field("passcode", "Passcode"),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: condition2.code,
+            onChange: (event) => onChange({ ...condition2, code: event.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: condition2.caseSensitive ?? false,
+            onChange: (event) => onChange({ ...condition2, caseSensitive: event.target.checked })
+          }
+        ),
+        field("caseSensitive", "Case sensitive")
+      ] })
+    ] }),
+    condition2.type === "gps" && /* @__PURE__ */ jsx("div", { children: ["latitude", "longitude", "radiusMeters"].map((key) => /* @__PURE__ */ jsxs("label", { children: [
+      field(key, key),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          value: condition2[key],
+          onChange: (event) => onChange({ ...condition2, [key]: Number(event.target.value) })
+        }
+      )
+    ] }, key)) }),
+    condition2.type === "nfc" && /* @__PURE__ */ jsxs("label", { children: [
+      field("tagId", "NFC tag ID"),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: condition2.tagId,
+          onChange: (event) => onChange({ ...condition2, tagId: event.target.value })
+        }
+      )
+    ] }),
+    condition2.type === "custom" && /* @__PURE__ */ jsxs("label", { children: [
+      field("validatorName", "Validator name"),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: condition2.validatorName,
+          onChange: (event) => onChange({ ...condition2, validatorName: event.target.value })
+        }
+      )
+    ] }),
+    onRemove !== void 0 && /* @__PURE__ */ jsx("button", { type: "button", onClick: onRemove, children: field("removeCondition", "Remove condition") })
+  ] });
+}
+function SpotItemForm({
+  spot,
+  onChange,
+  onRemove,
+  locale,
+  dictionary
+}) {
+  const activeLocale = locale ?? "en";
+  const field = (key, fallback) => text(dictionary, activeLocale, key, fallback);
+  const update = (patch) => onChange({ ...spot, ...patch });
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsx("legend", { children: resolveLocalizedText(spot.name, activeLocale) }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("spotName", "Spot name"),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: resolveLocalizedText(spot.name, activeLocale),
+          onChange: (event) => update({ name: updateLocalizedField(spot.name, activeLocale, event.target.value) })
+        }
+      )
+    ] }),
+    ["imageUrl", "iconUrl", "redirectUrlAfterClaim"].map((key) => /* @__PURE__ */ jsxs("label", { children: [
+      field(key, key),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: spot[key] ?? "",
+          onChange: (event) => update({ [key]: event.target.value })
+        }
+      )
+    ] }, key)),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("prerequisites", "Prerequisite spots"),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: spot.prerequisites?.join(", ") ?? "",
+          onChange: (event) => update({
+            prerequisites: event.target.value.split(",").map((item) => item.trim()).filter(Boolean)
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("externalReferences", "External references"),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: JSON.stringify(spot.externalReferences ?? [], null, 2),
+          onChange: (event) => {
+            try {
+              const parsed = JSON.parse(event.target.value);
+              if (Array.isArray(parsed)) update({ externalReferences: parsed });
+            } catch {
+            }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("metadata", "Metadata"),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: JSON.stringify(spot.metadata ?? {}, null, 2),
+          onChange: (event) => {
+            try {
+              const parsed = JSON.parse(event.target.value);
+              if (parsed !== null && typeof parsed === "object" && !Array.isArray(parsed))
+                update({ metadata: parsed });
+            } catch {
+            }
+          }
+        }
+      )
+    ] }),
+    spot.conditions.map((item, index) => /* @__PURE__ */ jsx(
+      ConditionEditor,
+      {
+        condition: item,
+        locale: activeLocale,
+        ...dictionary === void 0 ? {} : { dictionary },
+        onChange: (next) => update({
+          conditions: spot.conditions.map(
+            (current, itemIndex) => itemIndex === index ? next : current
+          )
+        }),
+        ...spot.conditions.length <= 1 ? {} : {
+          onRemove: () => update({
+            conditions: spot.conditions.filter((_, itemIndex) => itemIndex !== index)
+          })
+        }
+      },
+      `${spot.id}-condition-${JSON.stringify(item)}`
+    )),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => update({ conditions: [...spot.conditions, condition()] }),
+        children: field("addCondition", "Add condition")
+      }
+    ),
+    onRemove !== void 0 && /* @__PURE__ */ jsx("button", { type: "button", onClick: onRemove, children: field("removeSpot", "Remove spot") })
+  ] });
+}
+function RewardItemForm({
+  reward,
+  locale,
+  dictionary,
   onChange,
-  locale = "en"
+  onRemove
 }) {
+  const field = (key, fallback) => text(dictionary, locale, key, fallback);
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsx("legend", { children: resolveLocalizedText(reward.title, locale) }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("rewardTitle", "Reward title"),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: resolveLocalizedText(reward.title, locale),
+          onChange: (event) => onChange({
+            ...reward,
+            title: updateLocalizedField(reward.title, locale, event.target.value)
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("requiredSpotCount", "Required spot count"),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          value: reward.requiredStampCount,
+          onChange: (event) => onChange({ ...reward, requiredStampCount: Number(event.target.value) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("rewardType", "Reward type"),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: reward.type,
+          onChange: (event) => onChange({ ...reward, type: event.target.value }),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "digital", children: field("rewardType.digital", "Digital") }),
+            /* @__PURE__ */ jsx("option", { value: "in_person", children: field("rewardType.inPerson", "In person") })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("redemptionMethod", "Redemption method"),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: reward.redemptionMethod,
+          onChange: (event) => onChange({
+            ...reward,
+            redemptionMethod: event.target.value
+          }),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "server_claim", children: field("redemption.serverClaim", "Server claim") }),
+            /* @__PURE__ */ jsx("option", { value: "manual_slide", children: field("redemption.manualSlide", "Manual slide") }),
+            /* @__PURE__ */ jsx("option", { value: "staff_passcode", children: field("redemption.staffPasscode", "Staff passcode") }),
+            /* @__PURE__ */ jsx("option", { value: "view_only", children: field("redemption.viewOnly", "View only") })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("unlockConditions", "Unlock conditions"),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: JSON.stringify(reward.conditions ?? [], null, 2),
+          onChange: (event) => {
+            try {
+              const parsed = JSON.parse(event.target.value);
+              if (Array.isArray(parsed))
+                onChange({ ...reward, conditions: parsed });
+            } catch {
+            }
+          }
+        }
+      )
+    ] }),
+    ["stockLimit", "userClaimLimit"].map((key) => /* @__PURE__ */ jsxs("label", { children: [
+      field(key, key),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          value: reward[key] ?? "",
+          onChange: (event) => {
+            if (event.target.value === "") {
+              const { [key]: _removed, ...withoutLimit } = reward;
+              onChange(withoutLimit);
+            } else onChange({ ...reward, [key]: Number(event.target.value) });
+          }
+        }
+      )
+    ] }, key)),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("staffPasscode", "Staff passcode"),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: reward.staffPasscode ?? "",
+          onChange: (event) => onChange({ ...reward, staffPasscode: event.target.value })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("validUntil", "Valid until"),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "datetime-local",
+          value: reward.validUntil?.slice(0, 16) ?? "",
+          onChange: (event) => {
+            if (event.target.value === "") {
+              const { validUntil: _removed, ...withoutDate } = reward;
+              onChange(withoutDate);
+            } else onChange({ ...reward, validUntil: new Date(event.target.value).toISOString() });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: onRemove, children: field("removeReward", "Remove reward") })
+  ] });
+}
+function AdminRallyEditor({ config, onChange, locale, dictionary }) {
+  const activeLocale = locale ?? "en";
+  const field = (key, fallback) => text(dictionary, activeLocale, key, fallback);
   const update = (next) => onChange({ ...config, ...next });
-  return /* @__PURE__ */ jsxs("section", { "aria-label": "Rally editor", children: [
-    /* @__PURE__ */ jsx("h1", { children: resolveLocalizedText(config.title, locale) }),
+  const updateSpots = (spots) => update({ spots: spots.map((spot, index) => ({ ...spot, orderIndex: index })) });
+  return /* @__PURE__ */ jsxs("section", { "aria-label": field("rallyEditor", "Rally editor"), children: [
+    /* @__PURE__ */ jsx("h1", { children: resolveLocalizedText(config.title, activeLocale) }),
     /* @__PURE__ */ jsxs("label", { children: [
-      "Title",
+      field("title", "Title"),
       /* @__PURE__ */ jsx(
         "input",
         {
-          value: resolveLocalizedText(config.title, locale),
-          onChange: (event) => update({ title: event.target.value })
+          value: resolveLocalizedText(config.title, activeLocale),
+          onChange: (event) => update({ title: updateLocalizedField(config.title, activeLocale, event.target.value) })
         }
       )
     ] }),
@@ -39,72 +393,134 @@ function AdminRallyEditor({
       "button",
       {
         type: "button",
-        onClick: () => update({ spots: [...config.spots, newSpot(config.spots.length)] }),
-        children: "Add spot"
+        onClick: () => updateSpots([...config.spots, newSpot(config.spots.length)]),
+        children: field("addSpot", "Add spot")
       }
     ),
+    /* @__PURE__ */ jsx("div", { children: config.spots.map((spot, index) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        SpotItemForm,
+        {
+          spot,
+          locale: activeLocale,
+          ...dictionary === void 0 ? {} : { dictionary },
+          onChange: (next) => updateSpots(
+            config.spots.map((current) => current.id === spot.id ? next : current)
+          ),
+          onRemove: () => updateSpots(config.spots.filter((current) => current.id !== spot.id))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: index === 0,
+          onClick: () => updateSpots(move(config.spots, index, -1)),
+          children: field("moveUp", "Move up")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: index === config.spots.length - 1,
+          onClick: () => updateSpots(move(config.spots, index, 1)),
+          children: field("moveDown", "Move down")
+        }
+      )
+    ] }, spot.id)) }),
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: () => update({ rewards: [...config.rewards, newReward(config.rewards.length)] }),
-        children: "Add reward"
+        children: field("addReward", "Add reward")
       }
     ),
-    /* @__PURE__ */ jsx("ul", { children: config.spots.map((spot) => /* @__PURE__ */ jsx("li", { children: resolveLocalizedText(spot.name, locale) }, spot.id)) })
+    /* @__PURE__ */ jsx("div", { children: config.rewards.map((reward) => /* @__PURE__ */ jsx(
+      RewardItemForm,
+      {
+        reward,
+        locale: activeLocale,
+        ...dictionary === void 0 ? {} : { dictionary },
+        onChange: (next) => update({
+          rewards: config.rewards.map(
+            (current) => current.id === reward.id ? next : current
+          )
+        }),
+        onRemove: () => update({ rewards: config.rewards.filter((current) => current.id !== reward.id) })
+      },
+      reward.id
+    )) })
   ] });
 }
 var RallyEditor = AdminRallyEditor;
-function SpotItemForm({
-  spot,
-  onChange
+function GeneralSettingsForm({
+  config,
+  onChange,
+  locale,
+  dictionary
 }) {
+  const activeLocale = locale ?? "en";
   return /* @__PURE__ */ jsxs("label", { children: [
-    "Spot name",
+    text(dictionary, activeLocale, "title", "Rally title"),
     /* @__PURE__ */ jsx(
       "input",
       {
-        value: resolveLocalizedText(spot.name, "en"),
-        onChange: (event) => onChange({ ...spot, name: event.target.value })
+        value: resolveLocalizedText(config.title, activeLocale),
+        onChange: (event) => onChange({
+          ...config,
+          title: updateLocalizedField(config.title, activeLocale, event.target.value)
+        })
       }
     )
   ] });
 }
-function GeneralSettingsForm({ config, onChange }) {
-  return /* @__PURE__ */ jsxs("label", { children: [
-    "Rally title",
+function JsonConfigIO({ config, onImport, locale, dictionary }) {
+  const activeLocale = locale ?? "en";
+  const [value, setValue] = useState(() => JSON.stringify(config, null, 2));
+  const [errors, setErrors] = useState([]);
+  const field = (key, fallback) => text(dictionary, activeLocale, key, fallback);
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
-      "input",
+      "textarea",
       {
-        value: resolveLocalizedText(config.title, "en"),
-        onChange: (event) => onChange({ ...config, title: event.target.value })
+        "aria-label": field("jsonConfig", "JSON configuration"),
+        value,
+        onChange: (event) => {
+          setValue(event.target.value);
+          setErrors([]);
+        }
       }
-    )
-  ] });
-}
-function JsonConfigIO({ config, onImport }) {
-  const [value, setValue] = useState(() => JSON.stringify(config, null, 2));
-  const parse = (event) => {
-    setValue(event.target.value);
-  };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("textarea", { value, onChange: parse }),
+    ),
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: () => {
           try {
-            onImport(JSON.parse(value));
+            const result = safeParseAdminConfig(JSON.parse(value));
+            if (!result.success) {
+              setErrors(result.errors);
+              return;
+            }
+            onImport(result.data);
+            setErrors([]);
           } catch {
+            setErrors([{ path: "$", message: field("invalidJson", "Invalid JSON.") }]);
           }
         },
-        children: "Import"
+        children: field("import", "Import")
       }
-    )
+    ),
+    errors.length > 0 && /* @__PURE__ */ jsx("ul", { role: "alert", children: errors.map((error) => /* @__PURE__ */ jsxs("li", { children: [
+      error.path,
+      ": ",
+      error.message
+    ] }, `${error.path}-${error.message}`)) })
   ] });
 }
 
-export { AdminRallyEditor, GeneralSettingsForm, JsonConfigIO, RallyEditor, SpotItemForm };
+export { AdminRallyEditor, ConditionEditor, GeneralSettingsForm, JsonConfigIO, RallyEditor, SpotItemForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map