path: root/src/lib/form/components/KunjunganSales.jsx

import odooApi from '@/core/api/odooApi';
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
import cityApi from '@/lib/address/api/cityApi';
import stateApi from '@/lib/address/api/stateApi.js';
import { yupResolver } from '@hookform/resolvers/yup';
import React, { useEffect, useRef, useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
import { Controller, useForm } from 'react-hook-form';
import { toast } from 'react-hot-toast';
import * as Yup from 'yup';
import createLeadApi from '../api/createLeadApi';
import PageContent from '@/lib/content/components/PageContent';

import useAuth from '@/core/hooks/useAuth';
import { useRouter } from 'next/router';

const KunjunganSales = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    control,
    reset,
    watch,
    setValue,
  } = useForm({
    resolver: yupResolver(validationSchema),
    defaultValues,
  });
  const [cities, setCities] = useState([]);
  const [state, setState] = useState([]);
  const [companyTypes, setCompanyTypes] = useState([]);
  const router = useRouter();

  const auth = useAuth();

  const recaptchaRef = useRef(null);

  if (auth == false) {
    router.push(`/login?next=${encodeURIComponent('/kunjungan-sales')}`);
  }

  useEffect(() => {
    const loadState = async () => {
      let dataState = await stateApi({ tempo: false });
      dataState = dataState.map((state) => ({
        value: state.id,
        label: state.name,
      }));
      setState(dataState);
    };
    loadState();
  }, []);

  const watchState = watch('state');

  useEffect(() => {
    if (auth == false) {
      return;
    }
    const loadCities = async () => {
      setValue('city', '');
      let dataCities = await cityApi({ stateId: watchState });
      dataCities = dataCities?.map((obj) => ({
        value: obj.name,
        label: obj.name,
      }));
      setCities(dataCities);
    };
    const loadCompanyTypes = async () => {
      const dataCompanyTypes = await odooApi(
        'GET',
        '/api/v1/partner/company_type'
      );
      setCompanyTypes(
        dataCompanyTypes?.map((obj) => ({ value: obj.name, label: obj.name }))
      );
    };

    loadCompanyTypes();
    loadCities();
  }, [auth, watchState, setValue]);

  const onSubmitHandler = async (values) => {
    const recaptchaValue = recaptchaRef.current.getValue();
    if (!recaptchaValue) {
      toast.error('Recaptcha harus diisi');
      return;
    }

    const data = {
      name: `Pengajuan Kunjungan Sales - ${values.company}`,
      email_from: values.email,
      phone: values.phone,
      description: [
        `Nama Perusahaan: ${values.company}`,
        `No. Telepon: ${values.phone}`,
        `Alamat Lengkap: ${values.address}`,
        `Kota: ${values.city}`,
        `Unit Perusahaan: ${values.companyType}`,
        `No. Handphone: ${values.mobile}`,
        `Alamat Email: ${values.email}`,
        `Keterangan: ${values.description}`,
      ].join('\n'),
    };

    const createLead = await createLeadApi({ data });
    if (createLead) {
      toast.success('Berhasil mengirimkan formulir kunjungan sales');
      reset();
      recaptchaRef.current.reset();
    }
  };
  if (!auth) {
    return;
  }
  return (
    <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
      <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
        Kunjungan Sales
      </h1>

      <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-x-2'>
        <form
          onSubmit={handleSubmit(onSubmitHandler)}
          className='grid grid-cols-1 gap-y-6'
        >
          <div
            className='flex items-center bg-blue-100 border border-blue-300 text-blue-500 font-medium px-4 py-3 rounded leading-6'
            role='alert'
          >
            Hubungi kami untuk mendapatkan kunjungan sales kami dan dapatkan
            berbagai kelebihannya dengan menjadi pelanggan korporat kami.
          </div>
          <div>
            <label className='form-label mb-2'>Nama Perusahan*</label>
            <input
              {...register('company')}
              placeholder='PT. Indoteknik Dotcom Gemilang'
              type='text'
              className='form-input'
              aria-invalid={errors.company?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>
              {errors.company?.message}
            </div>
          </div>

          <div>
            <label className='form-label mb-2'>No. Telepon*</label>
            <input
              {...register('phone')}
              placeholder='021XXXXXXX'
              type='text'
              className='form-input'
              aria-invalid={errors.phone?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>
              {errors.phone?.message}
            </div>
          </div>

          <div>
            <label className='form-label mb-2'>Alamat Lengkap*</label>
            <input
              {...register('address')}
              placeholder='Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan, Jakarta Utara'
              type='text'
              className='form-input'
              aria-invalid={errors.address?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>
              {errors.address?.message}
            </div>
          </div>

          <div>
            <label className='form-label mb-2'>Provinsi*</label>
            <Controller
              name='state'
              control={control}
              render={(props) => <HookFormSelect {...props} options={state} />}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>
              {errors.stateId?.message}
            </div>
          </div>

          <div>
            <label className='form-label mb-2'>Kota*</label>
            <Controller
              name='city'
              control={control}
              render={(props) => <HookFormSelect {...props} options={cities} />}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>
              {errors.city?.message}
            </div>
          </div>

          <div>
            <label className='form-label mb-2'>Unit Perusahaan</label>
            <Controller
              name='companyType'
              control={control}
              render={(props) => (
                <HookFormSelect {...props} options={companyTypes} />
              )}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>
              {errors.companyType?.message}
            </div>
          </div>

          <div>
            <label className='form-label mb-2'>No. Handphone*</label>
            <input
              {...register('mobile')}
              placeholder='628XXXXXXX'
              type='text'
              className='form-input'
              aria-invalid={errors.mobile?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>
              {errors.mobile?.message}
            </div>
          </div>

          <div>
            <label className='form-label mb-2'>Alamat Email*</label>
            <input
              {...register('email')}
              placeholder='contoh@email.com'
              type='email'
              className='form-input'
              aria-invalid={errors.email?.message}
            />
            <div className='text-caption-2 text-danger-500 mt-1'>
              {errors.email?.message}
            </div>
          </div>

          <div>
            <label className='form-label mb-2'>Keterangan</label>
            <textarea
              {...register('description')}
              type='text'
              className='form-input'
            />
          </div>

          <ReCAPTCHA
            ref={recaptchaRef}
            sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
          />

          <button
            type='submit'
            className='btn-yellow w-full md:w-fit ml-0 md:ml-auto'
          >
            Simpan
          </button>
        </form>
        <PageContent path='/kunjungan-sales' />
      </div>
    </div>
  );
};

const validationSchema = Yup.object().shape({
  email: Yup.string()
    .email('Format harus seperti contoh@email.com')
    .required('Harus di-isi'),
  company: Yup.string().required('Harus di-isi'),
  phone: Yup.string().required('Harus di-isi'),
  mobile: Yup.string().required('Harus di-isi'),
  address: Yup.string().required('Harus di-isi'),
  city: Yup.string().required('Harus dipilih'),
  state: Yup.string().required('Harus dipilih'),
});

const defaultValues = {
  email: '',
  company: '',
  phone: '',
  mobile: '',
  address: '',
  city: '',
  state: '',
  companyType: '',
  description: '',
};

export default KunjunganSales;