CouponInput

import { CouponInput } from "@grassroot/ui-react";
import * as React from "react";
 
const [status, setStatus] = React.useState("idle");
const [message, setMessage] = React.useState(undefined);
 
// Single-line handler body: the demo generator's React wrapper walks the
// snippet line by line to separate hoisted state from returned JSX, so a
// multi-statement handler has to stay on one physical line or its inner
// statements get mistaken for top-level statements and dropped.
<CouponInput status={status} message={message} onApply={(code) => { const ok = code.trim().toUpperCase() === "GRASSROOT"; setStatus(ok ? "applied" : "error"); setMessage(ok ? "10% off applied." : "Try GRASSROOT."); }} />

<script setup lang="ts">
import { ref } from "vue";
import { CouponInput } from "@grassroot/ui-vue";
 
const status = ref("idle");
const message = ref(undefined);
</script>
 
<template>
  <CouponInput
    :status="status"
    :message="message"
    @apply="const ok = code.trim().toUpperCase() === 'GRASSROOT'; status = ok ? 'applied' : 'error'; message = ok ? '10% off applied.' : 'Try GRASSROOT.';"
  />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootCouponInput } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootCouponInput],
  template: `
    <grassroot-coupon-input
      [status]="status()"
      [message]="message()"
      (apply)="const ok = code.trim().toUpperCase() === 'GRASSROOT'; status.set(ok ? 'applied' : 'error'); message.set(ok ? '10% off applied.' : 'Try GRASSROOT.');"
    />
  `,
})
export class ExampleComponent {
  readonly status = signal("idle");
  readonly message = signal(undefined);
}

<script lang="ts">
  import { CouponInput } from "@grassroot/ui-svelte";
 
  let status = $state("idle");
  let message = $state(undefined);
</script>
 
<CouponInput
  status={status}
  message={message}
  onApply={(code) => { const ok = code.trim().toUpperCase() === "GRASSROOT"; status = ok ? "applied" : "error"; message = ok ? "10% off applied." : "Try GRASSROOT."; }}
/>

import { createSignal } from "solid-js";
import { CouponInput } from "@grassroot/ui-solid";
 
export function Example() {
  const [status, setStatus] = createSignal("idle");
  const [message, setMessage] = createSignal(undefined);
 
  return (
    <>
      <CouponInput
        status={status()}
        message={message()}
        onApply={(code) => { const ok = code.trim().toUpperCase() === "GRASSROOT"; setStatus(ok ? "applied" : "error"); setMessage(ok ? "10% off applied." : "Try GRASSROOT."); }}
      />
    </>
  );
}