add pbi 4 iumk (not yet connected to backend)

src/App.js

 import Homepage from './pages/homepage'
 import Register from './components/Registrasi/Register'
 import Login from './components/Autentikasi/Login'
+import FormIUMK from './pages/formiumk'
 import {Router} from '@reach/router'
 
 function App() {
@@ -10,6 +11,7 @@ function App() {
         <Homepage path="/" />
         <Register path="/register" />
         <Login path="/login" />
+        <FormIUMK path="/form-iumk" />
       </Router>
     </div>
   )

src/assets/dropdown-icon.svg

+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.8" d="M17.8752 14.0833C16.5752 14.0833 14.5493 14.4517 13.0002 15.1667C11.451 14.4408 9.42516 14.0833 8.12516 14.0833C5.77433 14.0833 1.0835 15.2533 1.0835 17.6042V20.5833H24.9168V17.6042C24.9168 15.2533 20.226 14.0833 17.8752 14.0833ZM13.5418 18.9583H2.7085V17.6042C2.7085 17.0192 5.48183 15.7083 8.12516 15.7083C10.7685 15.7083 13.5418 17.0192 13.5418 17.6042V18.9583ZM23.2918 18.9583H15.1668V17.6042C15.1668 17.1058 14.9502 16.6725 14.6035 16.2825C15.5568 15.9575 16.7268 15.7083 17.8752 15.7083C20.5185 15.7083 23.2918 17.0192 23.2918 17.6042V18.9583ZM8.12516 13C10.216 13 11.9168 11.2992 11.9168 9.20832C11.9168 7.11749 10.216 5.41666 8.12516 5.41666C6.03433 5.41666 4.3335 7.11749 4.3335 9.20832C4.3335 11.2992 6.03433 13 8.12516 13ZM8.12516 7.04166C9.31683 7.04166 10.2918 8.01666 10.2918 9.20832C10.2918 10.4 9.31683 11.375 8.12516 11.375C6.9335 11.375 5.9585 10.4 5.9585 9.20832C5.9585 8.01666 6.9335 7.04166 8.12516 7.04166ZM17.8752 13C19.966 13 21.6668 11.2992 21.6668 9.20832C21.6668 7.11749 19.966 5.41666 17.8752 5.41666C15.7843 5.41666 14.0835 7.11749 14.0835 9.20832C14.0835 11.2992 15.7843 13 17.8752 13ZM17.8752 7.04166C19.0668 7.04166 20.0418 8.01666 20.0418 9.20832C20.0418 10.4 19.0668 11.375 17.8752 11.375C16.6835 11.375 15.7085 10.4 15.7085 9.20832C15.7085 8.01666 16.6835 7.04166 17.8752 7.04166Z" fill="black"/>
+</svg>

src/components/Dropdown/EmployeeDropdown.js

+import {useState} from 'react'
+import DropdownIcon from '../../assets/dropdown-icon.svg'
+import DropdownArrow from '../../assets/dropdown.svg'
+import {dataEmployee} from '../../data/employee'
+import PropTypes from 'prop-types'
+
+const EmployeeDropdown = ({setEmployeeData, defaultValue, dataTestId}) => {
+  const [selectedValue, setSelectedValue] = useState(defaultValue)
+  const [showDropdown, setShowDropdown] = useState(false)
+
+  const selectValue = (value) => {
+    setEmployeeData(value)
+    setSelectedValue(value)
+    setShowDropdown(false)
+  }
+
+  return (
+    <div className="">
+      <div
+        className="flex flex-row items-center justify-between py-1.5 px-2 bg-white md:mr-64 lg:mr-64 xl:mr-64 2xl:mr-64 px-4 mr-24 py-2.5 border-2 border-grey rounded-lg"
+        onClick={() => setShowDropdown(!showDropdown)}
+        data-testid={dataTestId}
+      >
+        <div className="flex flex-row items-center">
+          <img src={DropdownIcon} className="mr-3" />
+          <p className="reguler-text" data-testid="selected-value">
+            {selectedValue ? selectedValue : 'Pilih salah satu'}
+          </p>
+        </div>
+        <img src={DropdownArrow} />
+      </div>
+      <div className="flex flex-col relative">
+        {showDropdown && (
+          <div
+            className="bg-white rounded absolute lg:w-96 xl:w-96 2xl:w-96 lg:right-64 xl:right-64 2xl:right-64"
+            data-testid="options-dropdown"
+          >
+            {dataEmployee.map((value, index) => (
+              <div
+                className="py-2.5 px-6 border-grey border-b-2 cursor-pointer"
+                onClick={() => selectValue(value)}
+                key={index}
+              >
+                <p className="heading-3">{value}</p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+EmployeeDropdown.propTypes = {
+  setEmployeeData: PropTypes.func,
+  defaultValue: PropTypes.string,
+  dataTestId: PropTypes.string,
+}
+
+export default EmployeeDropdown

src/components/Dropdown/EmployeeDropdown.test.js

+import {fireEvent, screen, render} from '@testing-library/react'
+import EmployeeDropdown from './EmployeeDropdown'
+
+test('renders Employee Dropdown', () => {
+  const setEmployeeData = jest.fn()
+  render(<EmployeeDropdown setEmployeeData={setEmployeeData} />)
+  expect(screen.getByTestId('selected-value')).toBeInTheDocument()
+})
+
+test('can open employee dropdown and show options', () => {
+  const setEmployeeData = jest.fn()
+  render(<EmployeeDropdown setEmployeeData={setEmployeeData} />)
+
+  const openDropdown = screen.getByText(/Pilih salah satu/i)
+  fireEvent.click(openDropdown)
+
+  expect(screen.getByTestId('options-dropdown')).toBeInTheDocument()
+})
+
+test('can open employee dropdown and click options', () => {
+  const setEmployeeData = jest.fn()
+  render(<EmployeeDropdown setEmployeeData={setEmployeeData} />)
+
+  const openDropdown = screen.getByText(/Pilih salah satu/i)
+  fireEvent.click(openDropdown)
+
+  const individualOption = screen.getByText(/Individual/i)
+  fireEvent.click(individualOption)
+
+  expect(screen.getByText(/Individual/i)).toBeInTheDocument()
+})

src/components/FormIUMK/FormIUMK1.js

+import React from 'react'
+import PropTypes from 'prop-types'
+
+const FormIUMK1 = ({
+  register,
+  errors,
+  handleSubmit,
+  onSubmit,
+  data,
+  setValue,
+}) => {
+  return (
+    <form
+      className="px-4"
+      data-testid="form-iumk-1"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div className="flex flex-col justify-center items-center">
+        <h1
+          className="flex text-center heading-2 mb-4 pt-9"
+          data-testid="form-iumk-1-judul"
+        >
+          Jelaskan Industri Anda
+        </h1>
+        <p
+          className="reguler-text text-center mb-10"
+          data-testid="form-iumk-1-deskripsi"
+        >
+          Mengetahui Industri Anda membantu partner kami memahami tipe dokumen{' '}
+          <br></br>
+          yang dibutuhkan dan lisensi apa yang perlu didapatkan usaha Anda.
+        </p>
+      </div>
+
+      <div className="flex flex-col py-3" data-testid="form-iumk-1-nama">
+        <label className="heading-3 mb-2">
+          Nama atau Calon Nama Usaha<span className="text-popred">*</span>
+        </label>
+        <input
+          className="px-2 py-2.5 w-full border-2 border-gray-200 rounded"
+          type="text"
+          id="nama"
+          data-testid="form-1-nama-field"
+          required
+          name="nama"
+          placeholder="e.g PT ABC"
+          ref={register({
+            required: 'Wajib diisi',
+          })}
+          defaultValue={data.nama}
+        />
+        {errors.nama && (
+          <span role="alert" className="text-popred">
+            {errors.nama.message}
+          </span>
+        )}
+      </div>
+
+      <div className="flex flex-col py-3" data-testid="form-iumk-1-status">
+        <label className="heading-3 mb-2">
+          Status Entitas<span className="text-popred">*</span>
+        </label>
+        <div className="flex flex-col lg:flex-row xl:flex-row 2xl:flex-row justify-between">
+          <div>
+            <input
+              className="mr-2"
+              name="status"
+              data-testid="form-1-status-pt"
+              ref={register({required: 'Wajib diisi'})}
+              type="radio"
+              value="PT"
+              defaultChecked={data.status == 'PT'}
+            />
+            <label className="heading-3 text-charchoal">PT</label>
+          </div>
+          <div>
+            <input
+              className="mr-2"
+              name="status"
+              data-testid="form-1-status-cv"
+              ref={register({required: 'Wajib diisi'})}
+              type="radio"
+              value="CV"
+              defaultChecked={data.status == 'CV'}
+            />
+            <label className="heading-3 text-charchoal">CV</label>
+          </div>
+          <div>
+            <input
+              className="mr-2"
+              name="status"
+              data-testid="form-1-status-firma"
+              ref={register({required: 'Wajib diisi'})}
+              type="radio"
+              value="Firma"
+              defaultChecked={data.status == 'Firma'}
+            />
+            <label className="heading-3 text-charchoal">Firma</label>
+          </div>
+          <div>
+            <input
+              className="mr-2"
+              name="status"
+              data-testid="form-1-status-yayasan"
+              ref={register({required: 'Wajib diisi'})}
+              type="radio"
+              value="Yayasan"
+              defaultChecked={data.status == 'Yayasan'}
+            />
+            <label className="heading-3 text-charchoal">Yayasan</label>
+          </div>
+          <div>
+            <input
+              className="mr-2"
+              name="status"
+              data-testid="form-1-status-koperasi"
+              ref={register({required: 'Wajib diisi'})}
+              type="radio"
+              value="Koperasi"
+              defaultChecked={data.status == 'Koperasi'}
+            />
+            <label className="heading-3 text-charchoal">Koperasi</label>
+          </div>
+          <div>
+            <input
+              className="mr-2"
+              name="status"
+              data-testid="form-1-status-other"
+              ref={register({required: 'Wajib diisi'})}
+              type="radio"
+              value="Other"
+              defaultChecked={data.status == 'Other'}
+            />
+            <label className="heading-3 text-charchoal">Other</label>
+          </div>
+        </div>
+        {errors.status && (
+          <span role="alert" className="text-popred">
+            {errors.status.message}
+          </span>
+        )}
+      </div>
+
+      <div className="flex flex-col py-3" data-testid="form-iumk-1-alamat">
+        <label className="heading-3 mb-2">
+          Alamat<span className="text-popred">*</span>
+        </label>
+        <input
+          className="px-2 py-2.5 w-full border-2 border-gray-200 rounded"
+          type="text"
+          id="alamat"
+          data-testid="form-1-alamat-field"
+          required
+          name="alamat"
+          placeholder="JL. TB Simatupang No. 5 Ragunan, Pasar Minggu Jakarta 12550"
+          ref={register({
+            required: 'Wajib diisi',
+          })}
+          defaultValue={data.alamat}
+        />
+        {errors.alamat && (
+          <span role="alert" className="text-popred">
+            {errors.alamat.message}
+          </span>
+        )}
+      </div>
+
+      <div className="flex flex-col py-3" data-testid="form-iumk-1-barang-jasa">
+        <label className="heading-3 mb-2">
+          Barang yang dijual/Jasa yang ditawarkan
+          <span className="text-popred">*</span>
+        </label>
+        <input
+          className="px-2 py-2.5 w-full border-2 border-gray-200 rounded"
+          type="text"
+          id="barang-jasa"
+          data-testid="form-1-barang-jasa-field"
+          required
+          name="barangJasa"
+          placeholder="Tipe barang/jasa"
+          ref={register({
+            required: 'Wajib diisi',
+          })}
+          defaultValue={data.barangJasa}
+        />
+        {errors.barangJasa && (
+          <span role="alert" className="text-popred">
+            {errors.barangJasa.message}
+          </span>
+        )}
+      </div>
+      <div className="pt-4">
+        <button
+          className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
+          data-testid="lanjut-button"
+          onClick={() => setValue('page', '2')}
+        >
+          Lanjut
+        </button>
+      </div>
+    </form>
+  )
+}
+
+FormIUMK1.propTypes = {
+  register: PropTypes.func,
+  errors: PropTypes.object,
+  handleSubmit: PropTypes.func,
+  onSubmit: PropTypes.func,
+  data: PropTypes.object,
+  setValue: PropTypes.func,
+}
+
+export default FormIUMK1

src/components/FormIUMK/FormIUMK1.test.js

+import {screen, waitFor, fireEvent} from '@testing-library/react'
+import FormIUMK from '../../pages/formiumk'
+import {testRender, makeTestStore, fixtureSet} from '../../testUtils'
+import userEvent from '@testing-library/user-event'
+
+test('renders FormIUMK1 Element', () => {
+  const store = makeTestStore(fixtureSet)
+  testRender(<FormIUMK />, {store})
+  expect(screen.getByTestId('form-iumk-1')).toBeInTheDocument()
+  expect(screen.getByTestId('form-iumk-1-judul')).toBeInTheDocument()
+  expect(screen.getByTestId('form-iumk-1-deskripsi')).toBeInTheDocument()
+  expect(screen.getByTestId('form-iumk-1-nama')).toBeInTheDocument()
+  expect(screen.getByTestId('form-iumk-1-status')).toBeInTheDocument()
+  expect(screen.getByTestId('form-iumk-1-alamat')).toBeInTheDocument()
+  expect(screen.getByTestId('form-iumk-1-barang-jasa')).toBeInTheDocument()
+})
+
+test('error message for empty name displayed', async () => {
+  const store = makeTestStore(fixtureSet)
+  testRender(<FormIUMK />, {store})
+
+  userEvent.type(screen.getByTestId('form-1-nama-field'), 'pt ABC')
+  expect(screen.getByTestId('form-1-nama-field')).toHaveValue('pt ABC')
+  userEvent.clear(screen.getByTestId('form-1-nama-field'))
+  expect(screen.getByTestId('form-1-nama-field')).toHaveValue('')
+
+  await waitFor(() => {
+    expect(screen.getByText(/Wajib diisi/i)).toBeInTheDocument()
+  })
+})
+
+test('error message for empty status entitas', async () => {
+  const store = makeTestStore(fixtureSet)
+  testRender(<FormIUMK />, {store})
+
+  userEvent.type(screen.getByTestId('form-1-nama-field'), 'pt ABC')
+  expect(screen.getByTestId('form-1-nama-field')).toHaveValue('pt ABC')
+  userEvent.type(screen.getByTestId('form-1-alamat-field'), 'my alamat')
+  expect(screen.getByTestId('form-1-alamat-field')).toHaveValue('my alamat')
+  userEvent.type(screen.getByTestId('form-1-barang-jasa-field'), 'tukang bubur')
+  expect(screen.getByTestId('form-1-barang-jasa-field')).toHaveValue(
+    'tukang bubur',
+  )
+
+  let lanjutButton = screen.getByTestId('lanjut-button')
+  fireEvent.click(lanjutButton)
+
+  await waitFor(() => {
+    expect(screen.getByText(/Wajib diisi/i)).toBeInTheDocument()
+  })
+})
+
+test('error message for empty alamat displayed', async () => {
+  const store = makeTestStore(fixtureSet)
+  testRender(<FormIUMK />, {store})
+
+  userEvent.type(screen.getByTestId('form-1-alamat-field'), 'my alamat')
+  expect(screen.getByTestId('form-1-alamat-field')).toHaveValue('my alamat')
+  userEvent.clear(screen.getByTestId('form-1-alamat-field'))
+  expect(screen.getByTestId('form-1-alamat-field')).toHaveValue('')
+
+  await waitFor(() => {
+    expect(screen.getByText(/Wajib diisi/i)).toBeInTheDocument()
+  })
+})
+
+test('error message for empty barang-jasa displayed', async () => {
+  const store = makeTestStore(fixtureSet)
+  testRender(<FormIUMK />, {store})
+
+  userEvent.type(screen.getByTestId('form-1-barang-jasa-field'), 'tukang bubur')
+  expect(screen.getByTestId('form-1-barang-jasa-field')).toHaveValue(
+    'tukang bubur',
+  )
+  userEvent.clear(screen.getByTestId('form-1-barang-jasa-field'))
+  expect(screen.getByTestId('form-1-barang-jasa-field')).toHaveValue('')
+
+  await waitFor(() => {
+    expect(screen.getByText(/Wajib diisi/i)).toBeInTheDocument()
+  })
+})

src/components/FormIUMK/FormIUMK2.js

+import EmployeeDropdown from '../Dropdown/EmployeeDropdown'
+import PropTypes from 'prop-types'
+
+const FormIUMK2 = ({
+  register,
+  errors,
+  handleSubmit,
+  onSubmit,
+  setEmployeeData,
+  setValue,
+  data,
+}) => {
+  return (
+    <form
+      className="bg-white flex flex-col px-4"
+      data-testid="form-iumk-2"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div>
+        <h1
+          className="flex flex-col heading-2 text-black justify-center items-center pb-4 pt-9 text-center"
+          data-testid="form-iumk-2-judul"
+        >
+          Ada Informasi Tambahan?
+        </h1>
+        <p
+          className="reguler-text text-center mb-10"
+          data-testid="form-iumk-2-deskripsi"
+        >
+          Beri tahu kami informasi apapun yang dapat membantu partner kami{' '}
+          <br></br>
+          memberikan penawaran yang sesuai dengan keadaan Anda
+        </p>
+      </div>
+      <div>
+        <div
+          className="flex flex-col pb-6"
+          data-testid="form-iumk-2-jumlah-karyawan"
+        >
+          <label className="mb-2 heading-3 text-black">
+            Jumlah Karyawan
+            <span className="medium-text text-black ml-1">(opsional)</span>
+          </label>
+          <EmployeeDropdown
+            setEmployeeData={setEmployeeData}
+            defaultValue={data.karyawan}
+            dataTestId="form-iumk-2-dropdown"
+          />
+        </div>
+        <div className="flex flex-col pb-6" data-testid="form-iumk-2-kode-kbli">
+          <label className="mb-2 heading-3 text-black" htmlFor="kode-klbi">
+            Kode KBLI
+            <span className="medium-text text-black ml-1">(opsional)</span>
+          </label>
+          <input
+            className="md:mr-64 lg:mr-64 xl:mr-64 2xl:mr-64 px-4 mr-24 py-2.5 border-2 border-grey rounded"
+            placeholder="Tulis Kode KBLI disini"
+            id="kode-klbi"
+            name="kbli"
+            ref={register({
+              required: false,
+              minLength: {
+                value: 5,
+                message: 'Kode KBLI harus terdiri dari 5 angka',
+              },
+              maxLength: {
+                value: 5,
+                message: 'Kode KBLI harus terdiri dari 5 angka',
+              },
+              pattern: {
+                value: /^\d+$/,
+                message: 'Kode KBLI hanya boleh mengandung angka',
+              },
+            })}
+            defaultValue={data.kbli}
+          />
+          <div>
+            {errors.kbli && (
+              <span role="alert" className="text-popred">
+                {errors.kbli.message}
+              </span>
+            )}
+          </div>
+          <br></br>
+        </div>
+        <div className="flex flex-col pb-8" data-testid="form-iumk-2-catatan">
+          <label className="mb-2 heading-3 text-black">
+            Catatan{' '}
+            <span className="medium-text text-black ml-1">(opsional)</span>
+          </label>
+          <textarea
+            className="w-full px-4 pb-32 pt-2.5 mr-6 resize-none border-2 border-grey rounded items-start"
+            placeholder="e.g.untuk pendirian PT ABC saya sudah mempunyai dokumen A, B,C ..."
+            name="catatan"
+            ref={register({
+              required: false,
+            })}
+            defaultValue={data.catatan}
+          />
+        </div>
+      </div>
+      <div className="pt-4">
+        <button
+          className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
+          data-testid="lanjut-button"
+          onClick={() => setValue('page', '3')}
+        >
+          Lanjut
+        </button>
+      </div>
+    </form>
+  )
+}
+
+FormIUMK2.propTypes = {
+  register: PropTypes.func,
+  errors: PropTypes.object,
+  handleSubmit: PropTypes.func,
+  onSubmit: PropTypes.func,
+  setEmployeeData: PropTypes.func,
+  setValue: PropTypes.func,
+  data: PropTypes.object,
+}
+
+export default FormIUMK2

src/components/FormIUMK/FormIUMK2.test.js

+import {
+  screen,
+  waitFor,
+  fireEvent,
+  waitForElementToBeRemoved,
+} from '@testing-library/react'
+import FormIUMK from '../../pages/formiumk'
+import {testRender, makeTestStore, fixtureSet} from '../../testUtils'
+import userEvent from '@testing-library/user-event'
+
+test('renders FormIUMK2 element', async () => {
+  const store = makeTestStore(fixtureSet)
+  testRender(<FormIUMK />, {store})
+
+  userEvent.type(screen.getByTestId('form-1-nama-field'), 'pt ABC')
+  userEvent.click(screen.getByTestId('form-1-status-pt'))
+  userEvent.type(
+    screen.getByTestId('form-1-alamat-field'),
+    'Jl. TB Simatupang No. 5 Ragunan, Pasar Minggu Jakarta 12550',
+  )
+  userEvent.type(
+    screen.getByTestId('form-1-barang-jasa-field'),
+    'Travel Agency',
+  )
+
+  let lanjutButton = screen.getByTestId('lanjut-button')
+  fireEvent.click(lanjutButton)
+
+  await waitForElementToBeRemoved(() => screen.getByTestId('form-1-nama-field'))
+
+  expect(screen.getByTestId('form-iumk-2')).toBeInTheDocument()
+  expect(screen.getByTestId('form-iumk-2-judul')).toBeInTheDocument()
+  expect(screen.getByTestId('form-iumk-2-deskripsi')).toBeInTheDocument()
+  expect(screen.getByTestId('form-iumk-2-jumlah-karyawan')).toBeInTheDocument()
+  expect(screen.getByTestId('form-iumk-2-kode-kbli')).toBeInTheDocument()
+  expect(screen.getByTestId('form-iumk-2-catatan')).toBeInTheDocument()
+})
+
+test('kode KBLI error if length is not five', async () => {
+  const store = makeTestStore()
+