CreditCardExample/pages/index.jsx

import React, { useEffect, useState, useRef } from 'react'
import { CreditCardModel, CreditCardScreen } from './../models/CreditCardModel'
import CreditCardProps from './../models/CreditCardProps'
import environment from './../utils/environment'
import DataForm from 'vComponents/dist/DataForm'
import { useIMask } from 'react-imask'

import ReactCardFlip from 'react-card-flip'

const LoginPage = () => {
  const maskFieldOptions = {
    mask: '+{7}(000)000-00-00'
  }
  const modelInitial = CreditCardModel()
  const [model, setModel] = useState(modelInitial)
  const [headers, setHeaders] = useState(CreditCardProps())
  const [isReadyHeaders, setIsReadyHeaders] = useState(false)
  const [testInput, setTestInput] = useState(null)
  const [isFlipped, setIsFlipped] = useState(false)

  const [opts, setOpts] = useState(maskFieldOptions)
  const {
    ref,
    maskRef,
    value,
    setValue,
    unmaskedValue,
    setUnmaskedValue,
    typedValue,
    setTypedValue,
  } = useIMask(opts, /* { onAccept, onComplete } */);
  // Declare a new state variable, which we'll call 'count'
  const completeHeaders = () => {
    let _newHeaders = []
    _newHeaders = environment.buildFunctiontsHeaders(headers)
    setHeaders(_newHeaders)
    setIsReadyHeaders(true)
  }

  const formComponent = useRef(null)

  // when page is mounted
  useEffect(() => {
    completeHeaders()
  }, [])

  return (
    <div className=' flex w-screen h-screen items-center justify-center'>
      <div className='w-[34] bg-emerald-50 flex flex-col p-8 space-y-4'>
        {/* <span className=' font-semibold '>-{value}-</span>
        <input
          id='testInput'
          ref={ref}
          value={value}
          className='block py-0.5 px-1.5 w-full text-sm text-gray-900 bg-gray-50 rounded-md border-l-gray-50 border-l-2 border border-gray-300 appearance-none focus:border-blue-500 focus:outline-none focus:shadow-outline focus:ring-1 focus:ring-gray-100 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white'
          placeholder=' '
        /> */}
        <DataForm
          ref={formComponent}
          headers={headers}
          model={model}
          name='testCreditCard'
          className='grid cols-2 gap-4'
          onSave={(newMod) => { console.log('new model result ', newMod) }}
          onCancel={() => { formComponent.current.reset(); setModel({}) }}
          onAnyChange={() => { setModel(formComponent.current.getValues()) }}
        />
        <ReactCardFlip isFlipped={isFlipped}>
          <div className=' bg-gradient-to-r from-sky-500 to-indigo-500 w-full h-60 rounded-lg shadow-xl grid cols-12 grid-rows-3 auto-cols-fr' onClick={() => { setIsFlipped(!isFlipped) }}>
            <div className=' col-start-2 col-span-2 row-start-1 flex h-full justify-center items-center p-3' >
              <div className='w-full h-full bg-amber-400 rounded-md' />
            </div>
            <div className=' col-start-9 col-span-2 row-start-1  flex h-full w-20 rounded-full justify-center items-center p-3' >
              <div className='w-full h-full bg-red-600 rounded-full' />
            </div>
            <div className=' col-start-10 col-span-2 row-start-1  flex h-full w-20 rounded-full justify-center items-center p-3' >
              <div className='w-full h-full bg-yellow-600 rounded-full' />
            </div>
            <div className=' col-start-1 col-span-12 row-start-2 px-4 text-white flex flex-col '>
              <span className=' text-sm '>Card Number</span>
              <span className=' text-xl tabular-nums tracking-widest'>{model.card_number}</span>
            </div>
            <div className='w-full col-start-1 col-span-8 row-start-3 px-4 text-white flex flex-col '>
              <span className=' text-sm '>Name</span>
              <span className=' text-xl '>{model.name}</span>
            </div>
            <div className='w-full col-start-9 col-span-4 row-start-3 px-4 text-white flex flex-col '>
              <span className=' text-sm '>Expiration Date</span>
              <span className=' text-xl '>{model.expiration_date}</span>
            </div>
          </div>
          <div className=' bg-gradient-to-r from-sky-500 to-indigo-500 w-full h-60 rounded-lg shadow-xl grid cols-12 grid-rows-6' onClick={() => { setIsFlipped(!isFlipped) }}>
            <div className='w-full col-start-1 col-span-12 bg-black row-start-2' />
            <div className='w-full col-start-13 col-span-12 bg-black row-start-2' />
            <div className='w-full col-start-2 col-span-12 bg-gray-100 row-start-3' />
            <div className='w-full col-start-14 col-span-7 bg-gray-100 row-start-3' />
            <div className='w-full col-start-19 col-span-3 row-start-3 bg-white flex items-center justify-center w-full h-full '>
              <span>{model.security_code}</span>
            </div>
          </div>
        </ReactCardFlip>
      </div>
    </div>
  )
}

export default LoginPage