freesewing/sites/shared/components/patrons/subscribe.mjs

import { stripeConfig } from 'shared/config/stripe.mjs'
import { useState } from 'react'
import { useTranslation } from 'next-i18next'
import { formatNumber } from 'shared/utils.mjs'
import { Payment } from './payment.mjs'

export const ns = ['patrons']

export const Subscribe = ({ color = 'secondary' }) => {
  const { t } = useTranslation(ns)

  const [amount, setAmount] = useState(null)
  const [currency, setCurrency] = useState('eur')
  const [period, setPeriod] = useState('m')
  const [handlePayment, setHandlePayment] = useState(false)

  const { amounts, periods, currencies } = stripeConfig

  const changeCurrency = (evt) => {
    const newCur = evt.target.value
    const newAmount = amount ? (amount / currencies[currency]) * currencies[newCur] : amount
    setAmount(newAmount)
    setCurrency(newCur)
  }

  if (handlePayment)
    return (
      <>
        <Payment amount={amount * 100} currency={currency} />
        <div className="flex flex-row gap-2 w-full">
          <button
            className={`btn btn-${color} grow mt-4`}
            disabled={(amount / currencies[currency]) * currencies.eur < 1}
          >
            {period === 'x' ? 'Donate' : 'Subscribe'}
          </button>
          <button
            className={`btn btn-${color} btn-outline w-12 mt-4`}
            onClick={() => setHandlePayment(!handlePayment)}
          >
            Back
          </button>
        </div>
      </>
    )

  return (
    <div className="w-full">
      <div className="flex flex-row gap-2">
        <div className="form-control w-full">
          <label className="label">
            <span className="label-text-alt text-inherit">Your contribution</span>
          </label>
          <input
            type="number"
            placeholder="Enter amount here"
            className="input input-bordered w-full text-base-content"
            value={amount}
            onChange={(evt) => setAmount(evt.target.value)}
          />
        </div>
        <div className="form-control w-24">
          <label className="label">
            <span className="label-text-alt text-inherit">Currency</span>
          </label>
          <select
            className="select select-bordered text-base-content"
            defaultValue={currency}
            onChange={changeCurrency}
          >
            {Object.keys(currencies)
              .sort()
              .map((cur) => (
                <option value={cur} key={cur}>
                  {cur.toUpperCase()}
                </option>
              ))}
          </select>
        </div>
      </div>
      <div>
        <label className="label">
          <div className="label-text-alt text-inherit flex flex-row flex-wrap gap-1">
            <span className="hidden lg:inline">Presets:</span>
            {amounts.map((val) => (
              <button
                key={val}
                className="font-bold underline decoration-2 px-1 hover:decoration-4"
                onClick={() => setAmount(val * currencies[currency])}
              >
                {formatNumber(val * currencies[currency])}
              </button>
            ))}
          </div>
        </label>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
        {periods.map((val) => (
          <div
            className={`form-control border border-solid border-inherit rounded px-1 flex flex-col justify-center ${
              period === val ? 'bg-base-100 text-base-content' : ''
            }`}
            key={val}
          >
            <label className="label cursor-pointer py-1.5 flex flex-row gap-2 items-center overflow-clip justify-start">
              <input
                type="radio"
                name="period"
                className={`radio checked:bg-${color} border-inherit bg-inherit radio-xs lg:radio-sm`}
                value={val}
                onChange={() => setPeriod(val)}
                checked={val === period ? 1 : 0}
              />
              <span
                className={`label-text text-inherit text-xs lg:text-sm ${
                  val === period ? 'font-bold' : ''
                }`}
              >
                {t(`patrons:period-${val}`)}
              </span>
            </label>
          </div>
        ))}
      </div>
      <button
        className={`btn btn-${color} w-full mt-4`}
        disabled={(amount / currencies[currency]) * currencies.eur < 1}
        onClick={() => setHandlePayment(!handlePayment)}
      >
        To checkout
      </button>
    </div>
  )
}