@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/components/checkout/ExtraFees.vue

@@ -0,0 +1,329 @@
+<template>
+  <div v-if="fees.length" class="flex flex-col gap-3">
+    <div
+      class="divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-300 bg-white"
+    >
+      <template v-for="fee in fees" :key="fee.id">
+        <label
+          class="flex items-center gap-3 px-3 py-2.5"
+          :class="[
+            isChecked(fee) ? 'bg-primaryColor bg-opacity-5' : '',
+            fee.is_required ? 'cursor-default' : 'cursor-pointer'
+          ]"
+        >
+          <input
+            type="checkbox"
+            :checked="isChecked(fee)"
+            :disabled="fee.is_required"
+            class="h-4 w-4 flex-shrink-0 cursor-pointer appearance-none rounded-full border-2 border-gray-300 transition-colors checked:border-primaryColor checked:bg-primaryColor checked:ring-2 checked:ring-white disabled:opacity-50"
+            @change="toggleFee(fee)"
+          />
+          <img v-if="fee.logo" :src="mediaUrl(fee.logo)" width="22" height="22" :alt="fee.beneficiary || fee.name" />
+          <span class="flex-1 text-sm">
+            {{ fee.name }}
+            <span v-if="fee.is_required" class="ml-1 text-xs font-normal text-gray-500">(included)</span>
+            <span v-if="fee.description" class="mt-0.5 block text-xs text-gray-500">{{ fee.description }}</span>
+            <span v-if="fee.beneficiary" class="mt-0.5 block text-xs text-gray-400">{{ fee.beneficiary }}</span>
+          </span>
+          <span v-if="!isCustomerAmount(fee)" class="flex-shrink-0 text-sm font-medium text-primaryColor">
+            {{ label(fee) }}
+          </span>
+        </label>
+
+        <!-- Amount Form (Revealed when checked & fee is Customer Amount) -->
+        <div
+          v-if="isChecked(fee) && isCustomerAmount(fee)"
+          class="space-y-3 bg-gray-50/50 p-4"
+        >
+        <span class="text-xs font-semibold text-gray-600 block">Select Donation Amount:</span>
+
+        <!-- Span Pills -->
+        <div class="flex flex-wrap gap-2">
+          <span
+            v-for="preset in getPresets(fee)"
+            :key="preset"
+            @click="selectPreset(fee, preset)"
+            class="px-3 py-1.5 text-xs font-medium rounded-full border cursor-pointer transition-all select-none"
+            :class="selectedMode[fee.id] === 'preset' && Number(selection[fee.id]) === preset
+              ? 'bg-primaryColor text-white border-primaryColor shadow-sm'
+              : 'bg-white text-gray-700 border-gray-300 hover:border-primaryColor hover:text-primaryColor'"
+          >
+            {{ currency }}{{ preset }}
+          </span>
+          <span
+            @click="selectOther(fee)"
+            class="px-3 py-1.5 text-xs font-medium rounded-full border cursor-pointer transition-all select-none"
+            :class="selectedMode[fee.id] === 'other'
+              ? 'bg-primaryColor text-white border-primaryColor shadow-sm'
+              : 'bg-white text-gray-700 border-gray-300 hover:border-primaryColor hover:text-primaryColor'"
+          >
+            Other
+          </span>
+        </div>
+
+        <!-- Custom Input Field (ONLY displayed if 'Other' is selected) -->
+        <div v-if="selectedMode[fee.id] === 'other'" class="pt-1">
+          <div class="relative flex items-center">
+            <span class="osi-fee-currency" aria-hidden="true">{{ currency }}</span>
+            <input
+              type="number"
+              :min="fee.min_amount || 0"
+              :max="fee.max_amount || undefined"
+              step="0.5"
+              :value="selection[fee.id]"
+              @input="setAmount(fee, $event.target.value)"
+              @blur="clamp(fee)"
+              class="osi-input osi-fee-amount"
+              aria-label="Custom amount"
+              placeholder="Enter custom amount"
+            />
+          </div>
+        </div>
+
+        <!-- Error message if validation fails -->
+        <p v-if="errors[fee.id]" class="text-xs text-red-600 font-medium">
+          {{ errors[fee.id] }}
+        </p>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ExtraFees",
+  setup() {
+    // Tenant-resolved media host: one Nuxt process serves every store, so the
+    // logo host has to come from useMediaUrl(), not a build-time constant.
+    const { mediaUrl } = useMediaUrl();
+    const { store } = useStorefront();
+    const currency = computed(
+      () => store.value?.default_currency?.symbol || store.value?.default_currency?.code || "$"
+    );
+    return { mediaUrl, currency };
+  },
+  props: {
+    fees: { type: Array, default: () => [] },
+    subtotal: { type: Number, default: 0 },
+  },
+  emits: ["change"],
+  data() {
+    return {
+      selection: {},
+      selectedMode: {}, // { [feeId]: 'preset' | 'other' }
+      errors: {},
+    };
+  },
+  methods: {
+    isCustomerAmount(fee) {
+      if (!fee) return true;
+      const calc = String(fee.calculation || fee.calculation_type || fee.type || "").toLowerCase().replace(/_/g, " ");
+      if (calc.includes("percentage") || calc.includes("fixed")) return false;
+      return true;
+    },
+
+    isChecked(fee) {
+      return Object.prototype.hasOwnProperty.call(this.selection, fee.id);
+    },
+
+    toggleFee(fee) {
+      if (fee.is_required) return;
+      if (this.isChecked(fee)) {
+        const newSelection = { ...this.selection };
+        delete newSelection[fee.id];
+        this.selection = newSelection;
+
+        const newMode = { ...this.selectedMode };
+        delete newMode[fee.id];
+        this.selectedMode = newMode;
+
+        const newErrors = { ...this.errors };
+        delete newErrors[fee.id];
+        this.errors = newErrors;
+      } else {
+        if (this.isCustomerAmount(fee)) {
+          const presets = this.getPresets(fee);
+          const defaultPreset = presets.length ? presets[0] : (Number(fee.min_amount) || 5);
+          this.selection = { ...this.selection, [fee.id]: defaultPreset };
+          this.selectedMode = { ...this.selectedMode, [fee.id]: "preset" };
+        } else {
+          this.selection = { ...this.selection, [fee.id]: null };
+        }
+      }
+      this.emitChange();
+    },
+
+    getPresets(fee) {
+      const min = Number(fee.min_amount) || 1;
+      const max = Number(fee.max_amount) || 1000;
+      const candidates = [1,5,10,25,50];
+      const presets = candidates.filter(v => v >= min && v <= max);
+      if (presets.length < 3) {
+        const generated = [];
+        let val = Math.max(min, 1);
+        while (generated.length < 4 && val <= max) {
+          generated.push(val);
+          val = val * 2;
+        }
+        return generated;
+      }
+      return presets;
+    },
+
+    selectPreset(fee, preset) {
+      this.selectedMode = { ...this.selectedMode, [fee.id]: "preset" };
+      this.selection = { ...this.selection, [fee.id]: preset };
+      const newErrors = { ...this.errors };
+      delete newErrors[fee.id];
+      this.errors = newErrors;
+      this.emitChange();
+    },
+
+  selectOther(fee) {
+  this.selectedMode = { ...this.selectedMode, [fee.id]: "other" };
+  this.selection = { ...this.selection, [fee.id]: null };
+  this.validate(fee);
+  this.emitChange();
+},
+
+    setAmount(fee, raw) {
+      const val = raw === "" ? null : Number(raw);
+      this.selection = { ...this.selection, [fee.id]: val };
+      this.validate(fee);
+      this.emitChange();
+    },
+
+  clamp(fee) {
+  const raw = this.selection[fee.id];
+
+  // Leave it empty — don't force a default value in
+  if (raw === null || raw === "" || raw === undefined) {
+    this.validate(fee);
+    this.emitChange();
+    return;
+  }
+
+  let v = Number(raw);
+  if (fee.min_amount != null) v = Math.max(v, Number(fee.min_amount));
+  if (fee.max_amount != null) v = Math.min(v, Number(fee.max_amount));
+  this.selection = { ...this.selection, [fee.id]: v };
+  this.validate(fee);
+  this.emitChange();
+},
+
+validate(fee) {
+  const v = Number(this.selection[fee.id]);
+  if (!this.isCustomerAmount(fee)) return true;
+
+  const raw = this.selection[fee.id];
+  const isEmpty = raw === null || raw === "" || raw === undefined;
+
+  if (isEmpty) {
+    // No error message shown for an empty "Other" field — just mark invalid silently
+    const newErrors = { ...this.errors };
+    delete newErrors[fee.id];
+    this.errors = newErrors;
+    return false;
+  }
+
+  if (!v || v <= 0) {
+    const newErrors = { ...this.errors };
+    delete newErrors[fee.id];
+    this.errors = newErrors;
+    return false;
+  }
+
+  if (fee.min_amount != null && v < Number(fee.min_amount)) {
+    this.errors = { ...this.errors, [fee.id]: `Minimum is $${Number(fee.min_amount)}.` };
+    return false;
+  }
+  if (fee.max_amount != null && v > Number(fee.max_amount)) {
+    this.errors = { ...this.errors, [fee.id]: `Maximum is $${Number(fee.max_amount)}.` };
+    return false;
+  }
+  const newErrors = { ...this.errors };
+  delete newErrors[fee.id];
+  this.errors = newErrors;
+  return true;
+},
+
+    amountFor(fee) {
+      if (!this.isChecked(fee)) return 0;
+      let amount = 0;
+      const calc = String(fee.calculation || fee.calculation_type || fee.type || "").toLowerCase();
+      if (calc.includes("percentage")) {
+        amount = (this.subtotal * Number(fee.value || 0)) / 100;
+      } else if (this.isCustomerAmount(fee)) {
+        amount = Number(this.selection[fee.id] || 0);
+      } else {
+        amount = Number(fee.value || 0);
+      }
+      if (fee.min_amount != null) amount = Math.max(amount, Number(fee.min_amount));
+      if (fee.max_amount != null) amount = Math.min(amount, Number(fee.max_amount));
+      return Math.round(Math.max(amount, 0) * 100) / 100;
+    },
+
+    label(fee) {
+      if (this.isCustomerAmount(fee)) {
+        return this.isChecked(fee) ? `${this.currency}${this.amountFor(fee).toFixed(2)}` : "";
+      }
+      const calc = String(fee.calculation || fee.calculation_type || fee.type || "").toLowerCase();
+      if (calc.includes("percentage")) {
+        return `${Number(fee.value)}%`;
+      }
+      return `${this.currency}${Number(fee.value || 0).toFixed(2)}`;
+    },
+
+    emitChange() {
+      const payload = Object.entries(this.selection).map(([id, amount]) => ({
+        extra_fee_id: id,
+        customer_amount: amount,
+      }));
+      const total = this.fees.reduce((sum, f) => sum + this.amountFor(f), 0);
+      const valid = this.fees.every((f) => !this.isChecked(f) || this.validate(f));
+      this.$emit("change", {
+        payload,
+        total: Math.round(total * 100) / 100,
+        valid,
+        lines: this.fees
+          .filter((f) => this.isChecked(f))
+          .map((f) => ({ name: f.name, amount: this.amountFor(f) })),
+      });
+    },
+
+    seedRequired() {
+      this.fees.forEach((f) => {
+        if (f.is_required && !this.isChecked(f)) {
+          if (this.isCustomerAmount(f)) {
+            const presets = this.getPresets(f);
+            const defaultPreset = presets.length ? presets[0] : (Number(f.min_amount) || 5);
+            this.selection = { ...this.selection, [f.id]: defaultPreset };
+            this.selectedMode = { ...this.selectedMode, [f.id]: "preset" };
+          } else {
+            this.selection = { ...this.selection, [f.id]: null };
+          }
+        }
+      });
+      this.emitChange();
+    },
+  },
+  watch: {
+    fees: { handler() { this.seedRequired(); }, immediate: true },
+    subtotal() { this.emitChange(); },
+  },
+};
+</script>
+<style scoped>
+.osi-fee-currency {
+  position: absolute;
+  inset-inline-start: var(--osi-input-pad-x, 12px);
+  z-index: 1;
+  font-size: 0.875rem;
+  opacity: 0.6;
+  pointer-events: none;
+}
+.osi-fee-amount {
+  --in-pad-x: calc(var(--osi-input-pad-x, 12px) + 0.75rem);
+}
+</style>