Code.hs

renderCreditCard :: DispatchCreditCard -> CreditCardForm -> ReactRender ()
renderCreditCard dispatch ccf = div_ $ do
  let
    tf :: Text -> (Text -> CreditCardAction) -> Fold CreditCardForm Text -> ReactRender ()
    tf hint action l = textField_ $ TextField
      { _tfValue    = fromMaybe "" $ ccf ^? l
      , _tfHint     = Just hint
      , _tfType     = TFTText
      , _tfOnChange = Just $ dispatch . action
      }
  div_ $ do
    tf "Credit card number" CCANumber ccfNumber
    tf "Owner name" CCAOwnver ccfOwnver
  div_ $ do
    tf "Month" CCAMonth $ ccfMonth . _Just . to show'
    elemText "/"
    tf "Year" CCAYear $ ccfYear . _Just . to show'
  div_ $ do
    tf "CVV" CCACvv $ ccfCVV . _Just . to show'