bhl-forms 0.0.3 → 0.0.4

package/dist/bhl-forms.es.js

@@ -4391,6 +4391,33 @@ var __spreadValues2 = (a2, b2) => {
   return a2;
 };
 var __spreadProps2 = (a2, b2) => __defProps2(a2, __getOwnPropDescs2(b2));
+function usePrepop() {
+  let prepopSettings = {};
+  const urlParams2 = new URLSearchParams(window.location.search);
+  const prepopPlugin2 = (node) => {
+    if (node.props.type == "form") {
+      prepopSettings = node.props.attrs.prepop || prepopSettings;
+      return true;
+    }
+    if (node.props.type == "group") {
+      return true;
+    }
+    if (prepopSettings) {
+      let value;
+      if (prepopSettings.values) {
+        value = prepopSettings.values[node.name];
+      }
+      if (prepopSettings.fromURL && urlParams2.has(node.name)) {
+        value = urlParams2.get(node.name);
+      }
+      if (value) {
+        console.debug("Setting prepop value for:", node.name, value);
+        node.input(value);
+      }
+    }
+  };
+  return { prepopPlugin: prepopPlugin2, prepopSettings };
+}
 function token$1() {
   return Math.random().toString(36).substring(2, 15);
 }
@@ -5237,42 +5264,134 @@ function clearErrors$1$1(node, context, clearChildErrors = true) {
   }
   return node;
 }
