(andri) resolve conflict

1 files changed, 147 insertions, 0 deletions

diff --git a/src/lib/merchant/components/Merchant.jsx b/src/lib/merchant/components/Merchant.jsx
new file mode 100644
index 00000000..3c16e3ba
--- /dev/null
+++ b/src/lib/merchant/components/Merchant.jsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import { useMemo, useState, useEffect, useRef } from 'react';
+import Image from '~/components/ui/image';
+import InformasiPerusahaan from './InformasiPerusahaan';
+import InformasiVendor from './InformasiVendor';
+import SyaratDagang from './SyaratDagang';
+import Dokumen from './Dokumen';
+import Konfirmasi from './Konfirmasi';
+import { getAuth } from '~/libs/auth';
+import { setAuth } from '@/core/utils/auth';
+import useAuth from '@/core/hooks/useAuth';
+import { useRouter } from 'next/router';
+import { Controller, useForm } from 'react-hook-form';
+import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
+import clsxm from '~/libs/clsxm';
+import { toast } from 'react-hot-toast';
+import useDevice from '@/core/hooks/useDevice';
+import odooApi from '~/libs/odooApi';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import PageContent from '@/lib/content/components/PageContent';
+const Merchant = () => {
+  const { isDesktop, isMobile } = useDevice();
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const NUMBER_OF_STEPS = 5;
+  const [isLoading, setIsLoading] = useState(false);
+  const [bigData, setBigData] = useState();
+  const [idTempo, setIdTempo] = useState(0);
+  const { control, watch, setValue } = useForm();
+  const auth = useAuth();
+  const router = useRouter();
+  const [BannerTempo, setBannerTempo] = useState();
+  const [notValid, setNotValid] = useState(false);
+  const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
+
+  const [error, setError] = useState(false);
+
+  const handleIsError = (value) => {
+    if (!value) {
+      goToNextStep();
+    }
+    setError(value); // Memperbarui state berdasarkan isError
+  };
+  const stepDivs = [
+    <InformasiPerusahaan
+      handleIsError={handleIsError}
+      buttonSubmitClick={buttonSubmitClick}
+    />,
+    <InformasiVendor
+      handleIsError={handleIsError}
+      buttonSubmitClick={buttonSubmitClick}
+    />,
+    <SyaratDagang
+      handleIsError={handleIsError}
+      buttonSubmitClick={buttonSubmitClick}
+    />,
+    <Dokumen
+      handleIsError={handleIsError}
+      buttonSubmitClick={buttonSubmitClick}
+    />,
+    <Konfirmasi handleIsError={handleIsError} />,
+  ];
+
+  const stepLabels = [
+    'informasi_perusahaan',
+    'kontak_person',
+    'Pengiriman',
+    'Referensi',
+    'Dokumen',
+    'Konfirmasi',
+  ];
+
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, [currentStep]);
+
+  useEffect(() => {
+    <InformasiPerusahaan buttonSubmitClick={buttonSubmitClick} />;
+  }, [buttonSubmitClick]);
+
+  const goToNextStep = () => {
+    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));
+  };
+
+  const goPrevStep = () => {
+    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev - 1));
+  };
+
+  useEffect(() => {
+    const getBanner = async () => {
+      const get = await odooApi('GET', '/api/v1/banner?type=banner-form-tempo');
+      // setBannerTempo(get[0].image);
+      setBannerTempo(
+        'https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/431'
+      );
+    };
+    getBanner();
+  }, []);
+  return (
+    <>
+      <div className='container flex flex-col items-center '>
+        {BannerTempo && (
+          <Image
+            src={BannerTempo}
+            alt='FORM Tempo'
+            width={500}
+            height={160}
+            className='w-full mt-6'
+          />
+        )}
+        <h1 className=' font-semibold text-center mb-6'>Form Merchant</h1>
+        <p
+          className={`text-center  ${
+            isMobile ? 'w-full text-sm' : 'w-3/4 mb-4'
+          }`}
+        >
+          Pembayaran tempo adalah layanan pembayaran berjangka yang difasilitasi
+          indoteknik.com untuk konsumen akun bisnis yang terdaftar dengan waktu
+          pembayaran mulai dari 7, 14, 21 hingga 30 Hari.
+        </p>
+      </div>
+      <div
+        className={`h-[2px] w-full ${isMobile ? 'mt-4' : 'mb-4'}  bg-gray_r-3`}
+      />
+
+      <div className={`container ${isMobile ? 'mt-4' : ''} flex flex-col`}>
+        <div>{stepDivs[currentStep]}</div>
+        {isDesktop && <section className='flex gap-10 mt-10'></section>}
+        {isMobile && (
+          <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
+        )}
+        <div
+          className={`flex ${
+            isMobile
+              ? 'flex-col justify-start items-start'
+              : 'flex-col justify-end items-end'
+          }    mb-8 gap-2`}
+        ></div>
+      </div>
+    </>
+  );
+};
+
+export default Merchant;