const CLARITI_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "bankLabel": "PayNow (NETS)",
  "cardLabel": "Stripe (Visa/MC)"
}/*EDITMODE-END*/;

function ClaritiTweaks() {
  const [t, setTweak] = useTweaks(CLARITI_TWEAK_DEFAULTS);
  React.useEffect(function () {
    if (window.applyClaritiTweaks) window.applyClaritiTweaks(t);
  }, [t.bankLabel, t.cardLabel]);
  return (
    <TweaksPanel>
      <TweakSection label="Payment providers" />
      <TweakSelect label="Bank transfer" value={t.bankLabel}
        options={["PayNow (NETS)", "PayNow", "NETS", "Bank transfer"]}
        onChange={function (v) { setTweak('bankLabel', v); }} />
      <TweakSelect label="Card processor" value={t.cardLabel}
        options={["Stripe (Visa/MC)", "Adyen (Visa/MC)", "Cards (Visa/MC)"]}
        onChange={function (v) { setTweak('cardLabel', v); }} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaksRoot')).render(<ClaritiTweaks />);