+const postJSON = async (url3, data) => {
+  console.debug("Posting to " + url3);
+  const raw2 = await fetch(url3, {
+    method: "POST",
+    headers: {
+      "Accept": "application/json",
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(data)
+  });
+  if (!raw2.ok) {
+    let error2 = new Error(raw2.statusText);
+    Object.assign(error2, { response: raw2 });
+    throw error2;
+  }
+  const res = await raw2.json();
+  console.debug("POST response:" + JSON.stringify(res, null, 2));
+  return res;
+};
+const redirect = (url3) => {
+  window.location.href = url3;
+};
+const handleSubmitError = (err, node) => {
+  if (err.response) {
+    const code = err.response.status;
+    if (node.props.attrs.errorCodes && code in node.props.attrs.errorCodes) {
+      const value = node.props.attrs.errorCodes[code];
+      let message2 = null;
+      let abort = true;
+      if (typeof value === "string") {
+        message2 = value;
+      } else {
+        if ("message" in value) {
+          message2 = value.message;
+        }
+        if ("abort" in value) {
+          abort = value.abort;
+        }
+      }
+      if (message2) {
+        node.setErrors(message2);
+      }
+      return abort;
+    }
+  }
+  node.setErrors(err.toString());
+  return true;
+};
+const keyValOverlap = (o1, o2, multiple = true) => {
+  let result = null;
+  for (var input2 of Object.keys(o1)) {
+    const value = o1[input2];
+    if (o2[input2] && o2[input2][value]) {
+      if (result !== null && !multiple) {
+        throw Error("Multiple values not allowed");
+      }
+      result = o2[input2][value];
+      break;
+    }
+  }
+  if (result === null) {
+    if ("*" in o2) {
+      return o2["*"];
+    }
+    throw Error("result not found and no default specified");
+  }
+  return result;
+};
+const getKey = (d2, path) => {
+  if (typeof path === "string") {
+    path = path.split(".");
+  }
+  return path.reduce((x2, y) => x2[y], d2);
+};
+const strSubUrl = (str, obj) => str.replace(/\${(.*?)}/g, (x2, g2) => encodeURIComponent(getKey(obj, g2)));
 function useSteps() {
   const activeStep2 = ref("");
   const steps2 = reactive({});
   let defaultOrder2 = [];
-  let stepOrder2 = ref([]);
-  const setStepOrder2 = (order2) => {
-    stepOrder2.value = order2;
-    console.debug("new stepOrder", order2);
+  let stepQueue2 = ref([]);
+  let stepHistory2 = ref([]);
+  const lastItem = (x2) => {
+    return x2.value[x2.value.length - 1];
   };
   const firstStep2 = () => {
-    const stepNames = Object.keys(steps2);
-    return stepNames[0];
+    if (stepHistory2.value.length > 0) {
+      return stepHistory2.value[0];
+    }
+    return stepQueue2.value[0];
   };
   const lastStep2 = () => {
-    return stepOrder2.value[stepOrder2.value.length - 1];
+    if (stepQueue2.value.length > 0) {
+      return lastItem(stepQueue2);
+    }
+    return lastItem(stepHistory2);
   };
-  const currentIndex = () => {
-    console.debug("currentIndex of", activeStep2.value, "is", stepOrder2.value.indexOf(activeStep2.value));
-    return stepOrder2.value.indexOf(activeStep2.value);
+  const enabledSteps2 = () => {
+    return [...stepHistory2.value, ...stepQueue2.value];
   };
-  const setStepIndex = (index2) => {
-    activeStep2.value = stepOrder2.value[index2];
+  const setStepQueue = (value) => {
+    stepQueue2.value = [...value];
   };
-  const setStepName = (name) => {
-    const index2 = stepOrder2.value.indexOf(name);
-    if (index2 < 0) {
-      throw Error("Invalid step name " + name);
+  const queueStep = (stepName, next = false) => {
+    if (next == true) {
+      stepQueue2.value.unshift(stepName);
+    } else {
+      stepQueue2.value.push(stepName);
     }
-    activeStep2.value = stepOrder2.value[index2];
+  };
+  const advanceStep = (stepCount) => {
+    if (stepCount == 1) {
+      const done = stepQueue2.value.shift();
+      stepHistory2.value.push(done);
+      activeStep2.value = stepQueue2.value[0];
+    } else if (stepCount == -1) {
+      const undone = stepHistory2.value.pop();
+      queueStep(undone, true);
+      activeStep2.value = undone;
+    } else {
+      throw Error("Invalid stepCount: " + JSON.stringify(stepCount));
+    }
+  };
+  const getNextStepsFromMap = (node, nextStepMap) => {
+    return keyValOverlap(node.value, nextStepMap, false);
   };
   const setStep2 = ({ nextStep = 1, validate: validate2 = true } = {}) => {
-    console.debug("activeStep", activeStep2.value, "nextStep", nextStep, "validate", validate2);
+    const node = steps2[activeStep2.value].node;
     if (validate2) {
-      const currentStep = activeStep2.value;
-      console.debug("validating", currentStep);
-      const node = steps2[currentStep].node;
       node.walk((n2) => {
         n2.store.set(createMessage$1({
           key: "submitted",
@@ -5284,22 +5403,23 @@ function useSteps() {
         return;
       }
     }
-    if (nextStep instanceof Function) {
-      const nextStep2 = nextStepFunc();
-      setStepName(nextStep2);
-    } else if (typeof nextStep === "string") {
-      setStepName(nextStep);
-    } else if (typeof nextStep === "number") {
-      setStepIndex(nextStep);
+    if (node.props.attrs.nextStepMap) {
+      const nextSteps = getNextStepsFromMap(node, node.props.attrs.nextStepMap);
+      if (nextSteps) {
+        setStepQueue([activeStep2.value, ...nextSteps]);
+      }
+    }
+    if (typeof nextStep === "number") {
+      advanceStep(nextStep);
     } else {
       throw Error("Unexpected value for nextStep: " + nextStep);
     }
   };
   const setNextStep2 = () => {
-    setStep2({ nextStep: currentIndex() + 1 });
+    setStep2({ nextStep: 1 });
   };
   const setPreviousStep2 = () => {
-    setStep2({ nextStep: currentIndex() - 1, validate: false });
+    setStep2({ nextStep: -1, validate: false });
   };
   const stepPlugin2 = (node) => {
     if (node.props.type == "form") {
@@ -5309,16 +5429,17 @@ function useSteps() {
       return true;
     }
     if (node.props.type == "group") {
-      console.debug("Adding step node", node);
-      steps2[node.name] = steps2[node.name] || {};
-      steps2[node.name].node = node;
       if (defaultOrder2.length > 0) {
-        if (stepOrder2.value.length === 0) {
-          stepOrder2.value = defaultOrder2;
+        if (Object.keys(steps2).length === 0) {
+          setStepQueue(defaultOrder2);
         }
       } else {
-        stepOrder2.value.push(node.name);
+        if (!(node.name in steps2)) {
+          queueStep(node.name);
+        }
       }
+      steps2[node.name] = steps2[node.name] || {};
+      steps2[node.name].node = node;
       node.on("created", () => {
         steps2[node.name].valid = toRef(node.context.state, "valid");
       });
@@ -5334,56 +5455,23 @@ function useSteps() {
       return false;
     }
   };
-  return { stepPlugin: stepPlugin2, steps: steps2, stepOrder: stepOrder2, defaultOrder: defaultOrder2, setStepOrder: setStepOrder2, activeStep: activeStep2, firstStep: firstStep2, lastStep: lastStep2, setStep: setStep2, setNextStep: setNextStep2, setPreviousStep: setPreviousStep2 };
+  return { stepPlugin: stepPlugin2, steps: steps2, stepHistory: stepHistory2, stepQueue: stepQueue2, enabledSteps: enabledSteps2, defaultOrder: defaultOrder2, activeStep: activeStep2, firstStep: firstStep2, lastStep: lastStep2, setStep: setStep2, setStepQueue, setNextStep: setNextStep2, setPreviousStep: setPreviousStep2 };
 }
-const postJSON = async (url3, data) => {
-  console.debug("Posting to " + url3);
-  const rawResponse = await fetch(url3, {
-    method: "POST",
-    headers: {
-      "Accept": "application/json",
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify(data)
-  });
-  const res = await rawResponse.json();
-  console.debug("POST response:" + JSON.stringify(res, null, 2));
-  return res;
-};
-const redirect = (url3) => {
-  console.debug("redirect to " + url3);
-  window.location.href = url3;
-};
-const getKey = (d2, path) => {
-  if (typeof path === "string") {
-    path = path.split(".");
-  }
-  return path.reduce((x2, y) => x2[y], d2);
-};
-const strSubUrl = (str, obj) => str.replace(/\${(.*?)}/g, (x2, g2) => encodeURIComponent(getKey(obj, g2)));
-let { stepPlugin, steps, stepOrder, defaultOrder, setStepOrder, activeStep, firstStep, lastStep, setStep, setNextStep, setPreviousStep } = useSteps();
-let prepopValues = {};
-const prepopPlugin = (node) => {
-  if (node.props.type == "form") {
-    prepopValues = node.props.attrs.prepop || prepopValues;
-    return true;
-  }
-  if (node.props.type == "group") {
-    return true;
-  }
-  if (prepopValues[node.name]) {
-    console.debug("Setting prepop value for:", node.name, prepopValues[node.name]);
-    node.input(prepopValues[node.name]);
-  }
-};
+let { prepopPlugin } = usePrepop();
+let { stepPlugin, steps, stepHistory, stepQueue, enabledSteps, defaultOrder, activeStep, firstStep, lastStep, setStep, setNextStep, setPreviousStep } = useSteps();
+const urlParams = new URLSearchParams(window.location.search);
 const dataDefaults = {
   steps,
-  stepOrder,
   activeStep,
+  stepHistory,
+  stepQueue,
   plugins: [
     stepPlugin,
     prepopPlugin
   ],
+  urlParam: (name, backup = null) => {
+    return urlParams.get(name) || backup;
+  },
   firstStep: () => {
     return firstStep();
   },
@@ -5397,37 +5485,53 @@ const dataDefaults = {
     setPreviousStep();
   },
   setStep: (nextStep, validate2) => () => {
-    console.debug("setStep:", nextStep, validate2);
     setStep({ nextStep, validate: validate2 });
   },
-  setStepOrder: (target) => () => {
-    setStepOrder(target);
-  },
-  redirect: (target) => () => {
-    redirect("https://www.google.com");
-  },
-  log: (target) => () => {
-    console.log("target:", target);
-  },
   stepIsValid: (stepName) => {
     return steps[stepName].valid && steps[stepName].errorCount === 0;
   },
   stepIsEnabled: (stepName) => {
-    if (!stepOrder.value.length) {
+    if (!enabledSteps().length) {
       return true;
     }
-    return stepOrder.value.indexOf(stepName) > -1;
+    return enabledSteps().indexOf(stepName) > -1;
   },
-  submit: (postUrl, redirectUrl = null) => async (formData, node) => {
+  inputIsEnabled: (node, key, inputName) => {
+    if (!node || !key || !node.attrs.inputMap) {
+      return true;
+    }
+    if (node.attrs.inputMap[key].indexOf(inputName) < 0) {
+      return false;
+    }
+    return true;
+  },
+  getRedirect: (formData, node) => {
+    if (!node || !node.props.attrs.redirectMap) {
+      return;
+    }
+    return keyValOverlap(formData, node.props.attrs.redirectMap, false);
+  },
+  submit: (postUrl, prepData2 = null, redirectUrl = null) => async (formData, node) => {
+    if (prepData2 && prepData2 != "null") {
+      if (!(prepData2 instanceof Function)) {
+        throw "prepData must be a function";
+      }
+      formData = prepData2(formData);
+    }
+    let abort = false;
     try {
       const res = await postJSON(postUrl, formData);
       node.clearErrors();
-      alert("Submitted successfully!");
     } catch (err) {
-      console.error(err);
-      node.setErrors(err.formErrors, err.fieldErrors);
+      abort = handleSubmitError(err, node);
+    }
+    if (abort) {
+      return;
     }
-    if (redirectUrl) {
+    if (redirectUrl instanceof Function) {
+      redirectUrl = redirectUrl(formData, node);
+    }
+    if (redirectUrl && redirectUrl !== "null") {
       if (formData) {
         redirectUrl = strSubUrl(redirectUrl, formData);
       }
@@ -5445,7 +5549,14 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   },
   setup(__props) {
     const props2 = __props;
-    const mergedData = reactive(Object.assign({}, dataDefaults, props2.data));
+    const meta = {};
+    for (var node of props2.schema) {
+      if (!node.type || node.type !== "meta") {
+        continue;
+      }
+      Object.assign(meta, node.data || {});
+    }
+    const mergedData = reactive(Object.assign({}, dataDefaults, { meta }, props2.data));
     console.debug("FormKitSchema data:", mergedData);
     return (_ctx, _cache) => {
       const _component_FormKitSchema = resolveComponent("FormKitSchema");
@@ -10509,6 +10620,58 @@ function G(t2, o2) {
 function F(t2, o2, e2) {
   return { location: t2, current: o2, previous: e2 };
 }
+const EXPERIMENT_KEY = "__form_experiments";
+function chooseVariant(exp) {
+  let variant = null, active = {}, fromCache = false;
+  active = C(EXPERIMENT_KEY) || {};
+  if (!exp.noCache && active && active[exp.name]) {
+    variant = active[exp.name];
+    fromCache = true;
+  } else {
+    const vs = exp.variants;
+    variant = vs[Math.floor(Math.random() * vs.length)];
+    active[exp.name] = variant;
+    L(EXPERIMENT_KEY, active);
+  }
+  console.debug("Chose variant:", variant, "fromCache:", fromCache);
+  return { variant, fromCache };
+}
+async function schemaFromUrl(url3) {
+  console.debug("Fetching:", url3);
+  const res = await fetch(url3);
+  schemaObj = await res.json();
+  console.debug("Got schema:", schemaObj);
+  return schemaObj;
+}
+const flattenObj = (obj) => {
+  const flattened = {};
+  Object.keys(obj).forEach((key) => {
+    const value = obj[key];
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      Object.assign(flattened, flattenObj(value));
+    } else {
+      flattened[key] = value;
+    }
+  });
+  return flattened;
+};
+function prepData(formData) {
+  const props2 = flattenObj(formData);
+  props2.vid = "";
+  props2.sid = "";
+  props2.cid = "";
+  if (typeof window.zar !== "undefined") {
+    props2.vid = window.zar.getVID();
+    props2.sid = window.zar.getSID();
+    props2.cid = window.zar.getCID();
+  }
+  const data = {
+    post_source: window.location.hostname,
+    vertical: props2.vertical,
+    properties: props2
+  };
+  return data;
+}
 const textClassification = {
   label: "block mb-1 font-bold text-sm formkit-invalid:text-red-500",
   inner: `
@@ -10532,7 +10695,7 @@ const boxClassification = {
 };
 const buttonClassification = {
   wrapper: "mb-1",
-  input: "bg-blue-500 hover:bg-blue-700 text-white text-sm font-normal py-3 px-5 rounded"
+  input: "bg-red-500 hover:bg-blue-700 text-white text-lg font-normal py-3 px-5 rounded"
 };
 var theme = {
   global: {
@@ -10581,48 +10744,31 @@ var theme = {
   week: textClassification
 };
 var index = "";
-const EXPERIMENT_KEY = "__form_experiments";
 const classes = generateClasses(theme);
 const forms = window.bhlForms || [];
 const apps = {};
-function chooseVariant(exp) {
-  let variant = null, active = {}, fromCache = false;
-  active = C(EXPERIMENT_KEY) || {};
-  if (!exp.noCache && active && active[exp.name]) {
-    variant = active[exp.name];
-    fromCache = true;
-  } else {
-    const vs = exp.variants;
-    variant = vs[Math.floor(Math.random() * vs.length)];
-    active[exp.name] = variant;
-    L(EXPERIMENT_KEY, active);
-  }
-  console.debug("Chose variant:", variant, "fromCache:", fromCache);
-  return { variant, fromCache };
-}
 forms.forEach(async function(form2) {
   console.debug("Mounting form:", form2);
-  if (form2.schema && form2.schemaExperiment) {
-    throw Error("Only one of schema and schemaExperiment allowed");
+  if (form2.schema && form2.experiment) {
+    throw Error("Only one of schema and experiment allowed");
   }
   let schema;
   if (form2.schema) {
     schema = form2.schema;
-  } else if (form2.schemaExperiment) {
-    const res = chooseVariant(form2.schemaExperiment);
+  } else if (form2.experiment) {
+    const res = chooseVariant(form2.experiment);
     schema = res.variant.schema;
     if (form2.experimentCallback) {
       experimentCallback(form2, res.variant, res.fromCache);
     }
   }
-  let schemaObj = schema;
+  let schemaObj2 = schema;
   if (typeof schema === "string") {
-    console.debug("Fetching:", schema);
-    const res = await fetch(schema);
-    schemaObj = await res.json();
-    console.debug("Got schema:", schemaObj);
+    schemaObj2 = await schemaFromUrl(schema);
   }
-  const app = createApp(_sfc_main, { schema: schemaObj }).use(plugin$1, defaultConfig({
+  const data = form2.data || {};
+  data.prepData = data.prepData || prepData;
+  const app = createApp(_sfc_main, { schema: schemaObj2, data }).use(plugin$1, defaultConfig({
     config: {
       classes
     }