CouponInput

import * as React from "react";
const couponInputFixture = {
  id: "coupon-input",
  placeholder: "Promo code",
  validCode: "GRASSROOT",
  appliedMessage: "10% off applied.",
  errorMessage: "Try GRASSROOT.",
} satisfies {
  id: string;
  placeholder: string;
  validCode: string;
  appliedMessage: string;
  errorMessage: string;
};
 
import { CouponInput } from "@grassroot/ui-react";
 
export default function CouponInputDemo() {
  const [status, setStatus] = React.useState<"idle" | "applied" | "error">("idle");
  const [message, setMessage] = React.useState<string | undefined>(undefined);
 
  return (
    <div>
      <CouponInput
        status={status}
        message={message}
        placeholder={couponInputFixture.placeholder}
        onApply={(code) => {
          const ok = code.trim().toUpperCase() === couponInputFixture.validCode;
          setStatus(ok ? "applied" : "error");
          setMessage(ok ? couponInputFixture.appliedMessage : couponInputFixture.errorMessage);
        }}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const couponInputFixture = {
  id: "coupon-input",
  placeholder: "Promo code",
  validCode: "GRASSROOT",
  appliedMessage: "10% off applied.",
  errorMessage: "Try GRASSROOT.",
} satisfies {
  id: string;
  placeholder: string;
  validCode: string;
  appliedMessage: string;
  errorMessage: string;
};
 
import { CouponInput } from "@grassroot/ui-vue";
 
const status = ref<"idle" | "applied" | "error">("idle");
const message = ref<string | undefined>(undefined);
</script>
 
<template>
  <div>
    <CouponInput
      :status="status"
      :message="message"
      :placeholder="couponInputFixture.placeholder"
      @apply="
        (code) => {
          const ok = code.trim().toUpperCase() === couponInputFixture.validCode;
          status = ok ? 'applied' : 'error';
          message = ok ? couponInputFixture.appliedMessage : couponInputFixture.errorMessage;
        }
      "
    />
  </div>
</template>

import { Component, signal } from "@angular/core";
const couponInputFixture = {
  id: "coupon-input",
  placeholder: "Promo code",
  validCode: "GRASSROOT",
  appliedMessage: "10% off applied.",
  errorMessage: "Try GRASSROOT.",
} satisfies {
  id: string;
  placeholder: string;
  validCode: string;
  appliedMessage: string;
  errorMessage: string;
};
 
import { GrassrootCouponInput } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-coupon-input-demo",
  standalone: true,
  imports: [GrassrootCouponInput],
  template: `
    <div>
      <grassroot-coupon-input
        [status]="status()"
        [message]="message()"
        [placeholder]="fixture.placeholder"
        (apply)="onApply($event)"
      />
    </div>
  `,
})
export class CouponInputDemoComponent {
  protected readonly fixture = couponInputFixture;
  readonly status = signal<"idle" | "applied" | "error">("idle");
  readonly message = signal<string | undefined>(undefined);
 
  onApply(code: string): void {
    const ok = code.trim().toUpperCase() === this.fixture.validCode;
    this.status.set(ok ? "applied" : "error");
    this.message.set(ok ? this.fixture.appliedMessage : this.fixture.errorMessage);
  }
}
 
export default CouponInputDemoComponent;

<script lang="ts">
  import { CouponInput } from "@grassroot/ui-svelte";
  const couponInputFixture = {
    id: "coupon-input",
    placeholder: "Promo code",
    validCode: "GRASSROOT",
    appliedMessage: "10% off applied.",
    errorMessage: "Try GRASSROOT.",
  } satisfies {
    id: string;
    placeholder: string;
    validCode: string;
    appliedMessage: string;
    errorMessage: string;
  };
 
  let status = $state<"idle" | "applied" | "error">("idle");
  let message = $state<string | undefined>(undefined);
</script>
 
<div>
  <CouponInput
    {status}
    {message}
    placeholder={couponInputFixture.placeholder}
    onApply={(code) => {
      const ok = code.trim().toUpperCase() === couponInputFixture.validCode;
      status = ok ? "applied" : "error";
      message = ok ? couponInputFixture.appliedMessage : couponInputFixture.errorMessage;
    }}
  />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
const couponInputFixture = {
  id: "coupon-input",
  placeholder: "Promo code",
  validCode: "GRASSROOT",
  appliedMessage: "10% off applied.",
  errorMessage: "Try GRASSROOT.",
} satisfies {
  id: string;
  placeholder: string;
  validCode: string;
  appliedMessage: string;
  errorMessage: string;
};
 
import { CouponInput } from "@grassroot/ui-solid";
 
export default function CouponInputDemo() {
  const [status, setStatus] = createSignal<"idle" | "applied" | "error">("idle");
  const [message, setMessage] = createSignal<string | undefined>(undefined);
 
  return (
    <div>
      <CouponInput
        status={status()}
        message={message()}
        placeholder={couponInputFixture.placeholder}
        onApply={(code) => {
          const ok = code.trim().toUpperCase() === couponInputFixture.validCode;
          setStatus(ok ? "applied" : "error");
          setMessage(ok ? couponInputFixture.appliedMessage : couponInputFixture.errorMessage);
        }}
      />
    </div>
  );
}