Field extras

'use client';

import { FieldExtras, PickerOption, Select } from '@snapshot-ui/react';
import { useState, type ReactElement } from 'react';

const WAITS = [
  ['day', '1 day'],
  ['three', '3 days'],
  ['week', 'A week'],
  ['month', 'A month'],
] as const;

export default function FieldExtrasDefault(): ReactElement {
  // Saved at a week; the product's default is 3 days.
  const [wait, setWait] = useState('week');
  return (
    <FieldExtras
      fieldLabel="Wait"
      defaultOffer={{
        value: '3 days',
        // Drawn only while the field does not hold the default.
        isCurrent: wait === 'three',
        // The same setter the field's onChange calls: an ordinary edit.
        onTake: () => {
          setWait('three');
        },
      }}
      style={{ width: '100%', maxWidth: '24rem' }}
    >
      <Select
        label="Wait"
        description="How long a payment waits before it counts."
        value={wait}
        onChange={(key) => {
          setWait(String(key));
        }}
      >
        {WAITS.map(([id, name]) => (
          <PickerOption key={id} id={id}>
            {name}
          </PickerOption>
        ))}
      </Select>
    </FieldExtras>
  );
}

'use client';

import { FieldExtras, NumberField } from '@snapshot-ui/react';
import { useState, type ReactElement } from 'react';

/** A month of the reader's fixed bills, in cents, which the app worked out. */
const MONTH_OF_BILLS = 234000;

export default function FieldExtrasSuggestion(): ReactElement {
  // Empty until the reader types or takes the suggestion: never prefilled.
  const [cents, setCents] = useState<number | null>(null);
  return (
    <FieldExtras
      fieldLabel="Cushion"
      suggestion={{
        value: '$2,340',
        reason: 'a month of your fixed bills',
        isCurrent: cents === MONTH_OF_BILLS,
        onTake: () => {
          setCents(MONTH_OF_BILLS);
        },
      }}
      style={{ width: '100%', maxWidth: '24rem' }}
    >
      <NumberField
        label="Cushion"
        description="Kept aside before anything counts as spare."
        money={{ symbol: '$' }}
        value={cents}
        onChange={setCents}
      />
    </FieldExtras>
  );
}

'use client';

import { FieldExtras, NumberField } from '@snapshot-ui/react';
import { useState, type ReactElement } from 'react';

const SUGGESTED = 234000;
const DEFAULT = 100000;

export default function FieldExtrasBoth(): ReactElement {
  const [cents, setCents] = useState<number | null>(50000);
  return (
    <FieldExtras
      fieldLabel="Cushion"
      // The suggestion is drawn first: it is about this reader, the default about everyone.
      suggestion={{
        value: '$2,340',
        reason: 'a month of your fixed bills',
        isCurrent: cents === SUGGESTED,
        onTake: () => {
          setCents(SUGGESTED);
        },
      }}
      defaultOffer={{
        value: '$1,000',
        isCurrent: cents === DEFAULT,
        onTake: () => {
          setCents(DEFAULT);
        },
      }}
      style={{ width: '100%', maxWidth: '24rem' }}
    >
      <NumberField label="Cushion" money={{ symbol: '$' }} value={cents} onChange={setCents} />
    </FieldExtras>
  );
}

'use client';

import { FieldExtras, TextField } from '@snapshot-ui/react';
import { useState, type ReactElement } from 'react';

const DEFAULT = { from: '10 PM', to: '7 AM' };

export default function FieldExtrasPair(): ReactElement {
  const [hours, setHours] = useState({ from: '11 PM', to: '6 AM' });
  return (
    <FieldExtras
      // One offer for the pair: its line sits under both, and a reset focuses From.
      scope="group"
      fieldLabel="Quiet hours"
      defaultOffer={{
        value: '10 PM to 7 AM',
        isCurrent: hours.from === DEFAULT.from && hours.to === DEFAULT.to,
        onTake: () => {
          setHours(DEFAULT);
        },
      }}
      style={{ width: '100%', maxWidth: '28rem' }}
    >
      <div className="row" style={{ alignItems: 'start' }}>
        <TextField
          label="From"
          value={hours.from}
          onChange={(from) => {
            setHours({ ...hours, from });
          }}
          style={{ flex: '1 1 8rem' }}
        />
        <TextField
          label="To"
          value={hours.to}
          onChange={(to) => {
            setHours({ ...hours, to });
          }}
          style={{ flex: '1 1 8rem' }}
        />
      </div>
    </FieldExtras>
  );
}

'use client';

import { FieldExtras, NumberField, PickerOption, Repeater, Select } from '@snapshot-ui/react';
import { useState, type ReactElement } from 'react';

interface Tier {
  id: string;
  amount: number | null;
  wait: string;
}

const WAITS = [
  ['three', '3 days'],
  ['week', 'A week'],
  ['two-weeks', 'Two weeks'],
  ['month', 'A month'],
] as const;

/** The product's default set, without ids: a reset gives each row a new one. */
const DEFAULT_TIERS = [
  { amount: 10000, wait: 'three' },
  { amount: 50000, wait: 'week' },
  { amount: 150000, wait: 'month' },
];

let made = 0;
const newId = (): string => {
  made += 1;
  return `tier-${String(made)}`;
};

export default function FieldExtrasRows(): ReactElement {
  const [tiers, setTiers] = useState<Tier[]>([
    { id: 'small', amount: 20000, wait: 'three' },
    { id: 'large', amount: 80000, wait: 'two-weeks' },
  ]);
  const isDefault =
    JSON.stringify(tiers.map(({ amount, wait }) => ({ amount, wait }))) === JSON.stringify(DEFAULT_TIERS);
  return (
    <FieldExtras
      // One offer for the whole set: a reset replaces the rows and focuses the first row's first field.
      scope="group"
      fieldLabel="Wait tiers"
      defaultOffer={{
        value: '$100 waits 3 days, $500 a week, $1,500 a month',
        isCurrent: isDefault,
        onTake: () => {
          setTiers(DEFAULT_TIERS.map((tier) => ({ ...tier, id: newId() })));
        },
      }}
      style={{ width: '100%', maxWidth: '40rem' }}
    >
      <Repeater<Tier>
        label="Wait tiers"
        value={tiers}
        onChange={setTiers}
        createRow={() => ({ id: newId(), amount: null, wait: 'three' })}
        rowLabel={(index) => `Tier ${String(index + 1)}`}
        maxRows={3}
        labels={{ add: 'Add a tier' }}
      >
        {(tier, { update }) => (
          <>
            <NumberField
              label="Up to"
              money={{ symbol: '$' }}
              value={tier.amount}
              onChange={(amount) => {
                update({ ...tier, amount });
              }}
            />
            <Select
              label="Wait"
              value={tier.wait}
              onChange={(key) => {
                update({ ...tier, wait: String(key) });
              }}
            >
              {WAITS.map(([id, name]) => (
                <PickerOption key={id} id={id}>
                  {name}
                </PickerOption>
              ))}
            </Select>
          </>
        )}
      </Repeater>
    </FieldExtras>
  );
}