@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/logic/sections/ContactFormSection.js

@@ -0,0 +1,294 @@
+import { SECTION_WIDTHS } from "#osi/composables/useSectionShell";
+import { buttonClasses, buttonVars } from "#osi/composables/useButtonStyle";
+import { shadow } from "#osi/theme/controls";
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, align, customClass, heading } =
+    useSectionShell(() => props.section);
+  const { form, isLoading, submitContact, autofillUser } = useContactForm();
+  const { showApiError } = useApiErrorToast();
+
+  const PAYLOAD_KEYS = ["first_name", "last_name", "email", "subject", "message"];
+
+  const DEFAULT_FIELDS = [
+    { key: "first_name", label: "First name", type: "TEXT", width: "HALF", required: true },
+    { key: "last_name", label: "Last name", type: "TEXT", width: "HALF", required: true },
+    { key: "email", label: "Email", type: "EMAIL", width: "FULL", required: true },
+    { key: "subject", label: "Subject", type: "TEXT", width: "FULL", required: false },
+    { key: "message", label: "Message", type: "TEXTAREA", width: "FULL", required: true },
+  ];
+
+  const fields = computed(() => {
+    const blocks = props.section.blocks ?? [];
+    if (!blocks.length) return DEFAULT_FIELDS;
+
+    return blocks.map((block, i) => ({
+      key: block.settings?.KEY || `custom_${i}`,
+      blockKey: block.key,
+      label: t(block.settings?.LABEL) || block.settings?.KEY || "Field",
+      placeholder: t(block.settings?.PLACEHOLDER),
+      type: block.settings?.FIELD_TYPE || "TEXT",
+      width: block.settings?.WIDTH || "FULL",
+      required: !!block.settings?.REQUIRED,
+      // OPTIONS has always been in the schema; nothing rendered it until now.
+      options: String(block.settings?.OPTIONS ?? "")
+        .split(",")
+        .map((option) => option.trim())
+        .filter(Boolean),
+    }));
+  });
+
+  // Extra fields live here, not on `form` — useContactForm's state is shared and
+  // shaped by the API.
+  const extras = ref({});
+  const sent = ref(false);
+  const errors = ref({});
+
+  // Local, synchronous guard against double submission. Doesn't rely on
+  // useContactForm's `isLoading` timing — that's owned by the composable and
+  // there's no guarantee it flips to true before a second call to submit()
+  // can pass its own check, e.g. on a fast double-click.
+  const submitting = ref(false);
+
+  // PHONE is the FormFieldType schema actually stores; TEL is accepted too in
+  // case any existing block settings still carry the old (incorrect) token.
+  const isPhoneField = (type) => type === "PHONE" || type === "TEL";
+
+  function valueOf(field) {
+    return PAYLOAD_KEYS.includes(field.key)
+      ? form.value[field.key]
+      : (extras.value[field.key] ?? "");
+  }
+
+  function setValue(field, value) {
+    if (PAYLOAD_KEYS.includes(field.key)) form.value[field.key] = value;
+    else extras.value[field.key] = value;
+  }
+
+  const inputType = (type) =>
+    ({ EMAIL: "email", NUMBER: "number", DATE: "date" })[type] ?? "text";
+
+  function validate() {
+    const next = {};
+    for (const field of fields.value) {
+      const value = String(valueOf(field) ?? "").trim();
+      if (field.required && !value) next[field.key] = `${field.label} is required.`;
+      else if (field.type === "EMAIL" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
+        next[field.key] = "Enter a valid email address.";
+    }
+    errors.value = next;
+    return Object.keys(next).length === 0;
+  }
+
+  async function submit() {
+    if (submitting.value || isLoading.value || !validate()) return;
+    submitting.value = true;
+
+    try {
+      // Append unmapped answers to the message so they reach the merchant.
+      const appended = Object.entries(extras.value)
+        .filter(([, value]) => String(value ?? "").trim())
+        .map(([key, value]) => {
+          const field = fields.value.find((f) => f.key === key);
+          return `${field?.label ?? key}: ${value}`;
+        });
+
+      const original = form.value.message;
+      if (appended.length) {
+        form.value.message = [original, "", ...appended].filter(Boolean).join("\n");
+      }
+
+      try {
+        await submitContact();
+        sent.value = true;
+        extras.value = {};
+      } catch (error) {
+        // useContactForm already toasts a generic line; this surfaces field errors.
+        showApiError(error, "Couldn't send your message.");
+        form.value.message = original;
+      }
+    } finally {
+      submitting.value = false;
+    }
+  }
+
+  onMounted(() => autofillUser());
+
+  /* ------------------------------------------------------------- appearance */
+
+  function num(value, fallback) {
+    const n = Number(value);
+    return Number.isFinite(n) ? n : fallback;
+  }
+
+  /** Empty string, null and undefined mean "not set" — 0 does not. */
+  function has(value) {
+    return value !== undefined && value !== null && value !== "";
+  }
+
+  /** Strips absent keys so an unset setting emits no CSS variable at all. */
+  function compact(object) {
+    return Object.fromEntries(Object.entries(object).filter(([, v]) => v !== undefined));
+  }
+
+  function pxVar(value) {
+    return has(value) && Number.isFinite(Number(value)) ? `${Number(value)}px` : undefined;
+  }
+
+  /** Picks value when it's one of allowed, else the first entry as the default. */
+  function oneOf(value, allowed) {
+    return allowed.includes(value) ? value : allowed[0];
+  }
+
+  const TEXT_TRANSFORMS = {
+    NONE: "none",
+    UPPERCASE: "uppercase",
+    LOWERCASE: "lowercase",
+    CAPITALIZE: "capitalize",
+  };
+  const FONT_WEIGHTS = { LIGHT: 300, REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+  const FLEX_ALIGNMENTS = { LEFT: "flex-start", CENTER: "center", RIGHT: "flex-end" };
+  const MARGINS = {
+    LEFT: { marginInline: "0 auto" },
+    CENTER: { marginInline: "auto" },
+    RIGHT: { marginInline: "auto 0" },
+  };
+
+  // Empty section settings follow the theme's Inputs group.
+  const { controls } = useThemeControls();
+
+  /** Old CONTACT_FORM ids -> the unified INPUT_* ids. */
+  const LEGACY_KEYS = {
+    INPUT_LABEL_STYLE: ["LABEL_STYLE"],
+    INPUT_SHOW_REQUIRED_MARK: ["SHOW_REQUIRED_MARK"],
+    INPUT_GAP: ["FIELD_GAP"],
+    INPUT_PLACEHOLDER_COLOR: ["PLACEHOLDER_COLOR"],
+    INPUT_ERROR_COLOR: ["ERROR_COLOR"],
+    INPUT_TEXT_COLOR: ["FIELD_TEXT_COLOR"],
+    INPUT_FONT_SIZE: ["FIELD_TEXT_SIZE"],
+    INPUT_FONT_SIZE_MOBILE: ["FIELD_TEXT_SIZE_MOBILE"],
+    INPUT_LABEL_SIZE: ["FIELD_LABEL_SIZE"],
+    INPUT_LABEL_WEIGHT: ["FIELD_LABEL_WEIGHT"],
+    INPUT_LABEL_TRANSFORM: ["FIELD_LABEL_TRANSFORM"],
+    INPUT_LABEL_LETTER_SPACING: ["FIELD_LABEL_LETTER_SPACING"],
+    INPUT_LABEL_COLOR: ["FIELD_LABEL_COLOR"],
+  };
+
+  /** A field-styling setting: the unified id, else its pre-unification id. */
+  function field(key) {
+    for (const k of [key, ...(LEGACY_KEYS[key] ?? [])]) {
+      if (has(s.value[k])) return s.value[k];
+    }
+    return undefined;
+  }
+  const pickOr = (value, allowed, fallback) => (allowed.includes(value) ? value : fallback);
+  const labelStyle = computed(() =>
+    pickOr(field("INPUT_LABEL_STYLE"), ["ABOVE", "FLOATING", "PLACEHOLDER"], controls.value.labelStyle)
+  );
+  const inputStyle = computed(() =>
+    pickOr(s.value.INPUT_STYLE, ["OUTLINE", "FILLED", "UNDERLINE"], controls.value.inputStyle)
+  );
+  const floating = computed(() => labelStyle.value === "FLOATING");
+  const showRequiredMark = computed(() => {
+    const value = field("INPUT_SHOW_REQUIRED_MARK");
+    return has(value) ? value !== false && value !== "false" : controls.value.showRequiredMark;
+  });
+
+  /** PhoneNumInput's own variant vocabulary; '' is its default boxed look. */
+  const phoneVariant = computed(() => (inputStyle.value === "UNDERLINE" ? "underline" : ""));
+
+  /**
+   * A floating label needs to know whether the field is empty, which CSS reads
+   * from :placeholder-shown — so the placeholder has to be a single space, not
+   * the merchant's text. In the other two modes the placeholder behaves normally.
+   */
+  function placeholderFor(field) {
+    if (floating.value) return " ";
+    if (labelStyle.value === "PLACEHOLDER") return field.placeholder || field.label;
+    return field.placeholder;
+  }
+
+  /** Selects and dates never report :placeholder-shown, so they float always. */
+  const alwaysFilled = (field) => field.type === "SELECT" || field.type === "DATE";
+
+  const outerMaxWidth = computed(
+    () => SECTION_WIDTHS[s.value.OUTER_CONTAINER] ?? SECTION_WIDTHS.FULL
+  );
+
+  const styleVars = computed(() =>
+    compact({
+      "--osi-cf-outer-max-w": outerMaxWidth.value,
+      "--osi-cf-outer-my": `${num(s.value.OUTER_MARGIN_Y, 0)}px`,
+      // Inline margin can't be a real margin here: margin-inline:auto is what
+      // centres a constrained section, and a length on the same axis kills it.
+      // It shrinks the width instead, which auto then re-centres.
+      "--osi-cf-outer-mx": `${num(s.value.OUTER_MARGIN_X, 0)}px`,
+
+      // Field styling — same ids and meaning as the theme's Inputs group.
+      // Anything unset emits nothing, so the CSS falls through to --osi-input-*.
+      "--osi-cf-gap": pxVar(field("INPUT_GAP")),
+
+      "--osi-cf-pad-y": pxVar(field("INPUT_PADDING_Y")),
+      "--osi-cf-pad-x": pxVar(field("INPUT_PADDING_X")),
+      "--osi-cf-pad-y-mobile": pxVar(field("INPUT_PADDING_Y_MOBILE")),
+      "--osi-cf-pad-x-mobile": pxVar(field("INPUT_PADDING_X_MOBILE")),
+
+      "--osi-cf-radius": pxVar(field("INPUT_RADIUS")),
+      "--osi-cf-border-w": pxVar(field("INPUT_BORDER_WIDTH")),
+      "--osi-cf-shadow": has(field("INPUT_SHADOW"))
+        ? shadow(field("INPUT_SHADOW"), field("INPUT_SHADOW_COLOR"))
+        : undefined,
+
+      "--osi-cf-text-fs": pxVar(field("INPUT_FONT_SIZE")),
+      "--osi-cf-text-fs-mobile": pxVar(field("INPUT_FONT_SIZE_MOBILE")),
+
+      "--osi-cf-input-bg": field("INPUT_BG_COLOR") || undefined,
+      "--osi-cf-text": field("INPUT_TEXT_COLOR") || undefined,
+      "--osi-cf-border": field("INPUT_BORDER_COLOR") || undefined,
+      "--osi-cf-focus": field("INPUT_FOCUS_COLOR") || undefined,
+      "--osi-cf-placeholder": field("INPUT_PLACEHOLDER_COLOR") || undefined,
+      "--osi-cf-error": field("INPUT_ERROR_COLOR") || undefined,
+
+      "--osi-cf-label-fs": pxVar(field("INPUT_LABEL_SIZE")),
+      "--osi-cf-label-fw": has(field("INPUT_LABEL_WEIGHT"))
+        ? FONT_WEIGHTS[field("INPUT_LABEL_WEIGHT")] ?? num(field("INPUT_LABEL_WEIGHT"), 500)
+        : undefined,
+      "--osi-cf-label-tt": TEXT_TRANSFORMS[field("INPUT_LABEL_TRANSFORM")],
+      "--osi-cf-label-ls": has(field("INPUT_LABEL_LETTER_SPACING"))
+        ? `${num(field("INPUT_LABEL_LETTER_SPACING"), 0) / 100}em`
+        : undefined,
+      "--osi-cf-label-color": field("INPUT_LABEL_COLOR") || undefined,
+    })
+  );
+
+  const sectionStyle = computed(() => ({ ...shellStyle.value, ...styleVars.value }));
+
+  // FORM_MAX_WIDTH unset means "follow the section width" — the old stylesheet
+  // pinned 40rem here, which made CONTAINER do nothing on this section.
+  const formBoxStyle = computed(() =>
+    compact({
+      maxWidth: pxVar(s.value.FORM_MAX_WIDTH),
+      ...MARGINS[oneOf(s.value.FORM_ALIGNMENT, ["CENTER", "LEFT", "RIGHT"])],
+    })
+  );
+
+  const actionsStyle = computed(() => ({
+    justifyContent:
+      s.value.SUBMIT_WIDTH === "FULL"
+        ? "stretch"
+        : FLEX_ALIGNMENTS[oneOf(s.value.SUBMIT_ALIGNMENT, ["LEFT", "CENTER", "RIGHT"])],
+  }));
+
+  // SUBMIT_* are this section's own button settings. Empty ones follow the
+  // theme's Buttons group through .osi-btn.
+  const submitClasses = computed(() => buttonClasses(s.value, "SUBMIT", ["osi-cf-submit"]));
+  const submitStyle = computed(() => buttonVars(s.value, "SUBMIT"));
+
+  const rootClasses = computed(() => [
+    customClass.value,
+    `osi-cf--label-${labelStyle.value.toLowerCase()}`,
+    `osi-cf--input-${inputStyle.value.toLowerCase()}`,
+  ]);
+
+  return { s, t, shellStyle, innerStyle, align, customClass, heading, form, isLoading, submitContact, autofillUser, showApiError, PAYLOAD_KEYS, DEFAULT_FIELDS, fields, extras, sent, errors, submitting, isPhoneField, valueOf, setValue, inputType, validate, submit, num, has, compact, pxVar, oneOf, TEXT_TRANSFORMS, FONT_WEIGHTS, FLEX_ALIGNMENTS, MARGINS, controls, LEGACY_KEYS, field, pickOr, labelStyle, inputStyle, floating, showRequiredMark, phoneVariant, placeholderFor, alwaysFilled, outerMaxWidth, styleVars, sectionStyle, formBoxStyle, actionsStyle, submitClasses, submitStyle, rootClasses, shadow };
+}