From 34f33b1cba1e4fbb6faacc151a3b59a1ba221d60 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 10 Sep 2024 16:26:17 +0700 Subject: add feature switch account --- src/lib/auth/components/SwitchAccount.jsx | 144 ++++++++++++++++++++++++++++++ src/pages/my/profile.jsx | 68 +++++++++----- 2 files changed, 190 insertions(+), 22 deletions(-) create mode 100644 src/lib/auth/components/SwitchAccount.jsx diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx new file mode 100644 index 00000000..e1249779 --- /dev/null +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -0,0 +1,144 @@ +import useAuth from '@/core/hooks/useAuth'; +import { setAuth } from '@/core/utils/auth'; +import addressApi from '@/lib/address/api/addressApi'; +import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; +import { useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; +import editPersonalProfileApi from '../api/editPersonalProfileApi'; +import FormBisnis from '~/modules/register/components/FormBisnis.tsx'; +import RegistrasiBisnis from '~/modules/register/components/RegistrasiBisnis.tsx'; +import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react'; +import { useRegisterStore } from '~/modules/register/stores/useRegisterStore.ts'; +const SwitchAccount = () => { + const auth = useAuth(); + const [isOpen, setIsOpen] = useState(true); + const toggle = () => setIsOpen(!isOpen); + const [isPKP, setIsPKP] = useState(true); + const [isTerdaftar, setIsTerdaftar] = useState(false); + const [isChecked, setIsChecked] = useState(false); + const [selectedValueBisnis, setSelectedValueBisnis] = useState('false'); + const [selectedValue, setSelectedValue] = useState('PKP'); + const { register, setValue, handleSubmit } = useForm({ + defaultValues: { + email: '', + name: '', + phone: '', + password: '', + }, + }); + + const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } = + useRegisterStore(); + console.log('form', form); + useEffect(() => { + const loadProfile = async () => { + const dataProfile = await addressApi({ id: auth.partnerId }); + setValue('email', dataProfile?.email); + setValue('name', dataProfile?.name); + setValue('phone', dataProfile?.phone); + }; + if (auth) loadProfile(); + }, [auth, setValue]); + + useEffect(() => { + if (selectedValue === 'PKP') { + updateForm('is_pkp', 'true'); + validate(); + } else { + updateForm('is_pkp', 'false'); + validate(); + } + }, [selectedValue]); + + useEffect(() => { + if (isTerdaftar) { + updateForm('is_terdaftar', 'true'); + validate(); + } else { + updateForm('is_terdaftar', 'false'); + validate(); + } + }, [isTerdaftar]); + + const handleChangeBisnis = (value) => { + setSelectedValueBisnis(value); + if (value === 'true') { + validate(); + setIsTerdaftar(true); + } else { + validate(); + setIsTerdaftar(false); + } + }; + const handleChange = (value) => { + setSelectedValue(value); + if (value === 'PKP') { + validate(); + setIsPKP(true); + } else { + validate(); + setIsPKP(false); + setIsPKP(false); + } + }; + return ( + <> + + + {isOpen && ( +
+
+

+ Bisnis Terdaftar di Indoteknik? +

+ + + + Sudah Terdaftar + + + Belum Terdaftar + + + +
+
+

Tipe Bisnis

+ + + + PKP + + + Non-PKP + + + +
+ +
+ )} + + ); +}; + +export default SwitchAccount; diff --git a/src/pages/my/profile.jsx b/src/pages/my/profile.jsx index 25c3a608..ca6f4700 100644 --- a/src/pages/my/profile.jsx +++ b/src/pages/my/profile.jsx @@ -1,16 +1,23 @@ -import Divider from '@/core/components/elements/Divider/Divider' -import AppLayout from '@/core/components/layouts/AppLayout' -import BasicLayout from '@/core/components/layouts/BasicLayout' -import DesktopView from '@/core/components/views/DesktopView' -import MobileView from '@/core/components/views/MobileView' -import useAuth from '@/core/hooks/useAuth' -import CompanyProfile from '@/lib/auth/components/CompanyProfile' -import IsAuth from '@/lib/auth/components/IsAuth' -import Menu from '@/lib/auth/components/Menu' -import PersonalProfile from '@/lib/auth/components/PersonalProfile' +import Divider from '@/core/components/elements/Divider/Divider'; +import AppLayout from '@/core/components/layouts/AppLayout'; +import BasicLayout from '@/core/components/layouts/BasicLayout'; +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +import useAuth from '@/core/hooks/useAuth'; +import CompanyProfile from '@/lib/auth/components/CompanyProfile'; +import SwitchAccount from '@/lib/auth/components/SwitchAccount'; +import IsAuth from '@/lib/auth/components/IsAuth'; +import Menu from '@/lib/auth/components/Menu'; +import PersonalProfile from '@/lib/auth/components/PersonalProfile'; +import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react'; +import { useState } from 'react'; export default function Profile() { - const auth = useAuth() + const auth = useAuth(); + const [isChecked, setIsChecked] = useState(false); + const handleChange = async () => { + setIsChecked(!isChecked); + }; return ( @@ -23,19 +30,36 @@ export default function Profile() { -
-
- -
-
- - - {auth?.parentId && } - -
+
+
+ +
+
+ {!auth?.parentId && ( +
+ +

Ubah ke akun bisnis

+
+ )} + {isChecked && ( +
+ + +
+ )} + + + {auth?.parentId && } +
- ) + ); } -- cgit v1.2.3 From b89d57916ec9d2be3db786a8481a0acc5fd74e2f Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 11 Sep 2024 11:11:38 +0700 Subject: update tampilan desktop switcj account --- .../modules/register/components/FormBisnis.tsx | 85 ++++++++++++++-------- src/lib/auth/components/SwitchAccount.jsx | 2 +- 2 files changed, 55 insertions(+), 32 deletions(-) diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 2080ae75..70b6df1f 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -292,7 +292,12 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { />
-
+
-
+
-
-
+
+
= ({ type, required, isPKP, chekValid }) => { )}
-
+
= ({ type, required, isPKP, chekValid }) => {
-
+
- ( - +
+ ( + + )} + /> + {selectedCategory && ( + + Kategori : {selectedCategory} + )} - /> - {selectedCategory && ( - - Kategori : {selectedCategory} - - )} +
{chekValid && !required && !!errors.industry_id && ( {errors.industry_id} )} @@ -404,7 +413,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { name='alamat_bisnis' placeholder='Masukan alamat bisnis anda' value={!required ? form.alamat_bisnis : ''} - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input mt-3 max-h-11 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -431,7 +442,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { name='nama_wajib_pajak' placeholder='Masukan nama lengkap anda' value={!required ? form.nama_wajib_pajak : ''} - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input mt-3 max-h-11 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -483,7 +496,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { : form.alamat_wajib_pajak : '' } - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input max-h-11 mt-3 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={isChekBox || required} contentEditable={required} readOnly={required} @@ -510,7 +525,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='tel' id='npwp' name='npwp' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input max-h-11 mt-3 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -567,7 +584,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='tel' id='sppkp' name='sppkp' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input max-h-11 mt-3 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -594,7 +613,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='file' id='npwp_document' name='npwp_document' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input ${ + type === 'bisnis' ? '' : 'border-none' + } mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} contentEditable={required} readOnly={required} @@ -619,7 +640,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='file' id='sppkp_document' name='sppkp_document' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input ${ + type === 'bisnis' ? '' : 'border-none' + } mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} contentEditable={required} readOnly={required} diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index e1249779..da0ff068 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -134,7 +134,7 @@ const SwitchAccount = () => {
- +
)} -- cgit v1.2.3 From f67560a48990dddcc820c5233a5bf3270d1d69d0 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 11 Sep 2024 11:54:05 +0700 Subject: update switch account --- .../modules/register/components/FormBisnis.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 70b6df1f..6631cb3b 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -293,9 +293,11 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => {
@@ -378,7 +380,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { -
+
= ({ type, required, isPKP, chekValid }) => { /> )} /> - {selectedCategory && ( - - Kategori : {selectedCategory} - - )}
+ {selectedCategory && ( + + Kategori : {selectedCategory} + + )} {chekValid && !required && !!errors.industry_id && ( {errors.industry_id} )} -- cgit v1.2.3 From ab39764b288b4d60923cc8cc6146ccdc1b4bfbac Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 11 Sep 2024 14:01:53 +0700 Subject: update switch acc --- .../modules/register/components/FormBisnis.tsx | 8 ++-- src/lib/auth/components/SwitchAccount.jsx | 49 ++++++++++++++++++++-- 2 files changed, 50 insertions(+), 7 deletions(-) diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 6631cb3b..73de60cb 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -296,7 +296,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { className={` ${ type === 'bisnis' ? 'mt-6 grid grid-cols-1 gap-y-4' - : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-2' + : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-5 auto-rows-min' }`} onSubmit={handleSubmit} > @@ -332,11 +332,11 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { )}
-
+
-
+
= ({ type, required, isPKP, chekValid }) => { -
+
{ const auth = useAuth(); const [isOpen, setIsOpen] = useState(true); @@ -27,10 +30,14 @@ const SwitchAccount = () => { password: '', }, }); - + const mutation = useMutation({ + mutationFn: (data) => registerUser(data), + }); + const [notValid, setNotValid] = useState(false); const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } = useRegisterStore(); console.log('form', form); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); useEffect(() => { const loadProfile = async () => { const dataProfile = await addressApi({ id: auth.partnerId }); @@ -82,6 +89,28 @@ const SwitchAccount = () => { setIsPKP(false); } }; + + const onSubmitHandler = async (values) => { + let data = values; + console.log('data', data); + if (!isFormValid) { + setNotValid(true); + return; + } else { + setNotValid(false); + } + // if (!values.password) delete data.password; + // const isUpdated = await editPersonalProfileApi({ data }); + + // if (isUpdated?.user) { + // setAuth(isUpdated.user); + // setValue('password', ''); + // toast.success('Berhasil mengubah profil', { duration: 1500 }); + // return; + // } + // toast.error('Terjadi kesalahan internal'); + }; + return ( <>
- +
)} +
+ +
); }; -- cgit v1.2.3 From 752e55686dfee0d536f9e4e128336e91681ba794 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 11 Sep 2024 17:07:49 +0700 Subject: update switch account --- .../modules/register/components/FormBisnis.tsx | 4 +- src/lib/auth/api/switchAccountApi.js | 14 +++ src/lib/auth/api/switchAccountProgresApi.js | 15 +++ src/lib/auth/components/PersonalProfile.jsx | 104 +++++++++++++-------- src/lib/auth/components/SwitchAccount.jsx | 37 +++++--- src/pages/my/profile.jsx | 17 +++- 6 files changed, 134 insertions(+), 57 deletions(-) create mode 100644 src/lib/auth/api/switchAccountApi.js create mode 100644 src/lib/auth/api/switchAccountProgresApi.js diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 73de60cb..85bb491d 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -296,7 +296,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { className={` ${ type === 'bisnis' ? 'mt-6 grid grid-cols-1 gap-y-4' - : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-5 auto-rows-min' + : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-6 auto-rows-min' }`} onSubmit={handleSubmit} > @@ -332,7 +332,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { )}
-
+
diff --git a/src/lib/auth/api/switchAccountApi.js b/src/lib/auth/api/switchAccountApi.js new file mode 100644 index 00000000..9b772d20 --- /dev/null +++ b/src/lib/auth/api/switchAccountApi.js @@ -0,0 +1,14 @@ +import odooApi from '@/core/api/odooApi'; +import { getAuth } from '@/core/utils/auth'; + +const switchAccountApi = async ({ data }) => { + const auth = getAuth(); + const switchAccount = await odooApi( + 'PUT', + `/api/v1/user/${auth.partner_id}/switch`, + data + ); + return switchAccount; +}; + +export default switchAccountApi; diff --git a/src/lib/auth/api/switchAccountProgresApi.js b/src/lib/auth/api/switchAccountProgresApi.js new file mode 100644 index 00000000..4005ce3c --- /dev/null +++ b/src/lib/auth/api/switchAccountProgresApi.js @@ -0,0 +1,15 @@ +import odooApi from '@/core/api/odooApi'; +import { getAuth } from '@/core/utils/auth'; + +const switchAccountProgresApi = async () => { + const auth = getAuth(); + console.log('auth', auth); + const switchAccount = await odooApi( + 'PUT', + `/api/v1/user/${auth.partner_id}/switch_progres` + ); + console.log('switchAccount', switchAccount); + return switchAccount; +}; + +export default switchAccountProgresApi; diff --git a/src/lib/auth/components/PersonalProfile.jsx b/src/lib/auth/components/PersonalProfile.jsx index b9fb3f5f..7ef3af2d 100644 --- a/src/lib/auth/components/PersonalProfile.jsx +++ b/src/lib/auth/components/PersonalProfile.jsx @@ -1,56 +1,61 @@ -import useAuth from '@/core/hooks/useAuth' -import { setAuth } from '@/core/utils/auth' -import addressApi from '@/lib/address/api/addressApi' -import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline' -import { useEffect, useState } from 'react' -import { useForm } from 'react-hook-form' -import { toast } from 'react-hot-toast' -import editPersonalProfileApi from '../api/editPersonalProfileApi' +import useAuth from '@/core/hooks/useAuth'; +import { setAuth } from '@/core/utils/auth'; +import addressApi from '@/lib/address/api/addressApi'; +import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; +import { useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; +import editPersonalProfileApi from '../api/editPersonalProfileApi'; const PersonalProfile = () => { - const auth = useAuth() - const [isOpen, setIsOpen] = useState(true) - const toggle = () => setIsOpen(!isOpen) + const auth = useAuth(); + const [isOpen, setIsOpen] = useState(true); + const toggle = () => setIsOpen(!isOpen); const { register, setValue, handleSubmit } = useForm({ defaultValues: { email: '', name: '', mobile: '', - password: '' - } - }) + password: '', + }, + }); useEffect(() => { const loadProfile = async () => { - const dataProfile = await addressApi({ id: auth.partnerId }) - setValue('email', dataProfile?.email) - setValue('name', dataProfile?.name) - setValue('mobile', dataProfile?.mobile) - } - if (auth) loadProfile() - }, [auth, setValue]) + const dataProfile = await addressApi({ id: auth.partner_id }); + setValue('email', dataProfile?.email); + setValue('name', dataProfile?.name); + setValue('mobile', dataProfile?.mobile); + }; + if (auth) loadProfile(); + }, [auth, setValue]); const onSubmitHandler = async (values) => { - let data = values - if (!values.password) delete data.password - const isUpdated = await editPersonalProfileApi({ data }) + let data = values; + if (!values.password) delete data.password; + const isUpdated = await editPersonalProfileApi({ data }); if (isUpdated?.user) { - setAuth(isUpdated.user) - setValue('password', '') - toast.success('Berhasil mengubah profil', { duration: 1500 }) - return + setAuth(isUpdated.user); + setValue('password', ''); + toast.success('Berhasil mengubah profil', { duration: 1500 }); + return; } - toast.error('Terjadi kesalahan internal') - } + toast.error('Terjadi kesalahan internal'); + }; return ( <> - {isOpen && ( - +
- +
- +
- +
@@ -84,13 +105,16 @@ const PersonalProfile = () => { />
- )} - ) -} + ); +}; -export default PersonalProfile +export default PersonalProfile; diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index 71571bd7..3146a3da 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -5,7 +5,7 @@ import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; import { useEffect, useState, useMemo } from 'react'; import { useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; -import editPersonalProfileApi from '../api/editPersonalProfileApi'; +import switchAccountApi from '../api/switchAccountApi'; import FormBisnis from '~/modules/register/components/FormBisnis.tsx'; import RegistrasiBisnis from '~/modules/register/components/RegistrasiBisnis.tsx'; import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react'; @@ -68,6 +68,14 @@ const SwitchAccount = () => { } }, [isTerdaftar]); + useEffect(() => { + updateForm('name', '-'); + updateForm('email', 'example@mail.com'); + updateForm('password', 'example@mail.com'); + updateForm('phone', '081234567890'); + validate(); + }, []); + const handleChangeBisnis = (value) => { setSelectedValueBisnis(value); if (value === 'true') { @@ -89,26 +97,31 @@ const SwitchAccount = () => { setIsPKP(false); } }; - + console.log('auth', auth); const onSubmitHandler = async (values) => { - let data = values; + let data = form; console.log('data', data); if (!isFormValid) { + console.log('masih ada yang belum valid'); setNotValid(true); return; } else { setNotValid(false); } // if (!values.password) delete data.password; - // const isUpdated = await editPersonalProfileApi({ data }); + const isUpdated = await switchAccountApi({ data }); + console.log('isupdate', isUpdated); - // if (isUpdated?.user) { - // setAuth(isUpdated.user); - // setValue('password', ''); - // toast.success('Berhasil mengubah profil', { duration: 1500 }); - // return; - // } - // toast.error('Terjadi kesalahan internal'); + if (isUpdated.switch === 'Pending') { + // setAuth(isUpdated.user); + // setValue('password', ''); + toast.success('Berhasil mengubah akun', { duration: 1500 }); + setTimeout(() => { + window.location.reload(); + }, 1500); + return; + } + toast.error('Terjadi kesalahan internal'); }; return ( @@ -171,7 +184,7 @@ const SwitchAccount = () => { />
)} -
+
- {!auth?.parentId && ( + {!auth?.parentId && !isAprove && (
Date: Thu, 12 Sep 2024 10:11:02 +0700 Subject: update switch account --- src/lib/auth/api/switchAccountProgresApi.js | 2 +- src/lib/auth/components/CompanyProfile.jsx | 168 +++++++++++++++--------- src/lib/auth/components/PersonalProfile.jsx | 4 +- src/lib/auth/components/StatusSwitchAccount.jsx | 5 + src/pages/my/profile.jsx | 14 +- 5 files changed, 123 insertions(+), 70 deletions(-) create mode 100644 src/lib/auth/components/StatusSwitchAccount.jsx diff --git a/src/lib/auth/api/switchAccountProgresApi.js b/src/lib/auth/api/switchAccountProgresApi.js index 4005ce3c..23e06742 100644 --- a/src/lib/auth/api/switchAccountProgresApi.js +++ b/src/lib/auth/api/switchAccountProgresApi.js @@ -5,7 +5,7 @@ const switchAccountProgresApi = async () => { const auth = getAuth(); console.log('auth', auth); const switchAccount = await odooApi( - 'PUT', + 'GET', `/api/v1/user/${auth.partner_id}/switch_progres` ); console.log('switchAccount', switchAccount); diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index e37decc9..20be6829 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -1,18 +1,18 @@ -import odooApi from '@/core/api/odooApi' -import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' -import useAuth from '@/core/hooks/useAuth' -import addressApi from '@/lib/address/api/addressApi' -import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline' -import { useEffect, useState } from 'react' -import { Controller, useForm } from 'react-hook-form' -import { toast } from 'react-hot-toast' -import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import odooApi from '@/core/api/odooApi'; +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import useAuth from '@/core/hooks/useAuth'; +import addressApi from '@/lib/address/api/addressApi'; +import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; +import { useEffect, useState } from 'react'; +import { Controller, useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; const CompanyProfile = () => { - const [changeConfirmation, setChangeConfirmation] = useState(false) - const auth = useAuth() - const [isOpen, setIsOpen] = useState(false) - const toggle = () => setIsOpen(!isOpen) + const [changeConfirmation, setChangeConfirmation] = useState(false); + const auth = useAuth(); + const [isOpen, setIsOpen] = useState(false); + const toggle = () => setIsOpen(!isOpen); const { register, setValue, control, handleSubmit } = useForm({ defaultValues: { industry: '', @@ -20,64 +20,77 @@ const CompanyProfile = () => { name: '', taxName: '', npwp: '', - alamat_wajib_pajak:'', - } - }) + alamat_wajib_pajak: '', + }, + }); - const [industries, setIndustries] = useState([]) + const [industries, setIndustries] = useState([]); useEffect(() => { const loadIndustries = async () => { - const dataIndustries = await odooApi('GET', '/api/v1/partner/industry') - setIndustries(dataIndustries?.map((o) => ({ value: o.id, label: o.name }))) - } - loadIndustries() - }, []) + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); + setIndustries( + dataIndustries?.map((o) => ({ value: o.id, label: o.name })) + ); + }; + loadIndustries(); + }, []); - const [companyTypes, setCompanyTypes] = useState([]) + const [companyTypes, setCompanyTypes] = useState([]); useEffect(() => { const loadCompanyTypes = async () => { - const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type') - setCompanyTypes(dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name }))) - } - loadCompanyTypes() - }, []) + const dataCompanyTypes = await odooApi( + 'GET', + '/api/v1/partner/company_type' + ); + setCompanyTypes( + dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name })) + ); + }; + loadCompanyTypes(); + }, []); useEffect(() => { const loadProfile = async () => { - const dataProfile = await addressApi({ id: auth.parentId }) - setValue('name', dataProfile.name) - setValue('industry', dataProfile.industryId) - setValue('companyType', dataProfile.companyTypeId) - setValue('taxName', dataProfile.taxName) - setValue('npwp', dataProfile.npwp) - setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak) - } - if (auth) loadProfile() - }, [auth, setValue]) + const dataProfile = await addressApi({ + id: auth.parentId ? auth.parentId : auth.parent_id, + }); + setValue('name', dataProfile.name); + setValue('industry', dataProfile.industryId); + setValue('companyType', dataProfile.companyTypeId); + setValue('taxName', dataProfile.taxName); + setValue('npwp', dataProfile.npwp); + setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak); + }; + if (auth) loadProfile(); + }, [auth, setValue]); const onSubmitHandler = async (values) => { - if(changeConfirmation){ + if (changeConfirmation) { const data = { ...values, - id_user:auth.partnerId, + id_user: auth.partnerId, company_type_id: values.companyType, industry_id: values.industry, tax_name: values.taxName, - alamat_lengkap_text:values.alamat_wajib_pajak - } - const isUpdated = await odooApi('PUT', `/api/v1/partner/${auth.parentId}`, data) + alamat_lengkap_text: values.alamat_wajib_pajak, + }; + const isUpdated = await odooApi( + 'PUT', + `/api/v1/partner/${auth.parentId}`, + data + ); if (isUpdated?.id) { - toast.success('Berhasil mengubah profil', { duration: 1500 }) - return + toast.success('Berhasil mengubah profil', { duration: 1500 }); + return; } - toast.error('Terjadi kesalahan internal') + toast.error('Terjadi kesalahan internal'); } - } + }; const handleConfirmSubmit = () => { - setChangeConfirmation(false) - handleSubmit(onSubmitHandler)() - } + setChangeConfirmation(false); + handleSubmit(onSubmitHandler)(); + }; return ( <> @@ -106,11 +119,16 @@ const CompanyProfile = () => {
- {isOpen && ( -
{ - e.preventDefault() - setChangeConfirmation(true) - }}> + { + e.preventDefault(); + setChangeConfirmation(true); + }} + >
} + render={(props) => ( + + )} />
@@ -139,7 +162,9 @@ const CompanyProfile = () => { } + render={(props) => ( + + )} />
@@ -153,14 +178,27 @@ const CompanyProfile = () => {
- +
- -
+ +
+
- +
- {!auth?.parentId && !isAprove && ( + {!auth?.parentId && isAprove == 'unknown' && (
)} + {!auth?.parentId + ? auth?.parentId + : auth?.parent_id && + isAprove != 'unknown' && ( + + )} {auth?.parentId && } -- cgit v1.2.3 From 870bede9df9920b23f2e5cb771ff5ae6448e3ac7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 18 Sep 2024 15:19:29 +0700 Subject: update switch account --- src/lib/auth/components/SwitchAccount.jsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index 3146a3da..b7b67864 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -182,17 +182,17 @@ const SwitchAccount = () => { isPKP={isPKP} chekValid={notValid} /> +
+ +
)} -
- -
); }; -- cgit v1.2.3 From f0f002ff77481db91d264069d09f580d58001a8c Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 23 Sep 2024 13:15:02 +0700 Subject: update switch account --- src/lib/auth/api/switchAccountApi.js | 2 +- src/lib/auth/api/switchAccountProgresApi.js | 2 +- src/lib/auth/components/SwitchAccount.jsx | 12 ++++++++---- src/pages/my/profile.jsx | 4 +++- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/lib/auth/api/switchAccountApi.js b/src/lib/auth/api/switchAccountApi.js index 9b772d20..79ca2553 100644 --- a/src/lib/auth/api/switchAccountApi.js +++ b/src/lib/auth/api/switchAccountApi.js @@ -5,7 +5,7 @@ const switchAccountApi = async ({ data }) => { const auth = getAuth(); const switchAccount = await odooApi( 'PUT', - `/api/v1/user/${auth.partner_id}/switch`, + `/api/v1/user/${auth.partnerId}/switch`, data ); return switchAccount; diff --git a/src/lib/auth/api/switchAccountProgresApi.js b/src/lib/auth/api/switchAccountProgresApi.js index 23e06742..ba1c35fa 100644 --- a/src/lib/auth/api/switchAccountProgresApi.js +++ b/src/lib/auth/api/switchAccountProgresApi.js @@ -6,7 +6,7 @@ const switchAccountProgresApi = async () => { console.log('auth', auth); const switchAccount = await odooApi( 'GET', - `/api/v1/user/${auth.partner_id}/switch_progres` + `/api/v1/user/${auth.partnerId}/switch_progres` ); console.log('switchAccount', switchAccount); return switchAccount; diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index b7b67864..bc9dee36 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -22,6 +22,7 @@ const SwitchAccount = () => { const [isChecked, setIsChecked] = useState(false); const [selectedValueBisnis, setSelectedValueBisnis] = useState('false'); const [selectedValue, setSelectedValue] = useState('PKP'); + const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const { register, setValue, handleSubmit } = useForm({ defaultValues: { email: '', @@ -99,20 +100,22 @@ const SwitchAccount = () => { }; console.log('auth', auth); const onSubmitHandler = async (values) => { - let data = form; - console.log('data', data); + // let data = { ...form, id: `${auth.partnerId}` }; + const data = form; if (!isFormValid) { - console.log('masih ada yang belum valid'); setNotValid(true); + setButtonSubmitClick(!buttonSubmitClick); return; } else { + setButtonSubmitClick(!buttonSubmitClick); setNotValid(false); } // if (!values.password) delete data.password; + console.log('data', data); const isUpdated = await switchAccountApi({ data }); console.log('isupdate', isUpdated); - if (isUpdated.switch === 'Pending') { + if (isUpdated?.switch === 'Pending') { // setAuth(isUpdated.user); // setValue('password', ''); toast.success('Berhasil mengubah akun', { duration: 1500 }); @@ -181,6 +184,7 @@ const SwitchAccount = () => { required={isTerdaftar} isPKP={isPKP} chekValid={notValid} + buttonSubmitClick={buttonSubmitClick} />
- {!auth?.parentId && isAprove == 'unknown' && ( + {!auth?.parentId && ubahAkun && (
Date: Mon, 23 Sep 2024 13:34:11 +0700 Subject: setValue('alamat_bisnis', dataProfile.alamatBisnis); --- src/lib/auth/components/CompanyProfile.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index 6100e626..7bebb02f 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -62,6 +62,7 @@ const CompanyProfile = () => { setValue('taxName', dataProfile.taxName); setValue('npwp', dataProfile.npwp); setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak); + setValue('alamat_bisnis', dataProfile.alamatBisnis); }; if (auth) loadProfile(); }, [auth, setValue]); -- cgit v1.2.3 From f404f9801db1f234ae03ec9c9542ba5d4aa1bf46 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 23 Sep 2024 14:17:52 +0700 Subject: delete console.log --- src/lib/auth/api/switchAccountProgresApi.js | 2 -- src/lib/auth/components/SwitchAccount.jsx | 4 ---- src/pages/my/profile.jsx | 2 -- 3 files changed, 8 deletions(-) diff --git a/src/lib/auth/api/switchAccountProgresApi.js b/src/lib/auth/api/switchAccountProgresApi.js index ba1c35fa..6289a5dd 100644 --- a/src/lib/auth/api/switchAccountProgresApi.js +++ b/src/lib/auth/api/switchAccountProgresApi.js @@ -3,12 +3,10 @@ import { getAuth } from '@/core/utils/auth'; const switchAccountProgresApi = async () => { const auth = getAuth(); - console.log('auth', auth); const switchAccount = await odooApi( 'GET', `/api/v1/user/${auth.partnerId}/switch_progres` ); - console.log('switchAccount', switchAccount); return switchAccount; }; diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index bc9dee36..e737ef6a 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -37,7 +37,6 @@ const SwitchAccount = () => { const [notValid, setNotValid] = useState(false); const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } = useRegisterStore(); - console.log('form', form); const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); useEffect(() => { const loadProfile = async () => { @@ -98,7 +97,6 @@ const SwitchAccount = () => { setIsPKP(false); } }; - console.log('auth', auth); const onSubmitHandler = async (values) => { // let data = { ...form, id: `${auth.partnerId}` }; const data = form; @@ -111,9 +109,7 @@ const SwitchAccount = () => { setNotValid(false); } // if (!values.password) delete data.password; - console.log('data', data); const isUpdated = await switchAccountApi({ data }); - console.log('isupdate', isUpdated); if (isUpdated?.switch === 'Pending') { // setAuth(isUpdated.user); diff --git a/src/pages/my/profile.jsx b/src/pages/my/profile.jsx index 13cab06d..0eeec6cf 100644 --- a/src/pages/my/profile.jsx +++ b/src/pages/my/profile.jsx @@ -28,11 +28,9 @@ export default function Profile() { setIsAprove(progresSwitchAccount.status); setUbahAkun(progresSwitchAccount.status === 'unknown'); } - console.log('progresSwitchAccount', progresSwitchAccount); }; loadPromo(); }, []); - console.log('isAprove', isAprove); return ( -- cgit v1.2.3 From c0a72c10864ee5e70ebfba4718be25eba910ccf0 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 23 Sep 2024 16:13:10 +0700 Subject: update mobile view --- src/lib/auth/components/SwitchAccount.jsx | 10 ++++++++-- src/pages/my/profile.jsx | 24 ++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index e737ef6a..18c6076f 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -13,7 +13,9 @@ import { useRegisterStore } from '~/modules/register/stores/useRegisterStore.ts' import { registerUser } from '~/services/auth'; import { useMutation } from 'react-query'; import { isValid } from 'zod'; +import useDevice from '@/core/hooks/useDevice'; const SwitchAccount = () => { + const { isDesktop, isMobile } = useDevice(); const auth = useAuth(); const [isOpen, setIsOpen] = useState(true); const toggle = () => setIsOpen(!isOpen); @@ -130,7 +132,11 @@ const SwitchAccount = () => { onClick={toggle} className='p-4 flex items-center text-left w-full' > -
+
Informasi Bisnis
*Perubahan akun tidak dapat diubah kembali @@ -176,7 +182,7 @@ const SwitchAccount = () => {
+ {!auth?.parentId && ubahAkun && ( +
+ +

Ubah ke akun bisnis

+
+ )} + {isChecked && ( +
+ + +
+ )} + {!auth?.parentId + ? auth?.parentId + : auth?.parent_id && + isAprove != 'unknown' && ( + + )} {auth?.parentId && } -- cgit v1.2.3 From 461d2786935c5c9b3cf627c44fc06fcd1c3e8075 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 26 Sep 2024 11:13:15 +0700 Subject: add pop up yakin ubah type akun --- src/pages/my/profile.jsx | 181 ++++++++++++++++++++++++++++------------------- 1 file changed, 109 insertions(+), 72 deletions(-) diff --git a/src/pages/my/profile.jsx b/src/pages/my/profile.jsx index b87aa69a..f6063ff2 100644 --- a/src/pages/my/profile.jsx +++ b/src/pages/my/profile.jsx @@ -10,16 +10,22 @@ import IsAuth from '@/lib/auth/components/IsAuth'; import Menu from '@/lib/auth/components/Menu'; import PersonalProfile from '@/lib/auth/components/PersonalProfile'; import StatusSwitchAccount from '@/lib/auth/components/StatusSwitchAccount'; -import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react'; +import { Checkbox } from '@chakra-ui/react'; import { useState, useEffect } from 'react'; import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; export default function Profile() { const auth = useAuth(); const [isChecked, setIsChecked] = useState(false); const [ubahAkun, setUbahAkun] = useState(false); const [isAprove, setIsAprove] = useState('unknown'); + const [changeConfirmation, setChangeConfirmation] = useState(false); const handleChange = async () => { - setIsChecked(!isChecked); + if (isChecked) { + setIsChecked(!isChecked); + } else { + setChangeConfirmation(true); + } }; useEffect(() => { const loadPromo = async () => { @@ -31,78 +37,109 @@ export default function Profile() { }; loadPromo(); }, []); + const handleConfirmSubmit = () => { + setChangeConfirmation(false); + setIsChecked(true); + }; return ( - - - - {!auth?.parentId && ubahAkun && ( -
- -

Ubah ke akun bisnis

-
- )} - {isChecked && ( -
- - -
- )} - {!auth?.parentId - ? auth?.parentId - : auth?.parent_id && - isAprove != 'unknown' && ( - - )} - - - {auth?.parentId && } - - + <> + setChangeConfirmation(false)} // Menutup popup + title='Ubah type akun' + > +
+ Anda akan mengubah type akun anda? +
+
+ + +
+ + + + + {!auth?.parentId && ubahAkun && ( +
+ +

Ubah ke akun bisnis

+
+ )} + {isChecked && ( +
+ + +
+ )} + {!auth?.parentId + ? auth?.parentId + : auth?.parent_id && + isAprove != 'unknown' && ( + + )} + + + {auth?.parentId && } + + - - -
-
- -
-
- {!auth?.parentId && ubahAkun && ( -
- -

Ubah ke akun bisnis

-
- )} - {isChecked && ( -
- - -
- )} - {!auth?.parentId - ? auth?.parentId - : auth?.parent_id && - isAprove != 'unknown' && ( - - )} - - - {auth?.parentId && } + + +
+
+ +
+
+ {!auth?.parentId && ubahAkun && ( +
+ +

Ubah ke akun bisnis

+
+ )} + {isChecked && ( +
+ + +
+ )} + {!auth?.parentId + ? auth?.parentId + : auth?.parent_id && + isAprove != 'unknown' && ( + + )} + + + {auth?.parentId && } +
-
- - - + + + + ); } -- cgit v1.2.3 From 062e2caf344fedf504ad601a88aaab7a3764ec21 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 26 Sep 2024 13:35:53 +0700 Subject: update informasi bisnis logic save field inputan --- src/lib/auth/components/CompanyProfile.jsx | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index 7bebb02f..d066cef7 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -63,6 +63,7 @@ const CompanyProfile = () => { setValue('npwp', dataProfile.npwp); setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak); setValue('alamat_bisnis', dataProfile.alamatBisnis); + setValue('company_type', dataProfile.company_type); }; if (auth) loadProfile(); }, [auth, setValue]); @@ -248,12 +249,28 @@ export default CompanyProfile; const validationSchema = Yup.object().shape({ alamat_bisnis: Yup.string().required('Harus di-isi'), - alamat_wajib_pajak: Yup.string().required('Harus di-isi'), - taxName: Yup.string().required('Harus di-isi'), - npwp: Yup.string().required('Harus di-isi'), name: Yup.string().required('Harus di-isi'), industry: Yup.string().required('Harus di-pilih'), companyType: Yup.string().required('Harus di-pilih'), + taxName: Yup.string(), + npwp: Yup.string(), + alamat_wajib_pajak: Yup.string(), + company_type: Yup.string(), + taxName: Yup.string().when('company_type', { + is: (company_type) => company_type !== 'PKP', + then: Yup.string().required('Harus di-isi'), + otherwise: Yup.string().notRequired(), + }), + npwp: Yup.string().when('company_type', { + is: (company_type) => company_type !== 'PKP', + then: Yup.string().required('Harus di-isi'), + otherwise: Yup.string().notRequired(), + }), + alamat_wajib_pajak: Yup.string().when('company_type', { + is: (company_type) => company_type !== 'PKP', + then: Yup.string().required('Harus di-isi'), + otherwise: Yup.string().notRequired(), + }), }); const defaultValues = { -- cgit v1.2.3 From 979b4556ab104767f677d0d5a328f7b414ca3b4c Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 26 Sep 2024 13:50:42 +0700 Subject: add bisnis status badge --- src/lib/auth/components/CompanyProfile.jsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index d066cef7..2daec766 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -12,6 +12,7 @@ import * as Yup from 'yup'; const CompanyProfile = () => { const [changeConfirmation, setChangeConfirmation] = useState(false); + const [company_type, setCompany_type] = useState(); const auth = useAuth(); const [isOpen, setIsOpen] = useState(false); const toggle = () => setIsOpen(!isOpen); @@ -56,6 +57,7 @@ const CompanyProfile = () => { const dataProfile = await addressApi({ id: auth.parentId ? auth.parentId : auth.parent_id, }); + setCompany_type(dataProfile.companyType); setValue('name', dataProfile.name); setValue('industry', dataProfile.industryId); setValue('companyType', dataProfile.companyTypeId); @@ -63,7 +65,7 @@ const CompanyProfile = () => { setValue('npwp', dataProfile.npwp); setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak); setValue('alamat_bisnis', dataProfile.alamatBisnis); - setValue('company_type', dataProfile.company_type); + setValue('company_type', dataProfile.companyType); }; if (auth) loadProfile(); }, [auth, setValue]); @@ -130,7 +132,10 @@ const CompanyProfile = () => { className='p-4 flex items-center text-left w-full' >
-
Informasi Usaha
+
+

Informasi Usaha

+
{company_type}
+
Dibawah ini adalah data usaha yang anda masukkan, periksa kembali data usaha anda. @@ -257,17 +262,17 @@ const validationSchema = Yup.object().shape({ alamat_wajib_pajak: Yup.string(), company_type: Yup.string(), taxName: Yup.string().when('company_type', { - is: (company_type) => company_type !== 'PKP', + is: (company_type) => company_type !== 'Non PKP', then: Yup.string().required('Harus di-isi'), otherwise: Yup.string().notRequired(), }), npwp: Yup.string().when('company_type', { - is: (company_type) => company_type !== 'PKP', + is: (company_type) => company_type !== 'Non PKP', then: Yup.string().required('Harus di-isi'), otherwise: Yup.string().notRequired(), }), alamat_wajib_pajak: Yup.string().when('company_type', { - is: (company_type) => company_type !== 'PKP', + is: (company_type) => company_type !== 'Non PKP', then: Yup.string().required('Harus di-isi'), otherwise: Yup.string().notRequired(), }), -- cgit v1.2.3 From 935066853ab4847fbff605eed21f98ddbb445864 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 26 Sep 2024 17:02:45 +0700 Subject: update form bisnis --- .../modules/register/components/FormBisnis.tsx | 24 ++++++- src/lib/auth/components/CompanyProfile.jsx | 77 ++++++++++++++++++---- src/lib/auth/components/PersonalProfile.jsx | 2 +- src/lib/auth/components/SwitchAccount.jsx | 32 ++++++++- 4 files changed, 119 insertions(+), 16 deletions(-) diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 6185179f..c88ec735 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -87,16 +87,31 @@ const form: React.FC = ({ label: o.name, })) ); + // setValue('companyType', form.company_type_id); }; loadCompanyTypes(); }, []); + useEffect(() => { + if (form.company_type_id) { + console.log('form.company_type_id', form.company_type_id); + setValue('companyType', form.company_type_id); + } + }, [form.company_type_id]); + useEffect(() => { const selectedCompanyType = companyTypes.find( (company) => company.value === watch('companyType') ); if (selectedCompanyType) { + console.log('selectedCompanyType', selectedCompanyType); updateForm('company_type_id', `${selectedCompanyType?.value}`); + // setCompanyTypes([ + // { + // value: '2', + // label: 'Distributor', + // }, + // ]); validate(); } }, [watch('companyType'), companyTypes]); @@ -122,6 +137,7 @@ const form: React.FC = ({ category: o.category, })) ); + // setValue('industry_id', form.industry_id); }; loadIndustries(); }, []); @@ -582,7 +598,13 @@ const form: React.FC = ({ readOnly={required} ref={npwpRef} placeholder='000.000.000.0-000.000' - value={!required ? formattedNpwp : ''} + value={ + !required + ? formattedNpwp === '' + ? form.npwp + : formattedNpwp + : '' + } maxLength={21} // Set maximum length to 16 characters onChange={(e) => { if (!required) { diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index 2daec766..e1a604c2 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -9,10 +9,14 @@ import { toast } from 'react-hot-toast'; import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; import { yupResolver } from '@hookform/resolvers/yup'; import * as Yup from 'yup'; +import SwitchAccount from '@/lib/auth/components/SwitchAccount'; +import { Checkbox } from '@chakra-ui/react'; const CompanyProfile = () => { const [changeConfirmation, setChangeConfirmation] = useState(false); - const [company_type, setCompany_type] = useState(); + const [changeType, setChangeType] = useState(false); + const [isChecked, setIsChecked] = useState(false); + const [company_type, setCompany_type] = useState('Non PKP'); const auth = useAuth(); const [isOpen, setIsOpen] = useState(false); const toggle = () => setIsOpen(!isOpen); @@ -98,9 +102,46 @@ const CompanyProfile = () => { setChangeConfirmation(false); handleSubmit(onSubmitHandler)(); }; + const handleConfirmSubmitType = () => { + setChangeType(false); + setIsChecked(true); + setIsOpen(!isOpen); + }; + const handleChange = async () => { + if (isChecked) { + setIsChecked(!isChecked); + } else { + setChangeType(true); + } + }; return ( <> + setChangeType(false)} // Menutup popup + title='Ubah type akun' + > +
+ Anda akan mengubah type akun anda? +
+
+ + +
+ setChangeConfirmation(true)} @@ -126,11 +167,19 @@ const CompanyProfile = () => {
- - - {isOpen && ( + {/* */} +
+ {!isOpen && (
{ @@ -246,6 +296,7 @@ const CompanyProfile = () => {
)} + {isOpen && } ); }; diff --git a/src/lib/auth/components/PersonalProfile.jsx b/src/lib/auth/components/PersonalProfile.jsx index 727785bf..ce27c650 100644 --- a/src/lib/auth/components/PersonalProfile.jsx +++ b/src/lib/auth/components/PersonalProfile.jsx @@ -109,7 +109,7 @@ const PersonalProfile = () => {
diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index 18c6076f..ad22da0f 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -69,7 +69,26 @@ const SwitchAccount = () => { validate(); } }, [isTerdaftar]); - + useEffect(() => { + const loadProfile = async () => { + const dataProfile = await addressApi({ + id: auth.parentId ? auth.parentId : auth.parent_id, + }); + if (dataProfile.companyType === 'Non PKP') { + setSelectedValue('PKP'); + } + updateForm('email_partner', dataProfile.email_partner); + updateForm('business_name', dataProfile.name); + updateForm('industry_id', dataProfile.industryId); + updateForm('company_type_id', dataProfile.companyTypeId); + updateForm('nama_wajib_pajak', dataProfile.taxName); + updateForm('npwp', dataProfile.npwp); + updateForm('alamat_wajib_pajak', dataProfile.alamatWajibPajak); + updateForm('alamat_bisnis', dataProfile.alamatBisnis); + validate(); + }; + if (auth) loadProfile(); + }, [auth, setValue]); useEffect(() => { updateForm('name', '-'); updateForm('email', 'example@mail.com'); @@ -125,6 +144,10 @@ const SwitchAccount = () => { toast.error('Terjadi kesalahan internal'); }; + const onSubmitHandlerCancel = async (values) => { + window.location.reload(); + }; + return ( <>
-- cgit v1.2.3 From 016cbe790dd698ee258f17c8218ef6fdc667ad0d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 27 Sep 2024 17:00:00 +0700 Subject: update switch account --- .../modules/register/components/FormBisnis.tsx | 1 - src/lib/auth/components/CompanyProfile.jsx | 2 +- src/lib/auth/components/Menu.jsx | 187 ++++++++++++++------- src/lib/auth/components/PersonalProfile.jsx | 106 ++++++------ src/lib/auth/components/SwitchAccount.jsx | 114 ++++++++----- 5 files changed, 241 insertions(+), 169 deletions(-) diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index ad92948e..cc05a3bf 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -115,7 +115,6 @@ const form: React.FC = ({ } }, [form.industry_id]); - console.log('form', form); useEffect(() => { const loadIndustries = async () => { const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index 6065efde..cd55072c 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -296,7 +296,7 @@ const CompanyProfile = () => { )} - {isOpen && } + {isOpen && } ); }; diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx index f475db1f..ddbb0760 100644 --- a/src/lib/auth/components/Menu.jsx +++ b/src/lib/auth/components/Menu.jsx @@ -1,76 +1,137 @@ -import Link from '@/core/components/elements/Link/Link' -import { useRouter } from 'next/router' -import ImageNext from 'next/image' -import whatsappUrl from '@/core/utils/whatsappUrl' +import Link from '@/core/components/elements/Link/Link'; +import { useRouter } from 'next/router'; +import ImageNext from 'next/image'; +import whatsappUrl from '@/core/utils/whatsappUrl'; +import useAuth from '@/core/hooks/useAuth'; +import Divider from '@/core/components/elements/Divider/Divider'; const Menu = () => { - const router = useRouter() - - const routeStartWith = (route) => router.pathname.startsWith(route) - + const router = useRouter(); + const auth = useAuth(); + const routeStartWith = (route) => router.pathname.startsWith(route); return (
-
Menu
- -
- -

Daftar Quotation

-
- - -
- -

Daftar Transaksi

-
- - -
- -

Daftar Pengiriman

-
- - -
- -

Invoice & Faktur Pajak

-
- - -
- -

Wishlist

-
- +
+
Akun Saya
+ {auth?.company && ( +
Akun Bisnis
+ )} + {!auth?.company && ( +
Akun Individu
+ )} +
+
Menu
+
+ +
+ +

Daftar Quotation

+
+ + +
+ +

Daftar Transaksi

+
+ + +
+ +

Daftar Pengiriman

+
+ + +
+ +

Invoice & Faktur Pajak

+
+ + +
+ +

Wishlist

+
+ +
Pusat Bantuan
- +
- +

Layanan Pelanggan
Pengaturan Akun
- -
- -

Daftar Alamat

-
- - -
- -

Profil Saya

-
- - +
+ +
+ +

Daftar Alamat

+
+ + +
+ +

Profil Saya

+
+ + +
- ) -} + ); +}; const LinkItem = ({ children, ...props }) => ( ( > {children} -) +); -export default Menu +export default Menu; diff --git a/src/lib/auth/components/PersonalProfile.jsx b/src/lib/auth/components/PersonalProfile.jsx index ce27c650..3053255d 100644 --- a/src/lib/auth/components/PersonalProfile.jsx +++ b/src/lib/auth/components/PersonalProfile.jsx @@ -48,11 +48,7 @@ const PersonalProfile = () => { return ( <> - +
- {isOpen && ( -
-
-
- - -
-
- - -
-
- - -
-
- - -
+ +
+
+ + +
+
+ +
- - - )} +
+ + +
+
+ + +
+
+ + ); }; diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index fa1d3924..d76d1f0e 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -14,7 +14,8 @@ import { registerUser } from '~/services/auth'; import { useMutation } from 'react-query'; import { isValid } from 'zod'; import useDevice from '@/core/hooks/useDevice'; -const SwitchAccount = () => { +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +const SwitchAccount = ({ company_type }) => { const { isDesktop, isMobile } = useDevice(); const auth = useAuth(); const [isOpen, setIsOpen] = useState(true); @@ -25,6 +26,7 @@ const SwitchAccount = () => { const [selectedValueBisnis, setSelectedValueBisnis] = useState('false'); const [selectedValue, setSelectedValue] = useState('PKP'); const [buttonSubmitClick, setButtonSubmitClick] = useState(false); + const [changeConfirmation, setChangeConfirmation] = useState(false); const { register, setValue, handleSubmit } = useForm({ defaultValues: { email: '', @@ -74,7 +76,6 @@ const SwitchAccount = () => { const dataProfile = await addressApi({ id: auth.parentId ? auth.parentId : auth.parent_id, }); - console.log('dataProfile', dataProfile); if (dataProfile?.companyType === 'nonpkp') { setSelectedValue('PKP'); } @@ -120,6 +121,7 @@ const SwitchAccount = () => { } }; const onSubmitHandler = async (values) => { + setChangeConfirmation(false); // let data = { ...form, id: `${auth.partnerId}` }; const data = form; if (!isFormValid) { @@ -151,11 +153,32 @@ const SwitchAccount = () => { return ( <> - + +
+ +
{ *Perubahan akun tidak dapat diubah kembali
-
- {!isOpen && } - {isOpen && } -
- +
- {isOpen && ( -
-
-

- Bisnis Terdaftar di Indoteknik? -

- - - - Sudah Terdaftar - - - Belum Terdaftar - - - -
+
+
+

+ Bisnis Terdaftar di Indoteknik? +

+ + + + Sudah Terdaftar + + + Belum Terdaftar + + + +
+ {!isTerdaftar && (

Tipe Bisnis

@@ -199,37 +215,43 @@ const SwitchAccount = () => { PKP - - Non-PKP - + {!(company_type === 'nonpkp') && ( + + Non-PKP + + )}
- -
+ )} + +
+
+
+
- )} +
); }; -- cgit v1.2.3 From 6de06f74f0a004900ecc415b91eb03d1b58a872f Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Sat, 28 Sep 2024 08:57:08 +0700 Subject: add hover --- src/lib/auth/components/Menu.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx index ddbb0760..979de83b 100644 --- a/src/lib/auth/components/Menu.jsx +++ b/src/lib/auth/components/Menu.jsx @@ -118,7 +118,10 @@ const Menu = () => {

Profil Saya

-
diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index da41fd8b..3d6158c8 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -170,7 +170,8 @@ const Register = () => { size='lg' onClick={handleSubmit} isDisabled={ - !isCheckedTNC || mutation.isLoading || !isValidCaptcha + // !isCheckedTNC || mutation.isLoading || !isValidCaptcha + !isCheckedTNC || mutation.isLoading } > {mutation.isLoading ? 'Loading...' : 'Daftar'} diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx index 979de83b..042b1842 100644 --- a/src/lib/auth/components/Menu.jsx +++ b/src/lib/auth/components/Menu.jsx @@ -3,20 +3,36 @@ import { useRouter } from 'next/router'; import ImageNext from 'next/image'; import whatsappUrl from '@/core/utils/whatsappUrl'; import useAuth from '@/core/hooks/useAuth'; -import Divider from '@/core/components/elements/Divider/Divider'; +import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js'; +import { useState, useEffect } from 'react'; const Menu = () => { const router = useRouter(); const auth = useAuth(); + // console.log('auth', auth); + const [ubahAkun, setUbahAkun] = useState(); + // const [isAprove, setIsAprove] = useState(); + useEffect(() => { + const loadProgres = async () => { + const progresSwitchAccount = await switchAccountProgresApi(); + console.log('progresSwitchAccount', progresSwitchAccount); + // if (progresSwitchAccount) { + // setIsAprove(progresSwitchAccount.status); + setUbahAkun(progresSwitchAccount.status); + // } + }; + loadProgres(); + }, []); const routeStartWith = (route) => router.pathname.startsWith(route); return (
Akun Saya
- {auth?.company && ( + {auth?.company && !ubahAkun && (
Akun Bisnis
)} - {!auth?.company && ( + {ubahAkun &&
Review
} + {!auth?.company && !ubahAkun && (
Akun Individu
)}
diff --git a/src/pages/my/profile.jsx b/src/pages/my/profile.jsx index f6063ff2..ee0cd907 100644 --- a/src/pages/my/profile.jsx +++ b/src/pages/my/profile.jsx @@ -9,7 +9,7 @@ import SwitchAccount from '@/lib/auth/components/SwitchAccount'; import IsAuth from '@/lib/auth/components/IsAuth'; import Menu from '@/lib/auth/components/Menu'; import PersonalProfile from '@/lib/auth/components/PersonalProfile'; -import StatusSwitchAccount from '@/lib/auth/components/StatusSwitchAccount'; +// import StatusSwitchAccount from '@/lib/auth/components/StatusSwitchAccount'; import { Checkbox } from '@chakra-ui/react'; import { useState, useEffect } from 'react'; import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js'; @@ -89,12 +89,12 @@ export default function Profile() {
)} - {!auth?.parentId + {/* {!auth?.parentId ? auth?.parentId : auth?.parent_id && isAprove != 'unknown' && ( - )} + )} */} {auth?.parentId && } @@ -126,12 +126,12 @@ export default function Profile() {
)} - {!auth?.parentId + {/* {!auth?.parentId ? auth?.parentId : auth?.parent_id && isAprove != 'unknown' && ( - )} + )} */} {auth?.parentId && } -- cgit v1.2.3 From fc50a4ebcb3a11dd1059be6282122677499175f7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Sat, 28 Sep 2024 10:32:53 +0700 Subject: update switch account --- src/lib/auth/components/Menu.jsx | 52 +++++++++++++++++++++++++++++----------- 1 file changed, 38 insertions(+), 14 deletions(-) diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx index 042b1842..06eb6c2d 100644 --- a/src/lib/auth/components/Menu.jsx +++ b/src/lib/auth/components/Menu.jsx @@ -5,21 +5,18 @@ import whatsappUrl from '@/core/utils/whatsappUrl'; import useAuth from '@/core/hooks/useAuth'; import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js'; import { useState, useEffect } from 'react'; +import { InfoIcon } from 'lucide-react'; const Menu = () => { const router = useRouter(); const auth = useAuth(); - // console.log('auth', auth); const [ubahAkun, setUbahAkun] = useState(); - // const [isAprove, setIsAprove] = useState(); useEffect(() => { const loadProgres = async () => { const progresSwitchAccount = await switchAccountProgresApi(); - console.log('progresSwitchAccount', progresSwitchAccount); - // if (progresSwitchAccount) { - // setIsAprove(progresSwitchAccount.status); - setUbahAkun(progresSwitchAccount.status); - // } + if (progresSwitchAccount) { + setUbahAkun(progresSwitchAccount.status); + } }; loadProgres(); }, []); @@ -28,13 +25,40 @@ const Menu = () => {
Akun Saya
- {auth?.company && !ubahAkun && ( -
Akun Bisnis
- )} - {ubahAkun &&
Review
} - {!auth?.company && !ubahAkun && ( -
Akun Individu
- )} +
+ {auth?.company && !(ubahAkun === 'pending') && ( + <> +
+

Akun Bisnis

+
+
+ Ini adalah akun bisnis. +
+ + )} + {ubahAkun === 'pending' && ( + <> +
+

Review

+ +
+
+ Akun sedang dalam proses review. +
+ + )} + {!auth?.company && !(ubahAkun === 'pending') && ( + <> +
+

Akun Individu

+ +
+
+ Ini adalah akun individu. +
+ + )} +
Menu
-- cgit v1.2.3 From a8aabf3a4a2fb0208684d10b6eefa9b81b2bcc25 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Sat, 28 Sep 2024 11:24:04 +0700 Subject: update code --- src-migrate/modules/register/components/FormBisnis.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 932bd326..97c0acad 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -110,7 +110,6 @@ const form: React.FC = ({ useEffect(() => { if (form.company_type_id) { setValue('companyType', parseInt(form.company_type_id)); - updateForm('sppkp_document', 'fileBase64.jpg'); } }, [form.company_type_id]); useEffect(() => { -- cgit v1.2.3 From 2b9d3ce422c159f3739d3572d73c088740dccf3e Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Sat, 28 Sep 2024 13:31:15 +0700 Subject: update switch account --- src/lib/auth/components/SwitchAccount.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index d76d1f0e..a609d9e7 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -159,7 +159,8 @@ const SwitchAccount = ({ company_type }) => { title='Ubah profil Bisnis' >
- Apakah anda yakin mengubah data bisnis? + Mohon diperhatikan bahwa perubahan data akun bisnis akan mengakibatkan + perubahan pada informasi yang tertera di faktur pajak dan invoice.?
-
-

Tipe Bisnis

- - - - PKP - - - Non-PKP - - - -
+ {!isTerdaftar && ( +
+

Tipe Bisnis

+ + + + PKP + + + Non-PKP + + + +
+ )} Date: Mon, 30 Sep 2024 13:57:59 +0700 Subject: update switch account --- .../modules/register/components/FormBisnis.tsx | 31 +++++++++++++++------- src/lib/auth/components/Menu.jsx | 17 +++++++----- 2 files changed, 32 insertions(+), 16 deletions(-) diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 97c0acad..16747ff3 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -348,12 +348,22 @@ const form: React.FC = ({ const [hasNPWP, setHasNpwp] = useState(false); const [hasSPPKP, setHasSPPKP] = useState(false); const [fileUrlSppkp, setFileUrlSppkp] = useState(''); - useEffect(() => { - const checkUrl = async (url: string | URL | Request) => { + const checkUrlNPWP = async (url: string | URL | Request) => { + try { + const response = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/chek/npwp/${auth?.parentId}`; + + return response; // Returns true if status is 200-299 + } catch (error) { + console.error('Error accessing URL:', url, error); + return false; + } + }; + const checkUrlSPPKP = async (url: string | URL | Request) => { try { - const response = await fetch(url, { method: 'HEAD' }); - return response.ok; // Returns true if status is 200-299 + const response = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/chek/sppkp/${auth?.parentId}`; + + return response; // Returns true if status is 200-299 } catch (error) { console.error('Error accessing URL:', url, error); return false; @@ -364,14 +374,16 @@ const form: React.FC = ({ const sppkpUrl = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/download/sppkp/${auth?.parentId}`; if (auth?.parentId) { - checkUrl(npwpUrl).then((isAccessible) => { + checkUrlNPWP(npwpUrl).then((isAccessible) => { if (isAccessible) { setFileUrl(npwpUrl); setHasNpwp(true); + updateForm('npwp_document', ' '); + updateForm('sppkp_document', ' '); } }); - checkUrl(sppkpUrl).then((isAccessible) => { + checkUrlSPPKP(sppkpUrl).then((isAccessible) => { if (isAccessible) { setFileUrlSppkp(sppkpUrl); setHasSPPKP(true); @@ -835,6 +847,9 @@ const form: React.FC = ({ accept='.pdf,.png,.jpg,.jpeg' content='lagu.jpg' /> + {chekValid && isPKP && !required && !!errors.sppkp_document && ( + {errors.sppkp_document} + )} Format: .pdf, .png, .jpg, atau .jpeg, Maks 2MB @@ -858,10 +873,6 @@ const form: React.FC = ({
)} - - {chekValid && isPKP && !required && !!errors.sppkp_document && ( - {errors.sppkp_document} - )}
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx index 06eb6c2d..8eaa769b 100644 --- a/src/lib/auth/components/Menu.jsx +++ b/src/lib/auth/components/Menu.jsx @@ -31,8 +31,9 @@ const Menu = () => {

Akun Bisnis

-
- Ini adalah akun bisnis. +
+ Anda terdaftar sebagai akun bisnis, segala bentuk transaksi anda + untuk perusahaan yang sudah anda daftarkan di Indoteknik.com
)} @@ -42,8 +43,9 @@ const Menu = () => {

Review

-
- Akun sedang dalam proses review. +
+ Proses perubahan akun anda sedang kami review, mohon menunggu + hingga 2x24 jam.
)} @@ -53,8 +55,11 @@ const Menu = () => {

Akun Individu

-
- Ini adalah akun individu. +
+

+ Anda terdaftar sebagai akun individu, Segala bentuk transaksi + anda untuk Pribadi/Individu. +

)} -- cgit v1.2.3 From dbc533f88854555af8f1ba031b1640836c903183 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 1 Oct 2024 09:23:29 +0700 Subject: update badge click to my profile --- src/lib/auth/components/Menu.jsx | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx index 8eaa769b..7b766968 100644 --- a/src/lib/auth/components/Menu.jsx +++ b/src/lib/auth/components/Menu.jsx @@ -28,9 +28,13 @@ const Menu = () => {
{auth?.company && !(ubahAkun === 'pending') && ( <> -
-

Akun Bisnis

-
+ +

Akun Bisnis

{' '} + +
Anda terdaftar sebagai akun bisnis, segala bentuk transaksi anda untuk perusahaan yang sudah anda daftarkan di Indoteknik.com @@ -39,10 +43,13 @@ const Menu = () => { )} {ubahAkun === 'pending' && ( <> -
-

Review

- -
+ +

Review

+ +
Proses perubahan akun anda sedang kami review, mohon menunggu hingga 2x24 jam. @@ -51,10 +58,13 @@ const Menu = () => { )} {!auth?.company && !(ubahAkun === 'pending') && ( <> -
-

Akun Individu

- -
+ +

Akun Individu

+ +

Anda terdaftar sebagai akun individu, Segala bentuk transaksi -- cgit v1.2.3 From ed679c9b8ea85e8f181cf67465effc4b5ff1a7bc Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 1 Oct 2024 09:42:51 +0700 Subject: update code has npwp atau sppkp --- src-migrate/modules/register/components/FormBisnis.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 16747ff3..9e5a0c07 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -351,9 +351,11 @@ const form: React.FC = ({ useEffect(() => { const checkUrlNPWP = async (url: string | URL | Request) => { try { - const response = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/chek/npwp/${auth?.parentId}`; - - return response; // Returns true if status is 200-299 + const response = await odooApi( + 'GET', + `/api/v1/user/chek/npwp/${auth?.parentId}` + ); + return response.status; // Returns true if status is 200-299 } catch (error) { console.error('Error accessing URL:', url, error); return false; @@ -361,9 +363,12 @@ const form: React.FC = ({ }; const checkUrlSPPKP = async (url: string | URL | Request) => { try { - const response = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/chek/sppkp/${auth?.parentId}`; + const response = await odooApi( + 'GET', + `/api/v1/user/chek/sppkp/${auth?.parentId}` + ); - return response; // Returns true if status is 200-299 + return response.status; // Returns true if status is 200-299 } catch (error) { console.error('Error accessing URL:', url, error); return false; @@ -379,7 +384,6 @@ const form: React.FC = ({ setFileUrl(npwpUrl); setHasNpwp(true); updateForm('npwp_document', ' '); - updateForm('sppkp_document', ' '); } }); @@ -387,6 +391,7 @@ const form: React.FC = ({ if (isAccessible) { setFileUrlSppkp(sppkpUrl); setHasSPPKP(true); + updateForm('sppkp_document', ' '); } }); } -- cgit v1.2.3 From 2dc7f7ae3eb62f9821f8ae1fb87db2e7b9234e1b Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 1 Oct 2024 10:57:08 +0700 Subject: update logic switch account --- src/lib/auth/components/SwitchAccount.jsx | 4 ++-- src/pages/my/profile.jsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index a609d9e7..12d00890 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -233,11 +233,11 @@ const SwitchAccount = ({ company_type }) => { buttonSubmitClick={buttonSubmitClick} />

-
+
diff --git a/src/pages/my/profile.jsx b/src/pages/my/profile.jsx index ee0cd907..f44a44f3 100644 --- a/src/pages/my/profile.jsx +++ b/src/pages/my/profile.jsx @@ -18,7 +18,7 @@ export default function Profile() { const auth = useAuth(); const [isChecked, setIsChecked] = useState(false); const [ubahAkun, setUbahAkun] = useState(false); - const [isAprove, setIsAprove] = useState('unknown'); + const [isAprove, setIsAprove] = useState(); const [changeConfirmation, setChangeConfirmation] = useState(false); const handleChange = async () => { if (isChecked) { @@ -32,7 +32,7 @@ export default function Profile() { const progresSwitchAccount = await switchAccountProgresApi(); if (progresSwitchAccount) { setIsAprove(progresSwitchAccount.status); - setUbahAkun(progresSwitchAccount.status === 'unknown'); + setUbahAkun(progresSwitchAccount.status); } }; loadPromo(); @@ -71,7 +71,7 @@ export default function Profile() { - {!auth?.parentId && ubahAkun && ( + {!auth?.parentId && !ubahAkun && (
- {!auth?.parentId && ubahAkun && ( + {!auth?.parentId && !ubahAkun && (
Date: Tue, 1 Oct 2024 13:31:45 +0700 Subject: update switch account --- src/lib/auth/components/SwitchAccount.jsx | 37 +++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index 12d00890..9adcc726 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -39,8 +39,15 @@ const SwitchAccount = ({ company_type }) => { mutationFn: (data) => registerUser(data), }); const [notValid, setNotValid] = useState(false); - const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } = - useRegisterStore(); + const { + form, + isCheckedTNC, + isValidCaptcha, + errors, + validate, + updateForm, + resetForm, + } = useRegisterStore(); const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); useEffect(() => { const loadProfile = async () => { @@ -79,15 +86,17 @@ const SwitchAccount = ({ company_type }) => { if (dataProfile?.companyType === 'nonpkp') { setSelectedValue('PKP'); } - updateForm('email_partner', dataProfile?.email_partner); - updateForm('business_name', dataProfile?.name); - updateForm('industry_id', `${dataProfile?.industryId}`); - updateForm('company_type_id', `${dataProfile?.companyTypeId}`); - updateForm('nama_wajib_pajak', dataProfile?.taxName); - updateForm('npwp', dataProfile?.npwp); - updateForm('alamat_wajib_pajak', dataProfile?.alamatWajibPajak); - updateForm('alamat_bisnis', dataProfile?.alamatBisnis); - validate(); + if (auth?.company) { + updateForm('email_partner', dataProfile?.email_partner); + updateForm('business_name', dataProfile?.name); + updateForm('industry_id', `${dataProfile?.industryId}`); + updateForm('company_type_id', `${dataProfile?.companyTypeId}`); + updateForm('nama_wajib_pajak', dataProfile?.taxName); + updateForm('npwp', dataProfile?.npwp); + updateForm('alamat_wajib_pajak', dataProfile?.alamatWajibPajak); + updateForm('alamat_bisnis', dataProfile?.alamatBisnis); + validate(); + } }; if (auth) loadProfile(); }, [auth, setValue]); @@ -97,9 +106,10 @@ const SwitchAccount = ({ company_type }) => { updateForm('password', 'example@mail.com'); updateForm('phone', '081234567890'); validate(); - }, []); + }, [buttonSubmitClick, changeConfirmation]); const handleChangeBisnis = (value) => { + resetForm(); setSelectedValueBisnis(value); if (value === 'true') { validate(); @@ -121,9 +131,12 @@ const SwitchAccount = ({ company_type }) => { } }; const onSubmitHandler = async (values) => { + console.log('error', errors); + console.log('form', form); setChangeConfirmation(false); // let data = { ...form, id: `${auth.partnerId}` }; const data = form; + console.log('data', data); if (!isFormValid) { setNotValid(true); setButtonSubmitClick(!buttonSubmitClick); -- cgit v1.2.3 From 8f9be149cd5134a9e03d761f3e0e06361375bac4 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 1 Oct 2024 14:29:20 +0700 Subject: update switch account --- src/lib/auth/components/SwitchAccount.jsx | 96 ++++++++++++++++++++----------- 1 file changed, 61 insertions(+), 35 deletions(-) diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index 9adcc726..640d29cc 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -131,12 +131,10 @@ const SwitchAccount = ({ company_type }) => { } }; const onSubmitHandler = async (values) => { - console.log('error', errors); - console.log('form', form); + updateForm('parent_id', `${auth.parentId}`); setChangeConfirmation(false); // let data = { ...form, id: `${auth.partnerId}` }; const data = form; - console.log('data', data); if (!isFormValid) { setNotValid(true); setButtonSubmitClick(!buttonSubmitClick); @@ -192,7 +190,7 @@ const SwitchAccount = ({ company_type }) => {
-
+ {/*
{ *Perubahan akun tidak dapat diubah kembali
+
*/} +
+
-
-
-

- Bisnis Terdaftar di Indoteknik? -

- - - - Sudah Terdaftar - - - Belum Terdaftar - - - -
- {!isTerdaftar && ( -
-

Tipe Bisnis

- - - - PKP - - {!(company_type === 'nonpkp') && ( - - Non-PKP +
+ {auth?.company && !(company_type === 'nonpkp') && ( + <> +
+

+ Bisnis Terdaftar di Indoteknik? +

+ + + + Sudah Terdaftar - )} - - -
+ + Belum Terdaftar + + + +
+ {!isTerdaftar && ( +
+

Tipe Bisnis

+ + + + PKP + + {!(company_type === 'nonpkp') && ( + + Non-PKP + + )} + + +
+ )} + )} Date: Tue, 1 Oct 2024 15:01:18 +0700 Subject: update switch account --- .../modules/register/stores/useRegisterStore.ts | 58 +++++++++++----------- src-migrate/validations/auth.ts | 54 +++++++++++++------- src/lib/auth/components/SwitchAccount.jsx | 5 +- 3 files changed, 69 insertions(+), 48 deletions(-) diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts index 273472be..815b92d9 100644 --- a/src-migrate/modules/register/stores/useRegisterStore.ts +++ b/src-migrate/modules/register/stores/useRegisterStore.ts @@ -28,7 +28,7 @@ export const useRegisterStore = create((set, get) => ({ company_type_id: '', business_name: '', name: '', - nama_wajib_pajak : '', + nama_wajib_pajak: '', email: '', email_partner: '', password: '', @@ -39,14 +39,14 @@ export const useRegisterStore = create((set, get) => ({ npwp: '', sppkp: '', is_pkp: '', - type_acc:'', - is_terdaftar:'', - alamat_bisnis:'', - alamat_wajib_pajak:'', + type_acc: '', + is_terdaftar: '', + alamat_bisnis: '', + alamat_wajib_pajak: '', + parent_id: '', }, updateForm: (name, value) => set((state) => ({ form: { ...state.form, [name]: value } })), - errors: {}, validate: () => { @@ -74,26 +74,28 @@ export const useRegisterStore = create((set, get) => ({ isValidCaptcha: false, updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })), - resetForm: () => set({ - form: { - company_type_id: '', - business_name: '', - name: '', - nama_wajib_pajak : '', - email: '', - email_partner: '', - password: '', - phone: '', - sppkp_document: '', - npwp_document: '', - industry_id: '', - npwp: '', - sppkp: '', - is_pkp: '', - type_acc:'', - is_terdaftar:'', - alamat_bisnis:'', - alamat_wajib_pajak:'', - }, - }), + resetForm: () => + set({ + form: { + company_type_id: '', + business_name: '', + name: '', + nama_wajib_pajak: '', + email: '', + email_partner: '', + password: '', + phone: '', + sppkp_document: '', + npwp_document: '', + industry_id: '', + npwp: '', + sppkp: '', + is_pkp: '', + type_acc: '', + is_terdaftar: '', + alamat_bisnis: '', + alamat_wajib_pajak: '', + parent_id: '', + }, + }), })); diff --git a/src-migrate/validations/auth.ts b/src-migrate/validations/auth.ts index 3abdfb57..0df80a2a 100644 --- a/src-migrate/validations/auth.ts +++ b/src-migrate/validations/auth.ts @@ -18,6 +18,7 @@ export const registerSchema = z nama_wajib_pajak: z.string().optional(), alamat_bisnis: z.string().optional(), alamat_wajib_pajak: z.string().optional(), + parent_id: z.string().optional(), is_pkp: z.string(), is_terdaftar: z.string(), sppkp_document: z.string().optional(), @@ -27,25 +28,42 @@ export const registerSchema = z business_name: z.string().optional(), company_type_id: z.string().optional(), isChekBox: z.string().optional(), - npwp: z.string().optional().refine((val) => !val || /^\d{15,16}$/.test(val), { - message: 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.', - }), + npwp: z + .string() + .optional() + .refine((val) => !val || /^\d{15,16}$/.test(val), { + message: + 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.', + }), sppkp: z.string().optional(), }) .superRefine((data, ctx) => { if (data.type_acc === 'business') { if (data.is_terdaftar === 'false') { if (data.is_pkp === 'true') { - const requiredFields: { field: keyof typeof data; message: string }[] = [ + const requiredFields: { + field: keyof typeof data; + message: string; + }[] = [ { field: 'business_name', message: 'Nama perusahaan harus diisi' }, - { field: 'alamat_bisnis', message: 'Alamat perusahaan harus diisi' }, + { + field: 'alamat_bisnis', + message: 'Alamat perusahaan harus diisi', + }, // { field: 'alamat_wajib_pajak', message: 'Alamat wajib pajak harus diisi' }, { field: 'company_type_id', message: 'Badan usaha wajib dipilih' }, { field: 'industry_id', message: 'Jenis usaha harus dipilih' }, { field: 'sppkp_document', message: 'Document harus diisi' }, { field: 'npwp_document', message: 'Document harus diisi' }, - { field: 'npwp', message: 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.' }, - { field: 'nama_wajib_pajak', message: 'Nama wajib pajak harus diisi' }, + { + field: 'npwp', + message: + 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.', + }, + { + field: 'nama_wajib_pajak', + message: 'Nama wajib pajak harus diisi', + }, ]; requiredFields.forEach(({ field, message }) => { @@ -57,15 +75,19 @@ export const registerSchema = z }); } }); - - if (!data.email_partner || !z.string().email().safeParse(data.email_partner).success) { + + if ( + !data.email_partner || + !z.string().email().safeParse(data.email_partner).success + ) { ctx.addIssue({ code: 'custom', path: ['email_partner'], - message: 'Email partner harus diisi dengan format example@mail.com', + message: + 'Email partner harus diisi dengan format example@mail.com', }); } - if(data.isChekBox === 'false'){ + if (data.isChekBox === 'false') { if (!data.alamat_wajib_pajak) { ctx.addIssue({ code: 'custom', @@ -74,7 +96,6 @@ export const registerSchema = z }); } } - } else { if (!data.business_name) { ctx.addIssue({ @@ -110,12 +131,12 @@ export const registerSchema = z ctx.addIssue({ code: 'custom', path: ['npwp'], - message: 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.', + message: + 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.', }); } - } - }else{ + } else { if (data.is_pkp === 'true') { if (!data.business_name) { ctx.addIssue({ @@ -141,7 +162,6 @@ export const registerSchema = z // path: ['business_name'], // message: 'Nama perusahaan harus diisi', // }); - }else{ - + } else { } }); diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index 640d29cc..e080fc39 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -170,8 +170,7 @@ const SwitchAccount = ({ company_type }) => { title='Ubah profil Bisnis' >
- Mohon diperhatikan bahwa perubahan data akun bisnis akan mengakibatkan - perubahan pada informasi yang tertera di faktur pajak dan invoice.? + Anda akan merubah profil bisnis anda?
-
+
{auth?.company && !(company_type === 'nonpkp') && ( <>
-- cgit v1.2.3 From 082a57a5188c594556ba76ce20182472ca9d0b5e Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 2 Oct 2024 11:47:30 +0700 Subject: update field sppkp --- src/lib/auth/components/CompanyProfile.jsx | 2 ++ src/lib/auth/components/SwitchAccount.jsx | 1 + 2 files changed, 3 insertions(+) diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index cd55072c..78e62abd 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -110,7 +110,9 @@ const CompanyProfile = () => { const handleChange = async () => { if (isChecked) { setIsChecked(!isChecked); + setIsOpen(!isOpen); } else { + setIsChecked(!isChecked); setChangeType(true); } }; diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index e080fc39..6c1176bf 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -93,6 +93,7 @@ const SwitchAccount = ({ company_type }) => { updateForm('company_type_id', `${dataProfile?.companyTypeId}`); updateForm('nama_wajib_pajak', dataProfile?.taxName); updateForm('npwp', dataProfile?.npwp); + updateForm('sppkp', dataProfile?.sppkp); updateForm('alamat_wajib_pajak', dataProfile?.alamatWajibPajak); updateForm('alamat_bisnis', dataProfile?.alamatBisnis); validate(); -- cgit v1.2.3 From a32fa70ab3271e94a9c2b9004f872360dcb7d1c5 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 2 Oct 2024 13:21:25 +0700 Subject: update switch account --- src/lib/auth/components/SwitchAccount.jsx | 4 ++-- src/pages/my/profile.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index 6c1176bf..fd9f04f9 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -225,7 +225,7 @@ const SwitchAccount = ({ company_type }) => {
- {auth?.company && !(company_type === 'nonpkp') && ( + {!auth?.company && company_type === 'nonpkp' && ( <>

@@ -253,7 +253,7 @@ const SwitchAccount = ({ company_type }) => { PKP - {!(company_type === 'nonpkp') && ( + {!auth?.company && company_type === 'nonpkp' && ( Non-PKP diff --git a/src/pages/my/profile.jsx b/src/pages/my/profile.jsx index f44a44f3..eaf3341c 100644 --- a/src/pages/my/profile.jsx +++ b/src/pages/my/profile.jsx @@ -85,7 +85,7 @@ export default function Profile() { )} {isChecked && (

- +
)} @@ -122,7 +122,7 @@ export default function Profile() { )} {isChecked && (
- +
)} -- cgit v1.2.3 From 5f3c071f0b18055bccb78407ada60619f43bb9c3 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 2 Oct 2024 13:28:00 +0700 Subject: update color --- src/lib/auth/components/SwitchAccount.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx index fd9f04f9..36d1e0b6 100644 --- a/src/lib/auth/components/SwitchAccount.jsx +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -204,7 +204,7 @@ const SwitchAccount = ({ company_type }) => {
*/}
); diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx new file mode 100644 index 00000000..d7b45fda --- /dev/null +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -0,0 +1,60 @@ +import React from 'react'; +import Stepper from './Stepper'; + +const PengajuanTempo = () => { + const [currentStep, setCurrentStep] = React.useState(0); + const NUMBER_OF_STEPS = 6; + const stepDivs = [ +
Informasi Perusahaan
, +
Kontak Person
, +
Pengiriman
, +
Referensi
, +
Dokumen
, +
Konfirmasi
, + ]; + + const goToNextStep = () => + setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1)); + + const goToPreviousStep = () => + setCurrentStep((prev) => (prev <= 0 ? prev : prev - 1)); + + return ( + <> +
+

+ Form Pengajuan Tempo +

+

+ Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim + magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin + ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam + suspendisse. +

+
+
+
+ +
{stepDivs[currentStep]}
+
+ + +
+
+ + ); +}; + +export default PengajuanTempo; diff --git a/src/lib/pengajuan-tempo/component/Stepper.jsx b/src/lib/pengajuan-tempo/component/Stepper.jsx new file mode 100644 index 00000000..248eeffd --- /dev/null +++ b/src/lib/pengajuan-tempo/component/Stepper.jsx @@ -0,0 +1,51 @@ +import React from 'react'; + +const Stepper = ({ currentStep, numberOfSteps }) => { + const stepLabels = [ + 'Informasi Perusahaan', + 'Kontak Person', + 'Pengiriman', + 'Referensi', + 'Dokumen', + 'Konfirmasi', + ]; + console.log('currentStep', currentStep); + const activeColor = (index) => + currentStep >= index ? 'bg-red-500' : 'bg-gray-300'; + const activeColorBullet = (index) => + currentStep >= index ? 'bg-red-500 ' : 'bg-white border-gray-300 border'; + const isFinalStep = (index) => index === numberOfSteps - 1; + const isFirstStep = (index) => index === 0; + return ( +
+ {Array.from({ length: numberOfSteps }).map((_, index) => ( + + {isFirstStep(index) ? null : ( +
+ )} +
+
+
+
+ {stepLabels[index]} +
+
+
+
+ + ))} +
+ ); +}; + +export default Stepper; diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/lib/pengajuan-tempo/stores/useTempoStore.ts b/src/lib/pengajuan-tempo/stores/useTempoStore.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/pengajuan-tempo.jsx b/src/pages/pengajuan-tempo.jsx new file mode 100644 index 00000000..f27fb907 --- /dev/null +++ b/src/pages/pengajuan-tempo.jsx @@ -0,0 +1,29 @@ +import Seo from '@/core/components/Seo'; +import dynamic from 'next/dynamic'; +import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter'; +import BasicLayout from '@/core/components/layouts/BasicLayout'; +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +const PagePengajuanTempo = dynamic(() => + import('@/lib/pengajuan-tempo/component/PengajuanTempo') +); + +export default function TrackingOrder() { + return ( + <> + + + + + + + + + + + + + + + ); +} -- cgit v1.2.3 From 7868be545edebd0b54e0ed0b59bc80361bbf36d6 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 15 Oct 2024 17:01:36 +0700 Subject: update informasi perusahaan --- .../pengajuan-tempo/component/PengajuanTempo.jsx | 11 +- src/lib/pengajuan-tempo/component/Stepper.jsx | 1 - .../component/informasiPerusahaan.jsx | 246 +++++++++++++++++++++ .../component/informasiPerusahaan.tsx | 0 4 files changed, 254 insertions(+), 4 deletions(-) create mode 100644 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx delete mode 100644 src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index d7b45fda..5ef5374e 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -1,11 +1,14 @@ import React from 'react'; import Stepper from './Stepper'; +import InformasiPerusahaan from './informasiPerusahaan'; // Make sure this component exists const PengajuanTempo = () => { const [currentStep, setCurrentStep] = React.useState(0); const NUMBER_OF_STEPS = 6; + + // Use the component directly in the array const stepDivs = [ -
Informasi Perusahaan
, + , // Call the component correctly
Kontak Person
,
Pengiriman
,
Referensi
, @@ -33,8 +36,10 @@ const PengajuanTempo = () => {

-
- +
+
+ +
{stepDivs[currentStep]}
+ + + ); +}; + +const validationSchema = Yup.object().shape({ + // email: Yup.string() + // .email('Format harus seperti contoh@email.com') + // .required('Harus di-isi'), + name: Yup.string().required('Harus di-isi'), + industry_id: Yup.string().required('Harus di-pilih'), + street: Yup.string().required('Harus di-isi'), + zip: Yup.string().required('Harus di-isi'), + state: Yup.string().required('Harus di-pilih'), + city: Yup.string().required('Harus di-pilih'), +}); + +const defaultValues = { + // email: '', + name: '', + industry_id: '', + street: '', + state: '', + city: '', + zip: '', +}; + +export default informasiPerusahaan; diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx deleted file mode 100644 index e69de29b..00000000 -- cgit v1.2.3 From 795db900a8a5abeaf22b98a5ca05d28c03387e4d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 16 Oct 2024 09:56:52 +0700 Subject: update pengajuan tempo --- .../component/informasiPerusahaan.jsx | 127 +++++++++++++++++++-- 1 file changed, 115 insertions(+), 12 deletions(-) diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx index aca88439..c3625217 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -89,8 +89,8 @@ const informasiPerusahaan = ({}) => { onSubmit={handleSubmit(onSubmitHandler)} className='flex mt-4 flex-col w-full ' > -
-
+
+
-
+
@@ -135,7 +135,7 @@ const informasiPerusahaan = ({}) => { )} /> {selectedCategory && ( - + Kategori : {selectedCategory} )} @@ -145,7 +145,7 @@ const informasiPerusahaan = ({}) => {
-
+
- +
+ +
+ {errors.street?.message} +
+
{
+
+
+ + + isi no telfon perusahaan yang sesuai + +
+
+ +
+ {errors.mobile?.message} +
+
+
+ +
+
+ + + Isi detail data bank perusahaan anda + +
+
+
+ + + Format: BCA, Mandiri, CIMB, BNI dll + +
+ {errors.bankName?.message} +
+
+
+ + Format: John Doe +
+ {errors.accountName?.message} +
+
+
+ + Format: 01234567896 +
+ {errors.accountNumber?.message} +
+
+
+
+ +
+
+ + + isi no telfon perusahaan yang sesuai + +
+
+ +
+
+ +
+
+ +
+
+
+ value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka + })} + placeholder='Isi estimasi pembelian produk pertahun' + type='text' + className='form-input' // padding untuk memberi ruang untuk "RP" + value={formatRupiah(estimasiValue)} // Menampilkan nilai terformat + onChange={handleChange} // Mengatur perubahan input + /> +
+
+ {errors.estimasi?.message} +
+
+
+ +
+
+ + + Pilih durasi tempo yang anda inginkan + +
+
+
+ + + + 7 Hari + + + 14 Hari + + + 30 Hari + + + +
+
+
+ + + Ajukan nilai limit yang anda mau + +
+
+ + + {/* Kolom 1 */} + + + 5.000.000 + + + 10.000.000 + + + 15.000.000 + + + 20.000.000 + + + + {/* Kolom 2 */} + + + 25.000.000 + + + 30.000.000 + + + 35.000.000 + +
+ + { + const value = e.target.value; + const formattedValue = formatRupiah(value); + setValue('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form + }} + /> +
+ + + +
+
+ {/* */} +
+ {errors.tempoDuration?.message} +
+
+
+ +
+ *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim + Indoteknik.com +
+ +
+
+ + + Pilih produk bisa lebih dari 1 + +
+
+
+ + Saya bersedia + + + Tidak bersedia + +
+
+ {errors.estimasi?.message} +
+
+
+ +
+
+ + + Pilih produk bisa lebih dari 1 + +
+
+
+ {firstColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+ {secondColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+
+
+ + *Pastikan data yang anda masukan sudah benar dan sesuai + + +
- ); @@ -330,6 +599,9 @@ const validationSchema = Yup.object().shape({ bankName: Yup.string().required('Harus di-isi'), accountName: Yup.string().required('Harus di-isi'), accountNumber: Yup.string().required('Harus di-isi'), + estimasi: Yup.string().required('Harus di-isi'), + tempoDuration: Yup.string().required('Harus di-isi'), + bersedia: Yup.string().required('Harus di-pilih'), }); const defaultValues = { @@ -344,6 +616,9 @@ const defaultValues = { bankName: '', accountName: '', accountNumber: '', + estimasi: '', + tempoDuration: '', + bersedia: '', }; export default informasiPerusahaan; -- cgit v1.2.3 From f555e7bc9d070e7e0bd4900941592480d4ba6c6a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 17 Oct 2024 14:39:17 +0700 Subject: update pengajuan tempo --- .../register/stores/usePengajuanTempoStore.ts | 93 ++++ src-migrate/types/tempo.ts | 59 +++ src-migrate/validations/tempo.ts | 28 ++ .../pengajuan-tempo/component/PengajuanTempo.jsx | 56 ++- .../component/informasiPerusahaan.jsx | 472 +++++++++++++-------- src/lib/pengajuan-tempo/stores/useTempoStore.ts | 0 6 files changed, 513 insertions(+), 195 deletions(-) create mode 100644 src-migrate/modules/register/stores/usePengajuanTempoStore.ts create mode 100644 src-migrate/types/tempo.ts create mode 100644 src-migrate/validations/tempo.ts delete mode 100644 src/lib/pengajuan-tempo/stores/useTempoStore.ts diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts new file mode 100644 index 00000000..6f3bc13d --- /dev/null +++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts @@ -0,0 +1,93 @@ +import { create } from 'zustand'; +import { TempoProps } from '~/types/tempo'; +import { TempoSchema } from '~/validations/tempo'; +import { boolean, ZodError } from 'zod'; + +type State = { + form: TempoProps; + errors: { + [key in keyof TempoProps]?: string; + }; + isCheckedTNC: boolean; + isOpenTNC: boolean; + isValidCaptcha: boolean; +}; + +type Action = { + updateForm: (name: string, value: string) => void; + updateValidCaptcha: (value: boolean) => void; + toggleCheckTNC: () => void; + openTNC: () => void; + closeTNC: () => void; + validate: () => void; + resetForm: () => void; +}; + +export const usePengajuanTempoStore = create((set, get) => ({ + form: { + name: '', + industry_id: '', + street: '', + state: '', + city: '', + zip: '', + mobile: '', + bankName: '', + accountName: '', + accountNumber: '', + estimasi: '', + tempoDuration: '', + bersedia: '', + categoryProduk: '', + tempoLimit: '', + }, + updateForm: (name, value) => + set((state) => ({ form: { ...state.form, [name]: value } })), + + errors: {}, + validate: () => { + try { + TempoSchema.parse(get().form); + set({ errors: {} }); + } catch (error) { + if (error instanceof ZodError) { + const errors: State['errors'] = {}; + error.errors.forEach( + (e) => (errors[e.path[0] as keyof TempoProps] = e.message) + ); + set({ errors }); + } + } + }, + + isCheckedTNC: false, + toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })), + + isOpenTNC: false, + openTNC: () => set(() => ({ isOpenTNC: true })), + closeTNC: () => set(() => ({ isOpenTNC: false })), + + isValidCaptcha: false, + updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })), + + resetForm: () => + set({ + form: { + name: '', + industry_id: '', + street: '', + state: '', + city: '', + zip: '', + mobile: '', + bankName: '', + accountName: '', + accountNumber: '', + estimasi: '', + tempoDuration: '', + bersedia: '', + categoryProduk: '', + tempoLimit: '', + }, + }), +})); diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts new file mode 100644 index 00000000..f8a3c5b8 --- /dev/null +++ b/src-migrate/types/tempo.ts @@ -0,0 +1,59 @@ +import { TempoSchema } from '~/validations/tempo'; +import { OdooApiRes } from './odoo'; +import { z } from 'zod'; + +export type tempoProps = { + name: string; + industry_id: string; + street: string; + state: string; + city: string; + zip: string; + mobile: string; + bankName: string; + accountName: string; + accountNumber: string; + estimasi: string; + tempoDuration: string; + bersedia: string; +}; + +export type TempoApiProps = OdooApiRes; + +export type TempoProps = z.infer; + +export type TempoResApiProps = { + Tempo: boolean; + reason: 'EMAIL_USED' | 'NOT_ACTIVE' | null; +}; + +type ActivationResProps = { + activation: boolean; + user: TempoProps | null; +}; + +export type ActivationTokenProps = { + token: string; +}; + +export type ActivationTokenResApiProps = ActivationResProps & { + reason: 'INVALID_TOKEN' | null; +}; + +export type ActivationOtpProps = { + email: string; + otp: string; +}; + +export type ActivationOtpResApiProps = ActivationResProps & { + reason: 'INVALID_OTP' | null; +}; + +export type ActivationReqProps = { + email: string; +}; + +export type ActivationReqResApiProps = { + activation_request: boolean; + reason: 'NOT_FOUND' | 'ACTIVE' | null; +}; diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts new file mode 100644 index 00000000..6999c1c6 --- /dev/null +++ b/src-migrate/validations/tempo.ts @@ -0,0 +1,28 @@ +import { z } from 'zod'; + +export const TempoSchema = z.object({ + name: z.string().min(1, { message: 'Nama harus diisi' }), + street: z.string().min(1, { message: 'Alamat harus diisi' }), + industry_id: z.string().min(1, { message: 'Jenis usaha harus dipilih' }), + zip: z.string().min(1, { message: 'Kode pos harus diisi' }), + state: z.string().min(1, { message: 'Provinsi harus dipilih' }), + city: z.string().min(1, { message: 'Kota harus dipilih' }), + mobile: z + .string() + .min(1, { message: 'Nomor telepon harus diisi' }) + .refine((val) => /^\d{10,12}$/.test(val), { + message: 'Format nomor telepon tidak valid, contoh: 081234567890', + }), + bankName: z.string().min(1, { message: 'Nama bank harus diisi' }), + accountName: z.string().min(1, { message: 'Nama rekening harus diisi' }), + accountNumber: z.string().min(1, { message: 'Nomor rekening harus diisi' }), + estimasi: z + .string() + .min(1, { message: 'Estimasi pemmbelian pertahun harus diisi' }), + tempoDuration: z.string().min(1, { message: 'Durasi tempo harus dipilih' }), + tempoLimit: z.string().min(1, { message: 'Limit tempo harus dipilih' }), + bersedia: z.string().min(1, { message: 'Harus dipilih' }), + categoryProduk: z + .string() + .min(1, { message: 'Category produk harus dipilih' }), +}); diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index 5ef5374e..bc7dcb69 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -1,14 +1,22 @@ import React from 'react'; +import { useMemo, useState, useEffect, useRef } from 'react'; import Stepper from './Stepper'; -import InformasiPerusahaan from './informasiPerusahaan'; // Make sure this component exists - +import InformasiPerusahaan from './informasiPerusahaan'; +import { Controller, useForm } from 'react-hook-form'; +import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import { ChevronRightIcon } from '@heroicons/react/24/outline'; const PengajuanTempo = () => { const [currentStep, setCurrentStep] = React.useState(0); const NUMBER_OF_STEPS = 6; - - // Use the component directly in the array + const { form, errors, validate, updateForm } = usePengajuanTempoStore(); + const [notValid, setNotValid] = useState(false); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const stepDivs = [ - , // Call the component correctly + ,
Kontak Person
,
Pengiriman
,
Referensi
, @@ -16,8 +24,22 @@ const PengajuanTempo = () => {
Konfirmasi
, ]; - const goToNextStep = () => + useEffect(() => { + validate(); + }, []); + + const goToNextStep = () => { + if (!isFormValid) { + setNotValid(true); + setButtonSubmitClick(!buttonSubmitClick); + console.log('form', form); + return; + } else { + setButtonSubmitClick(!buttonSubmitClick); + setNotValid(false); + } setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1)); + }; const goToPreviousStep = () => setCurrentStep((prev) => (prev <= 0 ? prev : prev - 1)); @@ -42,21 +64,33 @@ const PengajuanTempo = () => {
{stepDivs[currentStep]}
- - + */}
+
+ + *Pastikan data yang anda masukan sudah benar dan sesuai + + +
); diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx index 62280f13..82cf4aee 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -1,32 +1,19 @@ -import React, { useState, useEffect } from 'react'; -import * as Yup from 'yup'; -import { yupResolver } from '@hookform/resolvers/yup'; -import { Controller, useForm } from 'react-hook-form'; +import React, { useState, useEffect, useMemo, useRef } from 'react'; +import { Controller, set, useForm } from 'react-hook-form'; import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; import odooApi from '~/libs/odooApi'; import stateApi from '@/lib/address/api/stateApi.js'; import cityApi from '@/lib/address/api/cityApi'; import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react'; -const informasiPerusahaan = ({}) => { - const { - register, - handleSubmit, - formState: { errors }, - control, - reset, - watch, - setValue, - getValues, - values, - } = useForm({ - resolver: yupResolver(validationSchema), - defaultValues, - }); +import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { + const { control, watch } = useForm(); + const { form, errors, validate, updateForm } = usePengajuanTempoStore(); const [industries, setIndustries] = useState([]); const [selectedCategory, setSelectedCategory] = useState(''); const [states, setState] = useState([]); const [cities, setCities] = useState([]); - const [bersedia, setBersedia] = useState(true); + const [bersedia, setBersedia] = useState(null); const category_produk = [ { id: 1, name: 'Pengaman, Kesehatan & Keamanan' }, { id: 2, name: 'Perkakas Tangan, Listrik & Pneumatic' }, @@ -41,7 +28,7 @@ const informasiPerusahaan = ({}) => { { id: 11, name: 'Komponen & Aksesoris' }, { id: 12, name: 'Peralatan Horeca & Food Service' }, ]; - console.log('defaultValues', getValues()); + useEffect(() => { const loadState = async () => { let dataState = await stateApi(); @@ -56,8 +43,10 @@ const informasiPerusahaan = ({}) => { const watchState = watch('state'); useEffect(() => { - setValue('city', ''); + updateForm('city', ''); if (watchState) { + updateForm('state', `${watchState}`); + validate(); const loadCities = async () => { let dataCities = await cityApi({ stateId: watchState }); dataCities = dataCities.map((city) => ({ @@ -68,7 +57,15 @@ const informasiPerusahaan = ({}) => { }; loadCities(); } - }, [watchState, setValue]); + }, [watchState]); + + const watchCity = watch('city'); + useEffect(() => { + if (watchCity) { + updateForm('city', `${watchCity}`); + validate(); + } + }, [watchCity]); useEffect(() => { const loadIndustries = async () => { @@ -89,16 +86,12 @@ const informasiPerusahaan = ({}) => { (industry) => industry.value === watch('industry_id') ); if (selectedIndustryType) { - // updateForm('industry_id', `${selectedIndustryType?.value}`); + updateForm('industry_id', `${selectedIndustryType?.value}`); + validate(); setSelectedCategory(selectedIndustryType.category); } }, [watch('industry_id'), industries]); - const onSubmitHandler = async (values) => { - setValue('bersedia', `${bersedia}`); - console.log('values', values); - }; - const estimasiValue = watch('estimasi'); const tempoLimitValue = watch('tempoLimit'); @@ -111,22 +104,30 @@ const informasiPerusahaan = ({}) => { : ''; }; - // Memperbarui nilai input dengan format rupiah const handleChange = (e) => { const value = e.target.value; const formattedValue = formatRupiah(value); - setValue('estimasi', formattedValue); // Mengupdate nilai di react-hook-form + console.log('formattedValue', formattedValue); + updateForm('estimasi', formattedValue.replace(/^Rp\s*/, '')); + validate(); }; const onChangeTempoDuration = (e) => { - setValue('tempoDuration', `${e}`); // Mengupdate nilai di react-hook-form + updateForm('tempoDuration', `${e}`); + validate(); }; const onChangeTempoLimit = (e) => { - setValue('tempoLimit', `${e}`); // Mengupdate nilai di react-hook-form + updateForm('tempoLimit', `${e}`); + validate(); }; - const handleBersediaChange = () => { - setBersedia(!bersedia); - setValue('bersedia', `${bersedia}`); + const handleCheckboxBersediaChange = (value) => { + if (value === 'bersedia') { + setBersedia(true); + } else if (value === 'tidakBersedia') { + setBersedia(false); + } + updateForm('bersedia', value === 'bersedia'); + validate(); }; const [selectedIds, setSelectedIds] = useState([]); @@ -136,21 +137,113 @@ const informasiPerusahaan = ({}) => { ? prevSelected.filter((selectedId) => selectedId !== id) : [...prevSelected, id] ); - setValue('categoryProduk', `${selectedIds}`); + updateForm('categoryProduk', `${selectedIds}`); + validate(); + }; + + const handleInputChange = (event) => { + const { name, value } = event.target; + updateForm(name, value); + validate(); }; const midIndex = Math.ceil(category_produk.length / 2); const firstColumn = category_produk.slice(0, midIndex); const secondColumn = category_produk.slice(midIndex); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + + const nameRef = useRef(null); + const industry_idRef = useRef(null); + const streetRef = useRef(null); + const stateRef = useRef(null); + const cityRef = useRef(null); + const zipRef = useRef(null); + const mobileRef = useRef(null); + const bankNameRef = useRef(null); + const accountNameRef = useRef(null); + const accountNumberRef = useRef(null); + const estimasiRef = useRef(null); + const tempoDurationRef = useRef(null); + const bersediaRef = useRef(null); + const categoryProdukRef = useRef(null); + const tempoLimitRef = useRef(null); + useEffect(() => { + const loadIndustries = async () => { + if (!isFormValid) { + const options = { + behavior: 'smooth', + block: 'center', + }; + if (errors.name && nameRef.current) { + nameRef.current.scrollIntoView(options); + return; + } + if (errors.industry_id && industry_idRef.current) { + industry_idRef.current.scrollIntoView(options); + return; + } + if (errors.street && streetRef.current) { + streetRef.current.scrollIntoView(options); + return; + } + if (errors.state && stateRef.current) { + stateRef.current.scrollIntoView(options); + return; + } + if (errors.city && cityRef.current) { + cityRef.current.scrollIntoView(options); + return; + } + if (errors.zip && zipRef.current) { + zipRef.current.scrollIntoView(options); + return; + } + if (errors.mobile && mobileRef.current) { + mobileRef.current.scrollIntoView(options); + return; + } + if (errors.bankName && bankNameRef.current) { + bankNameRef.current.scrollIntoView(options); + return; + } + if (errors.accountName && accountNameRef.current) { + accountNameRef.current.scrollIntoView(options); + return; + } + if (errors.accountNumber && accountNumberRef.current) { + accountNumberRef.current.scrollIntoView(options); + return; + } + if (errors.estimasi && estimasiRef.current) { + estimasiRef.current.scrollIntoView(options); + return; + } + if (errors.tempoDuration && tempoDurationRef.current) { + tempoDurationRef.current.scrollIntoView(options); + return; + } + if (errors.bersedia && bersediaRef.current) { + bersediaRef.current.scrollIntoView(options); + return; + } + if (errors.categoryProduk && categoryProdukRef.current) { + categoryProdukRef.current.scrollIntoView(options); + return; + } + if (errors.tempoLimit && tempoLimitRef.current) { + tempoLimitRef.current.scrollIntoView(options); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick, chekValid]); return ( <>

Informasi Perusahaan

-
+
@@ -163,22 +256,27 @@ const informasiPerusahaan = ({}) => {
Format: PT. INDOTEKNIK DOTCOM GEMILANG -
- {errors.name?.message} -
+ {chekValid && ( +
+ {errors.name} +
+ )}
-
+
isi detail perusahaan sesuai dengan nama yang terdaftar @@ -186,7 +284,7 @@ const informasiPerusahaan = ({}) => {
( { Kategori : {selectedCategory} )} -
- {errors.industry_id?.message} -
+ {chekValid && ( +
+ {errors.industry_id} +
+ )}
@@ -219,17 +319,22 @@ const informasiPerusahaan = ({}) => {
-
- {errors.street?.message} -
+ {chekValid && ( +
+ {errors.street} +
+ )}
-
+
{ /> )} /> -
- {errors.state?.message} -
+ {chekValid && ( +
+ {errors.state} +
+ )}
-
+
{ /> )} /> -
- {errors.city?.message} -
+ {chekValid && ( +
+ {errors.city} +
+ )}
-
- {errors.zip?.message} -
+ {chekValid && ( +
+ {errors.zip} +
+ )}
@@ -287,15 +401,20 @@ const informasiPerusahaan = ({}) => {
-
- {errors.mobile?.message} -
+ {chekValid && ( +
+ {errors.mobile} +
+ )}
@@ -309,41 +428,56 @@ const informasiPerusahaan = ({}) => {
Format: BCA, Mandiri, CIMB, BNI dll -
- {errors.bankName?.message} -
+ {chekValid && ( +
+ {errors.bankName} +
+ )}
Format: John Doe -
- {errors.accountName?.message} -
+ {chekValid && ( +
+ {errors.accountName} +
+ )}
Format: 01234567896 -
- {errors.accountNumber?.message} -
+ {chekValid && ( +
+ {errors.accountNumber} +
+ )}
@@ -353,16 +487,15 @@ const informasiPerusahaan = ({}) => { - - isi no telfon perusahaan yang sesuai -
@@ -376,19 +509,24 @@ const informasiPerusahaan = ({}) => {
value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka - })} + id='estimasi' + name='estimasi' + ref={estimasiRef} + // {...register('estimasi', { + // setValueAs: (value) => value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka + // })} placeholder='Isi estimasi pembelian produk pertahun' type='text' className='form-input' // padding untuk memberi ruang untuk "RP" - value={formatRupiah(estimasiValue)} // Menampilkan nilai terformat + value={formatRupiah(form.estimasi)} onChange={handleChange} // Mengatur perubahan input />
-
- {errors.estimasi?.message} -
+ {chekValid && ( +
+ {errors.estimasi} +
+ )}
@@ -402,7 +540,7 @@ const informasiPerusahaan = ({}) => {
-
+
{ + {chekValid && ( +
+ {errors.tempoDuration} +
+ )}
@@ -429,10 +572,13 @@ const informasiPerusahaan = ({}) => { Ajukan nilai limit yang anda mau
-
+
{/* Kolom 1 */} @@ -472,24 +618,20 @@ const informasiPerusahaan = ({}) => { onChange={(e) => { const value = e.target.value; const formattedValue = formatRupiah(value); - setValue('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form + updateForm('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form }} />
+ {chekValid && ( +
+ {errors.tempoLimit} +
+ )}
- {/* */} -
- {errors.tempoDuration?.message} -
@@ -507,13 +649,13 @@ const informasiPerusahaan = ({}) => { Pilih produk bisa lebih dari 1
-
-
+
+
handleCheckboxBersediaChange('bersedia')} value={true} size='md' > @@ -522,17 +664,19 @@ const informasiPerusahaan = ({}) => { handleCheckboxBersediaChange('tidakBersedia')} value={false} size='md' > Tidak bersedia
-
- {errors.estimasi?.message} -
+ {chekValid && ( +
+ {errors.estimasi} +
+ )}
@@ -545,80 +689,40 @@ const informasiPerusahaan = ({}) => { Pilih produk bisa lebih dari 1
-
-
- {firstColumn.map((item) => ( - handleCheckboxChange(item.id)} - > - {item.name} - - ))} -
-
- {secondColumn.map((item) => ( - handleCheckboxChange(item.id)} - > - {item.name} - - ))} +
+
+
+ {firstColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+ {secondColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+ {chekValid && ( +
+ {errors.categoryProduk} +
+ )}
-
- - *Pastikan data yang anda masukan sudah benar dan sesuai - - -
); }; -const validationSchema = Yup.object().shape({ - // email: Yup.string() - // .email('Format harus seperti contoh@email.com') - // .required('Harus di-isi'), - name: Yup.string().required('Harus di-isi'), - industry_id: Yup.string().required('Harus di-pilih'), - street: Yup.string().required('Harus di-isi'), - zip: Yup.string().required('Harus di-isi'), - state: Yup.string().required('Harus di-pilih'), - city: Yup.string().required('Harus di-pilih'), - mobile: Yup.string().required('Harus di-isi'), - bankName: Yup.string().required('Harus di-isi'), - accountName: Yup.string().required('Harus di-isi'), - accountNumber: Yup.string().required('Harus di-isi'), - estimasi: Yup.string().required('Harus di-isi'), - tempoDuration: Yup.string().required('Harus di-isi'), - bersedia: Yup.string().required('Harus di-pilih'), -}); - -const defaultValues = { - // email: '', - name: '', - industry_id: '', - street: '', - state: '', - city: '', - zip: '', - mobile: '', - bankName: '', - accountName: '', - accountNumber: '', - estimasi: '', - tempoDuration: '', - bersedia: '', -}; - export default informasiPerusahaan; diff --git a/src/lib/pengajuan-tempo/stores/useTempoStore.ts b/src/lib/pengajuan-tempo/stores/useTempoStore.ts deleted file mode 100644 index e69de29b..00000000 -- cgit v1.2.3 From 0908fc0075f91844ffed4002165c638d02eb91be Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 17 Oct 2024 16:01:50 +0700 Subject: update pengajuan tempo --- src/lib/pengajuan-tempo/component/PengajuanTempo.jsx | 3 +++ src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index bc7dcb69..5f250438 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -33,8 +33,11 @@ const PengajuanTempo = () => { setNotValid(true); setButtonSubmitClick(!buttonSubmitClick); console.log('form', form); + console.log('error', errors); return; } else { + console.log('form', form); + console.log('error', errors); setButtonSubmitClick(!buttonSubmitClick); setNotValid(false); } diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx index 82cf4aee..d2097849 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -126,7 +126,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { } else if (value === 'tidakBersedia') { setBersedia(false); } - updateForm('bersedia', value === 'bersedia'); + updateForm('bersedia', `${value === 'bersedia'}`); validate(); }; const [selectedIds, setSelectedIds] = useState([]); -- cgit v1.2.3 From ead46a6d760850530946926b390a8954ca64e1c2 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 17 Oct 2024 17:06:58 +0700 Subject: update pengajuan tempo --- .../register/stores/usePengajuanTempoStore.ts | 86 ++- src-migrate/types/tempo.ts | 20 +- src-migrate/validations/tempo.ts | 30 + .../pengajuan-tempo/component/KontakPerusahaan.jsx | 725 +++++++++++++++++++++ .../pengajuan-tempo/component/PengajuanTempo.jsx | 5 + .../component/informasiPerusahaan.jsx | 2 +- 6 files changed, 864 insertions(+), 4 deletions(-) diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts index 6f3bc13d..8891e6ea 100644 --- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts +++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts @@ -1,6 +1,6 @@ import { create } from 'zustand'; -import { TempoProps } from '~/types/tempo'; -import { TempoSchema } from '~/validations/tempo'; +import { TempoProps, TempoPropsKontakPerson } from '~/types/tempo'; +import { TempoSchema, TempoSchemaKontakPerson } from '~/validations/tempo'; import { boolean, ZodError } from 'zod'; type State = { @@ -91,3 +91,85 @@ export const usePengajuanTempoStore = create((set, get) => ({ }, }), })); + +type StateKontakPerson = { + form: TempoPropsKontakPerson; + errors: { + [key in keyof TempoPropsKontakPerson]?: string; + }; + isCheckedTNC: boolean; + isOpenTNC: boolean; + isValidCaptcha: boolean; +}; +export const usePengajuanTempoStoreKontakPerson = create< + StateKontakPerson & Action +>((set, get) => ({ + form: { + direkturName: '', + direkturMobile: '', + direkturEmail: '', + industry_id: '', + street: '', + state: '', + city: '', + zip: '', + bankName: '', + accountName: '', + accountNumber: '', + estimasi: '', + tempoDuration: '', + bersedia: '', + categoryProduk: '', + tempoLimit: '', + }, + updateForm: (name, value) => + set((state) => ({ form: { ...state.form, [name]: value } })), + + errors: {}, + validate: () => { + try { + TempoSchemaKontakPerson.parse(get().form); + set({ errors: {} }); + } catch (error) { + if (error instanceof ZodError) { + const errors: StateKontakPerson['errors'] = {}; + error.errors.forEach( + (e) => (errors[e.path[0] as keyof TempoPropsKontakPerson] = e.message) + ); + set({ errors }); + } + } + }, + + isCheckedTNC: false, + toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })), + + isOpenTNC: false, + openTNC: () => set(() => ({ isOpenTNC: true })), + closeTNC: () => set(() => ({ isOpenTNC: false })), + + isValidCaptcha: false, + updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })), + + resetForm: () => + set({ + form: { + direkturName: '', + direkturMobile: '', + direkturEmail: '', + industry_id: '', + street: '', + state: '', + city: '', + zip: '', + bankName: '', + accountName: '', + accountNumber: '', + estimasi: '', + tempoDuration: '', + bersedia: '', + categoryProduk: '', + tempoLimit: '', + }, + }), +})); diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts index f8a3c5b8..a4bd3d0a 100644 --- a/src-migrate/types/tempo.ts +++ b/src-migrate/types/tempo.ts @@ -1,4 +1,4 @@ -import { TempoSchema } from '~/validations/tempo'; +import { TempoSchema, TempoSchemaKontakPerson } from '~/validations/tempo'; import { OdooApiRes } from './odoo'; import { z } from 'zod'; @@ -18,9 +18,27 @@ export type tempoProps = { bersedia: string; }; +export type tempoPropsKontakPerson = { + direkturName: string; + direkturMobile: string; + direkturEmail: string; + industry_id: string; + street: string; + state: string; + city: string; + zip: string; + bankName: string; + accountName: string; + accountNumber: string; + estimasi: string; + tempoDuration: string; + bersedia: string; +}; + export type TempoApiProps = OdooApiRes; export type TempoProps = z.infer; +export type TempoPropsKontakPerson = z.infer; export type TempoResApiProps = { Tempo: boolean; diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts index 6999c1c6..dca60869 100644 --- a/src-migrate/validations/tempo.ts +++ b/src-migrate/validations/tempo.ts @@ -26,3 +26,33 @@ export const TempoSchema = z.object({ .string() .min(1, { message: 'Category produk harus dipilih' }), }); +export const TempoSchemaKontakPerson = z.object({ + direkturName: z.string().min(1, { message: 'Nama harus diisi' }), + direkturMobile: z + .string() + .min(1, { message: 'Nomor telepon harus diisi' }) + .refine((val) => /^\d{10,12}$/.test(val), { + message: 'Format nomor telepon tidak valid, contoh: 081234567890', + }), + direkturEmail: z + .string() + .min(1, { message: 'Email harus diisi' }) + .email({ message: 'Email harus menggunakan format example@mail.com' }), + street: z.string().min(1, { message: 'Alamat harus diisi' }), + industry_id: z.string().min(1, { message: 'Jenis usaha harus dipilih' }), + zip: z.string().min(1, { message: 'Kode pos harus diisi' }), + state: z.string().min(1, { message: 'Provinsi harus dipilih' }), + city: z.string().min(1, { message: 'Kota harus dipilih' }), + bankName: z.string().min(1, { message: 'Nama bank harus diisi' }), + accountName: z.string().min(1, { message: 'Nama rekening harus diisi' }), + accountNumber: z.string().min(1, { message: 'Nomor rekening harus diisi' }), + estimasi: z + .string() + .min(1, { message: 'Estimasi pemmbelian pertahun harus diisi' }), + tempoDuration: z.string().min(1, { message: 'Durasi tempo harus dipilih' }), + tempoLimit: z.string().min(1, { message: 'Limit tempo harus dipilih' }), + bersedia: z.string().min(1, { message: 'Harus dipilih' }), + categoryProduk: z + .string() + .min(1, { message: 'Category produk harus dipilih' }), +}); diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx index e69de29b..d292449b 100644 --- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx @@ -0,0 +1,725 @@ +import React, { useState, useEffect, useMemo, useRef } from 'react'; +import { Controller, set, useForm } from 'react-hook-form'; +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import odooApi from '~/libs/odooApi'; +import stateApi from '@/lib/address/api/stateApi.js'; +import cityApi from '@/lib/address/api/cityApi'; +import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react'; +import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { + const { control, watch } = useForm(); + const { form, errors, validate, updateForm } = usePengajuanTempoStore(); + const [industries, setIndustries] = useState([]); + const [selectedCategory, setSelectedCategory] = useState(''); + const [states, setState] = useState([]); + const [cities, setCities] = useState([]); + const [bersedia, setBersedia] = useState(null); + const category_produk = [ + { id: 1, name: 'Pengaman, Kesehatan & Keamanan' }, + { id: 2, name: 'Perkakas Tangan, Listrik & Pneumatic' }, + { id: 3, name: 'Mesin Industrial' }, + { id: 4, name: 'Mesin Pertanian & Perkebunan' }, + { id: 5, name: 'Mesin Pembersih & Janitorial' }, + { id: 6, name: 'Cairan Berbahan Kimia' }, + { id: 7, name: 'Perlengkapan Pengukuran & Pengujian' }, + { id: 8, name: 'Peralatan Listrik & Elektronik' }, + { id: 9, name: 'Perlengkapan Logistik & Gudang' }, + { id: 10, name: 'Peralatan Kantor & Stationery' }, + { id: 11, name: 'Komponen & Aksesoris' }, + { id: 12, name: 'Peralatan Horeca & Food Service' }, + ]; + + useEffect(() => { + const loadState = async () => { + let dataState = await stateApi(); + dataState = dataState.map((state) => ({ + value: state.id, + label: state.name, + })); + setState(dataState); + }; + loadState(); + }, []); + + const watchState = watch('state'); + useEffect(() => { + updateForm('city', ''); + if (watchState) { + updateForm('state', `${watchState}`); + validate(); + const loadCities = async () => { + let dataCities = await cityApi({ stateId: watchState }); + dataCities = dataCities.map((city) => ({ + value: city.id, + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + } + }, [watchState]); + + const watchCity = watch('city'); + useEffect(() => { + if (watchCity) { + updateForm('city', `${watchCity}`); + validate(); + } + }, [watchCity]); + + useEffect(() => { + const loadIndustries = async () => { + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); + setIndustries( + dataIndustries?.map((o) => ({ + value: o.id, + label: o.name, + category: o.category, + })) + ); + }; + loadIndustries(); + }, []); + + useEffect(() => { + const selectedIndustryType = industries.find( + (industry) => industry.value === watch('industry_id') + ); + if (selectedIndustryType) { + updateForm('industry_id', `${selectedIndustryType?.value}`); + validate(); + setSelectedCategory(selectedIndustryType.category); + } + }, [watch('industry_id'), industries]); + + const estimasiValue = watch('estimasi'); + const tempoLimitValue = watch('tempoLimit'); + + // Memformat angka menjadi format rupiah + const formatRupiah = (value) => { + if (!value) return ''; + const numberString = value.replace(/[^0-9]/g, ''); // Menghapus karakter non-digit + return numberString + ? 'Rp ' + new Intl.NumberFormat('id-ID').format(numberString) + : ''; + }; + + const handleChange = (e) => { + const value = e.target.value; + const formattedValue = formatRupiah(value); + console.log('formattedValue', formattedValue); + updateForm('estimasi', formattedValue.replace(/^Rp\s*/, '')); + validate(); + }; + const onChangeTempoDuration = (e) => { + updateForm('tempoDuration', `${e}`); + validate(); + }; + + const onChangeTempoLimit = (e) => { + updateForm('tempoLimit', `${e}`); + validate(); + }; + const handleCheckboxBersediaChange = (value) => { + if (value === 'bersedia') { + setBersedia(true); + } else if (value === 'tidakBersedia') { + setBersedia(false); + } + updateForm('bersedia', `${value === 'bersedia'}`); + validate(); + }; + const [selectedIds, setSelectedIds] = useState([]); + + const handleCheckboxChange = (id) => { + setSelectedIds((prevSelected) => + prevSelected.includes(id) + ? prevSelected.filter((selectedId) => selectedId !== id) + : [...prevSelected, id] + ); + updateForm('categoryProduk', `${selectedIds}`); + validate(); + }; + + const handleInputChange = (event) => { + const { name, value } = event.target; + updateForm(name, value); + validate(); + }; + + const midIndex = Math.ceil(category_produk.length / 2); + const firstColumn = category_produk.slice(0, midIndex); + const secondColumn = category_produk.slice(midIndex); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + + const nameRef = useRef(null); + const industry_idRef = useRef(null); + const streetRef = useRef(null); + const stateRef = useRef(null); + const cityRef = useRef(null); + const zipRef = useRef(null); + const mobileRef = useRef(null); + const bankNameRef = useRef(null); + const accountNameRef = useRef(null); + const accountNumberRef = useRef(null); + const estimasiRef = useRef(null); + const tempoDurationRef = useRef(null); + const bersediaRef = useRef(null); + const categoryProdukRef = useRef(null); + const tempoLimitRef = useRef(null); + useEffect(() => { + const loadIndustries = async () => { + if (!isFormValid) { + const options = { + behavior: 'smooth', + block: 'center', + }; + if (errors.name && nameRef.current) { + nameRef.current.scrollIntoView(options); + return; + } + if (errors.industry_id && industry_idRef.current) { + industry_idRef.current.scrollIntoView(options); + return; + } + if (errors.street && streetRef.current) { + streetRef.current.scrollIntoView(options); + return; + } + if (errors.state && stateRef.current) { + stateRef.current.scrollIntoView(options); + return; + } + if (errors.city && cityRef.current) { + cityRef.current.scrollIntoView(options); + return; + } + if (errors.zip && zipRef.current) { + zipRef.current.scrollIntoView(options); + return; + } + if (errors.mobile && mobileRef.current) { + mobileRef.current.scrollIntoView(options); + return; + } + if (errors.bankName && bankNameRef.current) { + bankNameRef.current.scrollIntoView(options); + return; + } + if (errors.accountName && accountNameRef.current) { + accountNameRef.current.scrollIntoView(options); + return; + } + if (errors.accountNumber && accountNumberRef.current) { + accountNumberRef.current.scrollIntoView(options); + return; + } + if (errors.estimasi && estimasiRef.current) { + estimasiRef.current.scrollIntoView(options); + return; + } + if (errors.tempoDuration && tempoDurationRef.current) { + tempoDurationRef.current.scrollIntoView(options); + return; + } + if (errors.bersedia && bersediaRef.current) { + bersediaRef.current.scrollIntoView(options); + return; + } + if (errors.categoryProduk && categoryProdukRef.current) { + categoryProdukRef.current.scrollIntoView(options); + return; + } + if (errors.tempoLimit && tempoLimitRef.current) { + tempoLimitRef.current.scrollIntoView(options); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick, chekValid]); + return ( + <> +
+

Kontak Person

+
+
+
+
+
+ +
+
+ + + Format: PT. INDOTEKNIK DOTCOM GEMILANG + + {chekValid && ( +
+ {errors.name} +
+ )} +
+
+
+
+ + + isi detail perusahaan sesuai dengan nama yang terdaftar + +
+
+ ( + + )} + /> + {selectedCategory && ( + + Kategori : {selectedCategory} + + )} + {chekValid && ( +
+ {errors.industry_id} +
+ )} +
+
+ +
+
+ + + alamat sesuai dengan alamat kantor pusat + +
+
+
+ + {chekValid && ( +
+ {errors.street} +
+ )} +
+
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.state} +
+ )} +
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.city} +
+ )} +
+
+ + {chekValid && ( +
+ {errors.zip} +
+ )} +
+
+
+
+
+
+ + + isi no telfon perusahaan yang sesuai + +
+
+ + {chekValid && ( +
+ {errors.mobile} +
+ )} +
+
+ +
+
+ + + Isi detail data bank perusahaan anda + +
+
+
+ + + Format: BCA, Mandiri, CIMB, BNI dll + + {chekValid && ( +
+ {errors.bankName} +
+ )} +
+
+ + Format: John Doe + {chekValid && ( +
+ {errors.accountName} +
+ )} +
+
+ + Format: 01234567896 + {chekValid && ( +
+ {errors.accountNumber} +
+ )} +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka + // })} + placeholder='Isi estimasi pembelian produk pertahun' + type='text' + className='form-input' // padding untuk memberi ruang untuk "RP" + value={formatRupiah(form.estimasi)} + onChange={handleChange} // Mengatur perubahan input + /> +
+ {chekValid && ( +
+ {errors.estimasi} +
+ )} +
+
+ +
+
+ + + Pilih durasi tempo yang anda inginkan + +
+
+
+ + + + 7 Hari + + + 14 Hari + + + 30 Hari + + + + {chekValid && ( +
+ {errors.tempoDuration} +
+ )} +
+
+
+ + + Ajukan nilai limit yang anda mau + +
+
+ + + {/* Kolom 1 */} + + + 5.000.000 + + + 10.000.000 + + + 15.000.000 + + + 20.000.000 + + + + {/* Kolom 2 */} + + + 25.000.000 + + + 30.000.000 + + + 35.000.000 + +
+ + { + const value = e.target.value; + const formattedValue = formatRupiah(value); + updateForm('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form + }} + /> +
+ + + + {chekValid && ( +
+ {errors.tempoLimit} +
+ )} +
+
+
+
+ +
+ *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim + Indoteknik.com +
+ +
+
+ + + Pilih produk bisa lebih dari 1 + +
+
+
+ handleCheckboxBersediaChange('bersedia')} + value={true} + size='md' + > + Saya bersedia + + handleCheckboxBersediaChange('tidakBersedia')} + value={false} + size='md' + > + Tidak bersedia + +
+ {chekValid && ( +
+ {errors.estimasi} +
+ )} +
+
+ +
+
+ + + Pilih produk bisa lebih dari 1 + +
+
+
+
+ {firstColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+ {secondColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+ {chekValid && ( +
+ {errors.categoryProduk} +
+ )} +
+
+
+
+ + ); +}; + +export default KontakPerusahaan; diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index 5f250438..c15189d1 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { useMemo, useState, useEffect, useRef } from 'react'; import Stepper from './Stepper'; import InformasiPerusahaan from './informasiPerusahaan'; +import KontakPerusahaan from './KontakPerusahaan'; import { Controller, useForm } from 'react-hook-form'; import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; import { ChevronRightIcon } from '@heroicons/react/24/outline'; @@ -13,6 +14,10 @@ const PengajuanTempo = () => { const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const stepDivs = [ + , { return ( <>
-

Informasi Perusahaan

+

Informasi Perusahaan

-- cgit v1.2.3 From 661d742193b62aeb3d2a2350433bdd3714667625 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 18 Oct 2024 10:39:40 +0700 Subject: add kontak perusahaan --- .../register/stores/usePengajuanTempoStore.ts | 89 ++- src-migrate/types/tempo.ts | 16 +- src-migrate/validations/tempo.ts | 29 +- .../pengajuan-tempo/component/KontakPerusahaan.jsx | 598 ++++++--------------- .../pengajuan-tempo/component/PengajuanTempo.jsx | 32 +- .../component/informasiPerusahaan.jsx | 2 +- 6 files changed, 242 insertions(+), 524 deletions(-) diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts index 8891e6ea..247f62dd 100644 --- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts +++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts @@ -93,83 +93,64 @@ export const usePengajuanTempoStore = create((set, get) => ({ })); type StateKontakPerson = { - form: TempoPropsKontakPerson; - errors: { + formKontakPerson: TempoPropsKontakPerson; + errorsKontakPerson: { [key in keyof TempoPropsKontakPerson]?: string; }; - isCheckedTNC: boolean; - isOpenTNC: boolean; - isValidCaptcha: boolean; +}; +type ActionKontakPerson = { + updateFormKontakPerson: (name: string, value: string) => void; + + validateKontakPerson: () => void; + resetFormKontakPerson: () => void; }; export const usePengajuanTempoStoreKontakPerson = create< - StateKontakPerson & Action + StateKontakPerson & ActionKontakPerson >((set, get) => ({ - form: { + formKontakPerson: { direkturName: '', direkturMobile: '', direkturEmail: '', - industry_id: '', - street: '', - state: '', - city: '', - zip: '', - bankName: '', - accountName: '', - accountNumber: '', - estimasi: '', - tempoDuration: '', - bersedia: '', - categoryProduk: '', - tempoLimit: '', + purchasingName: '', + purchasingEmail: '', + financeMobile: '', + financeName: '', + financeEmail: '', }, - updateForm: (name, value) => - set((state) => ({ form: { ...state.form, [name]: value } })), + updateFormKontakPerson: (name, value) => + set((state) => ({ + formKontakPerson: { ...state.formKontakPerson, [name]: value }, + })), - errors: {}, - validate: () => { + errorsKontakPerson: {}, + validateKontakPerson: () => { try { - TempoSchemaKontakPerson.parse(get().form); - set({ errors: {} }); + TempoSchemaKontakPerson.parse(get().formKontakPerson); + set({ errorsKontakPerson: {} }); } catch (error) { if (error instanceof ZodError) { - const errors: StateKontakPerson['errors'] = {}; + const errorsKontakPerson: StateKontakPerson['errorsKontakPerson'] = {}; error.errors.forEach( - (e) => (errors[e.path[0] as keyof TempoPropsKontakPerson] = e.message) + (e) => + (errorsKontakPerson[e.path[0] as keyof TempoPropsKontakPerson] = + e.message) ); - set({ errors }); + set({ errorsKontakPerson }); } } }, - isCheckedTNC: false, - toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })), - - isOpenTNC: false, - openTNC: () => set(() => ({ isOpenTNC: true })), - closeTNC: () => set(() => ({ isOpenTNC: false })), - - isValidCaptcha: false, - updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })), - - resetForm: () => + resetFormKontakPerson: () => set({ - form: { + formKontakPerson: { direkturName: '', direkturMobile: '', direkturEmail: '', - industry_id: '', - street: '', - state: '', - city: '', - zip: '', - bankName: '', - accountName: '', - accountNumber: '', - estimasi: '', - tempoDuration: '', - bersedia: '', - categoryProduk: '', - tempoLimit: '', + purchasingName: '', + purchasingEmail: '', + financeName: '', + financeMobile: '', + financeEmail: '', }, }), })); diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts index a4bd3d0a..fc920c05 100644 --- a/src-migrate/types/tempo.ts +++ b/src-migrate/types/tempo.ts @@ -22,17 +22,11 @@ export type tempoPropsKontakPerson = { direkturName: string; direkturMobile: string; direkturEmail: string; - industry_id: string; - street: string; - state: string; - city: string; - zip: string; - bankName: string; - accountName: string; - accountNumber: string; - estimasi: string; - tempoDuration: string; - bersedia: string; + purchasingName: string; + purchasingEmail: string; + financeMobile: string; + financeEmail: string; + financeName: string; }; export type TempoApiProps = OdooApiRes; diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts index dca60869..45cc8cd2 100644 --- a/src-migrate/validations/tempo.ts +++ b/src-migrate/validations/tempo.ts @@ -28,31 +28,30 @@ export const TempoSchema = z.object({ }); export const TempoSchemaKontakPerson = z.object({ direkturName: z.string().min(1, { message: 'Nama harus diisi' }), + financeName: z.string().min(1, { message: 'Nama harus diisi' }), direkturMobile: z .string() .min(1, { message: 'Nomor telepon harus diisi' }) .refine((val) => /^\d{10,12}$/.test(val), { message: 'Format nomor telepon tidak valid, contoh: 081234567890', }), + financeMobile: z + .string() + .min(1, { message: 'Nomor telepon harus diisi' }) + .refine((val) => /^\d{10,12}$/.test(val), { + message: 'Format nomor telepon tidak valid, contoh: 081234567890', + }), direkturEmail: z .string() .min(1, { message: 'Email harus diisi' }) .email({ message: 'Email harus menggunakan format example@mail.com' }), - street: z.string().min(1, { message: 'Alamat harus diisi' }), - industry_id: z.string().min(1, { message: 'Jenis usaha harus dipilih' }), - zip: z.string().min(1, { message: 'Kode pos harus diisi' }), - state: z.string().min(1, { message: 'Provinsi harus dipilih' }), - city: z.string().min(1, { message: 'Kota harus dipilih' }), - bankName: z.string().min(1, { message: 'Nama bank harus diisi' }), - accountName: z.string().min(1, { message: 'Nama rekening harus diisi' }), - accountNumber: z.string().min(1, { message: 'Nomor rekening harus diisi' }), - estimasi: z + purchasingEmail: z .string() - .min(1, { message: 'Estimasi pemmbelian pertahun harus diisi' }), - tempoDuration: z.string().min(1, { message: 'Durasi tempo harus dipilih' }), - tempoLimit: z.string().min(1, { message: 'Limit tempo harus dipilih' }), - bersedia: z.string().min(1, { message: 'Harus dipilih' }), - categoryProduk: z + .min(1, { message: 'Email harus diisi' }) + .email({ message: 'Email harus menggunakan format example@mail.com' }), + financeEmail: z .string() - .min(1, { message: 'Category produk harus dipilih' }), + .min(1, { message: 'Email harus diisi' }) + .email({ message: 'Email harus menggunakan format example@mail.com' }), + purchasingName: z.string().min(1, { message: 'Nama harus diisi' }), }); diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx index d292449b..a595ff13 100644 --- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx @@ -5,10 +5,15 @@ import odooApi from '~/libs/odooApi'; import stateApi from '@/lib/address/api/stateApi.js'; import cityApi from '@/lib/address/api/cityApi'; import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react'; -import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { const { control, watch } = useForm(); - const { form, errors, validate, updateForm } = usePengajuanTempoStore(); + const { + formKontakPerson, + errorsKontakPerson, + validateKontakPerson, + updateFormKontakPerson, + } = usePengajuanTempoStoreKontakPerson(); const [industries, setIndustries] = useState([]); const [selectedCategory, setSelectedCategory] = useState(''); const [states, setState] = useState([]); @@ -43,10 +48,10 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { const watchState = watch('state'); useEffect(() => { - updateForm('city', ''); + updateFormKontakPerson('city', ''); if (watchState) { - updateForm('state', `${watchState}`); - validate(); + updateFormKontakPerson('state', `${watchState}`); + validateKontakPerson(); const loadCities = async () => { let dataCities = await cityApi({ stateId: watchState }); dataCities = dataCities.map((city) => ({ @@ -62,8 +67,8 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { const watchCity = watch('city'); useEffect(() => { if (watchCity) { - updateForm('city', `${watchCity}`); - validate(); + updateFormKontakPerson('city', `${watchCity}`); + validateKontakPerson(); } }, [watchCity]); @@ -86,8 +91,8 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { (industry) => industry.value === watch('industry_id') ); if (selectedIndustryType) { - updateForm('industry_id', `${selectedIndustryType?.value}`); - validate(); + updateFormKontakPerson('industry_id', `${selectedIndustryType?.value}`); + validateKontakPerson(); setSelectedCategory(selectedIndustryType.category); } }, [watch('industry_id'), industries]); @@ -108,17 +113,17 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { const value = e.target.value; const formattedValue = formatRupiah(value); console.log('formattedValue', formattedValue); - updateForm('estimasi', formattedValue.replace(/^Rp\s*/, '')); - validate(); + updateFormKontakPerson('estimasi', formattedValue.replace(/^Rp\s*/, '')); + validateKontakPerson(); }; const onChangeTempoDuration = (e) => { - updateForm('tempoDuration', `${e}`); - validate(); + updateFormKontakPerson('tempoDuration', `${e}`); + validateKontakPerson(); }; const onChangeTempoLimit = (e) => { - updateForm('tempoLimit', `${e}`); - validate(); + updateFormKontakPerson('tempoLimit', `${e}`); + validateKontakPerson(); }; const handleCheckboxBersediaChange = (value) => { if (value === 'bersedia') { @@ -126,8 +131,8 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { } else if (value === 'tidakBersedia') { setBersedia(false); } - updateForm('bersedia', `${value === 'bersedia'}`); - validate(); + updateFormKontakPerson('bersedia', `${value === 'bersedia'}`); + validateKontakPerson(); }; const [selectedIds, setSelectedIds] = useState([]); @@ -137,36 +142,33 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { ? prevSelected.filter((selectedId) => selectedId !== id) : [...prevSelected, id] ); - updateForm('categoryProduk', `${selectedIds}`); - validate(); + updateFormKontakPerson('categoryProduk', `${selectedIds}`); + validateKontakPerson(); }; const handleInputChange = (event) => { const { name, value } = event.target; - updateForm(name, value); - validate(); + updateFormKontakPerson(name, value); + validateKontakPerson(); }; const midIndex = Math.ceil(category_produk.length / 2); const firstColumn = category_produk.slice(0, midIndex); const secondColumn = category_produk.slice(midIndex); - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + const isFormValid = useMemo( + () => Object.keys(errorsKontakPerson).length === 0, + [errorsKontakPerson] + ); + + const direkturNameRef = useRef(null); + const direkturMobileRef = useRef(null); + const direkturEmailRef = useRef(null); + const purchasingNameRef = useRef(null); + const purchasingEmailRef = useRef(null); + const financeNameRef = useRef(null); + const financeMobileRef = useRef(null); + const financeEmailRef = useRef(null); - const nameRef = useRef(null); - const industry_idRef = useRef(null); - const streetRef = useRef(null); - const stateRef = useRef(null); - const cityRef = useRef(null); - const zipRef = useRef(null); - const mobileRef = useRef(null); - const bankNameRef = useRef(null); - const accountNameRef = useRef(null); - const accountNumberRef = useRef(null); - const estimasiRef = useRef(null); - const tempoDurationRef = useRef(null); - const bersediaRef = useRef(null); - const categoryProdukRef = useRef(null); - const tempoLimitRef = useRef(null); useEffect(() => { const loadIndustries = async () => { if (!isFormValid) { @@ -174,64 +176,36 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { behavior: 'smooth', block: 'center', }; - if (errors.name && nameRef.current) { - nameRef.current.scrollIntoView(options); - return; - } - if (errors.industry_id && industry_idRef.current) { - industry_idRef.current.scrollIntoView(options); - return; - } - if (errors.street && streetRef.current) { - streetRef.current.scrollIntoView(options); + if (errorsKontakPerson.direkturName && direkturNameRef.current) { + direkturNameRef.current.scrollIntoView(options); return; } - if (errors.state && stateRef.current) { - stateRef.current.scrollIntoView(options); + if (errorsKontakPerson.direkturMobile && direkturMobileRef.current) { + direkturMobileRef.current.scrollIntoView(options); return; } - if (errors.city && cityRef.current) { - cityRef.current.scrollIntoView(options); + if (errorsKontakPerson.direkturEmail && direkturEmailRef.current) { + direkturEmailRef.current.scrollIntoView(options); return; } - if (errors.zip && zipRef.current) { - zipRef.current.scrollIntoView(options); + if (errorsKontakPerson.purchasingName && purchasingNameRef.current) { + purchasingNameRef.current.scrollIntoView(options); return; } - if (errors.mobile && mobileRef.current) { - mobileRef.current.scrollIntoView(options); + if (errorsKontakPerson.purchasingEmail && purchasingEmailRef.current) { + purchasingEmailRef.current.scrollIntoView(options); return; } - if (errors.bankName && bankNameRef.current) { - bankNameRef.current.scrollIntoView(options); + if (errorsKontakPerson.financeName && financeNameRef.current) { + financeNameRef.current.scrollIntoView(options); return; } - if (errors.accountName && accountNameRef.current) { - accountNameRef.current.scrollIntoView(options); + if (errorsKontakPerson.financeMobile && financeMobileRef.current) { + financeMobileRef.current.scrollIntoView(options); return; } - if (errors.accountNumber && accountNumberRef.current) { - accountNumberRef.current.scrollIntoView(options); - return; - } - if (errors.estimasi && estimasiRef.current) { - estimasiRef.current.scrollIntoView(options); - return; - } - if (errors.tempoDuration && tempoDurationRef.current) { - tempoDurationRef.current.scrollIntoView(options); - return; - } - if (errors.bersedia && bersediaRef.current) { - bersediaRef.current.scrollIntoView(options); - return; - } - if (errors.categoryProduk && categoryProdukRef.current) { - categoryProdukRef.current.scrollIntoView(options); - return; - } - if (errors.tempoLimit && tempoLimitRef.current) { - tempoLimitRef.current.scrollIntoView(options); + if (errorsKontakPerson.financeEmail && financeEmailRef.current) { + financeEmailRef.current.scrollIntoView(options); return; } } @@ -253,52 +227,46 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
- - Format: PT. INDOTEKNIK DOTCOM GEMILANG - {chekValid && (
- {errors.name} + {errorsKontakPerson.direkturName}
)}
+
-
- +
+ - isi detail perusahaan sesuai dengan nama yang terdaftar + isi nomor telpon direktur di perusahaan kamu
- ( - - )} + - {selectedCategory && ( - - Kategori : {selectedCategory} - - )} {chekValid && (
- {errors.industry_id} + {errorsKontakPerson.direkturMobile}
)}
@@ -307,371 +275,137 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
- alamat sesuai dengan alamat kantor pusat + isi email Direktur yang sesuai
-
-
- - {chekValid && ( -
- {errors.street} -
- )} -
-
-
- ( - - )} - /> - {chekValid && ( -
- {errors.state} -
- )} -
-
- ( - - )} - /> - {chekValid && ( -
- {errors.city} -
- )} -
-
- - {chekValid && ( -
- {errors.zip} -
- )} +
+ + {chekValid && ( +
+ {errorsKontakPerson.direkturEmail}
-
+ )}
+
- isi no telfon perusahaan yang sesuai + isi nama purchasing yang bertanggung jawab di perusahaan anda
{chekValid && (
- {errors.mobile} + {errorsKontakPerson.purchasingName}
)}
-
-
- - - Isi detail data bank perusahaan anda - -
-
-
- - - Format: BCA, Mandiri, CIMB, BNI dll - - {chekValid && ( -
- {errors.bankName} -
- )} -
-
- - Format: John Doe - {chekValid && ( -
- {errors.accountName} -
- )} -
-
- - Format: 01234567896 - {chekValid && ( -
- {errors.accountNumber} -
- )} -
-
-
-
+ + isi email purchasing benar +
-
-
- -
-
- -
-
-
- value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka - // })} - placeholder='Isi estimasi pembelian produk pertahun' - type='text' - className='form-input' // padding untuk memberi ruang untuk "RP" - value={formatRupiah(form.estimasi)} - onChange={handleChange} // Mengatur perubahan input - /> -
{chekValid && (
- {errors.estimasi} + {errorsKontakPerson.purchasingEmail}
)}
-
+
- Pilih durasi tempo yang anda inginkan + isi nama finance yang bertanggung jawab di perusahaan anda
-
-
- - - - 7 Hari - - - 14 Hari - - - 30 Hari - - - - {chekValid && ( -
- {errors.tempoDuration} -
- )} -
-
-
- - - Ajukan nilai limit yang anda mau - -
-
- - - {/* Kolom 1 */} - - - 5.000.000 - - - 10.000.000 - - - 15.000.000 - - - 20.000.000 - - - - {/* Kolom 2 */} - - - 25.000.000 - - - 30.000.000 - - - 35.000.000 - -
- - { - const value = e.target.value; - const formattedValue = formatRupiah(value); - updateForm('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form - }} - /> -
- - - - {chekValid && ( -
- {errors.tempoLimit} -
- )} +
+ + {chekValid && ( +
+ {errorsKontakPerson.financeName}
-
+ )}
- -
- *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim - Indoteknik.com -
-
- Pilih produk bisa lebih dari 1 + isi nomor finance yang bertanggung jawab di perusahaan anda
-
-
- handleCheckboxBersediaChange('bersedia')} - value={true} - size='md' - > - Saya bersedia - - handleCheckboxBersediaChange('tidakBersedia')} - value={false} - size='md' - > - Tidak bersedia - -
+
+ {chekValid && (
- {errors.estimasi} + {errorsKontakPerson.financeMobile}
)}
@@ -680,38 +414,26 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
- Pilih produk bisa lebih dari 1 + isi email finance dengan benar
-
-
-
- {firstColumn.map((item) => ( - handleCheckboxChange(item.id)} - > - {item.name} - - ))} -
-
- {secondColumn.map((item) => ( - handleCheckboxChange(item.id)} - > - {item.name} - - ))} -
-
+
+ {chekValid && (
- {errors.categoryProduk} + {errorsKontakPerson.financeEmail}
)}
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index c15189d1..b2e9832e 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -4,14 +4,22 @@ import Stepper from './Stepper'; import InformasiPerusahaan from './informasiPerusahaan'; import KontakPerusahaan from './KontakPerusahaan'; import { Controller, useForm } from 'react-hook-form'; -import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import { + usePengajuanTempoStore, + usePengajuanTempoStoreKontakPerson, +} from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; import { ChevronRightIcon } from '@heroicons/react/24/outline'; const PengajuanTempo = () => { const [currentStep, setCurrentStep] = React.useState(0); const NUMBER_OF_STEPS = 6; const { form, errors, validate, updateForm } = usePengajuanTempoStore(); + const { + formKontakPerson, + errorsKontakPerson, + validateKontakPerson, + updateFormKontakPerson, + } = usePengajuanTempoStoreKontakPerson(); const [notValid, setNotValid] = useState(false); - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const stepDivs = [ {
Dokumen
,
Konfirmasi
, ]; + const stepDivsError = [ + errorsKontakPerson, + errors, +
Kontak Person
, +
Pengiriman
, +
Referensi
, +
Dokumen
, +
Konfirmasi
, + ]; + const isFormValid = useMemo( + () => Object.keys(stepDivsError[currentStep]).length === 0, + [stepDivsError[currentStep]] + ); useEffect(() => { validate(); + validateKontakPerson(); }, []); - + console.log('isFormValid', isFormValid); const goToNextStep = () => { if (!isFormValid) { setNotValid(true); setButtonSubmitClick(!buttonSubmitClick); console.log('form', form); - console.log('error', errors); + console.log('error', stepDivsError[currentStep]); return; } else { console.log('form', form); - console.log('error', errors); + console.log('error', stepDivsError[currentStep]); setButtonSubmitClick(!buttonSubmitClick); setNotValid(false); } diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx index 0a33f5fb..e5b2ff2c 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -405,7 +405,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { name='mobile' ref={mobileRef} placeholder='Masukkan nomor telfon perusahaan' - type='text' + type='tel' className='form-input' aria-invalid={errors.mobile} onChange={handleInputChange} -- cgit v1.2.3 From b884ae8fb7b3d208912f75decfe941435c59d571 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 18 Oct 2024 11:25:02 +0700 Subject: save to local storage --- .../pengajuan-tempo/component/PengajuanTempo.jsx | 72 +++++++++++++++++----- .../component/informasiPerusahaan.jsx | 8 +++ 2 files changed, 65 insertions(+), 15 deletions(-) diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index b2e9832e..bdd6e6ef 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -8,7 +8,8 @@ import { usePengajuanTempoStore, usePengajuanTempoStoreKontakPerson, } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; -import { ChevronRightIcon } from '@heroicons/react/24/outline'; +import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'; +import { chakra } from '@chakra-ui/react'; const PengajuanTempo = () => { const [currentStep, setCurrentStep] = React.useState(0); const NUMBER_OF_STEPS = 6; @@ -22,11 +23,11 @@ const PengajuanTempo = () => { const [notValid, setNotValid] = useState(false); const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const stepDivs = [ - , - , @@ -37,14 +38,31 @@ const PengajuanTempo = () => {
Konfirmasi
, ]; const stepDivsError = [ - errorsKontakPerson, errors, + errorsKontakPerson, +
Kontak Person
, +
Pengiriman
, +
Referensi
, +
Dokumen
, +
Konfirmasi
, + ]; + const stepDivsForm = [ + form, + formKontakPerson,
Kontak Person
,
Pengiriman
,
Referensi
,
Dokumen
,
Konfirmasi
, ]; + const stepLabels = [ + 'informasi_perusahaan', + 'kontak_person', + 'Pengiriman', + 'Referensi', + 'Dokumen', + 'Konfirmasi', + ]; const isFormValid = useMemo( () => Object.keys(stepDivsError[currentStep]).length === 0, @@ -54,16 +72,18 @@ const PengajuanTempo = () => { validate(); validateKontakPerson(); }, []); - console.log('isFormValid', isFormValid); const goToNextStep = () => { if (!isFormValid) { setNotValid(true); setButtonSubmitClick(!buttonSubmitClick); - console.log('form', form); + console.log('form', stepDivsForm[currentStep]); console.log('error', stepDivsError[currentStep]); return; } else { - console.log('form', form); + saveToLocalStorage(stepLabels[currentStep], stepDivsForm[currentStep]); + const cachedData = getFromLocalStorage(stepLabels[currentStep]); + console.log('cachedData', cachedData); + console.log('form', stepDivsForm[currentStep]); console.log('error', stepDivsError[currentStep]); setButtonSubmitClick(!buttonSubmitClick); setNotValid(false); @@ -71,8 +91,29 @@ const PengajuanTempo = () => { setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1)); }; - const goToPreviousStep = () => + const goToPreviousStep = () => { + const cachedData = getFromLocalStorage(stepLabels[currentStep - 1]); + console.log('cachedData prev button', cachedData); + if (cachedData) { + // const formData = JSON.parse(cachedData); + Object.keys(cachedData).forEach((key) => { + updateForm(key, cachedData[key]); + }); + } setCurrentStep((prev) => (prev <= 0 ? prev : prev - 1)); + }; + + const saveToLocalStorage = (key, form) => { + localStorage.setItem(key, JSON.stringify(form)); + }; + + const getFromLocalStorage = (key) => { + const itemStr = localStorage.getItem(key); + if (!itemStr) return null; + + const item = JSON.parse(itemStr); + return item; + }; return ( <> @@ -94,13 +135,6 @@ const PengajuanTempo = () => {
{stepDivs[currentStep]}
- {/* */} {/*
{ ref={direkturMobileRef} placeholder='Masukkan nomor direktur anda' type='tel' + value={formKontakPerson.direkturMobile} className='form-input' aria-invalid={errorsKontakPerson.direkturMobile} onChange={handleInputChange} @@ -288,6 +164,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { ref={direkturEmailRef} placeholder='contoh@email.com' type='email' + value={formKontakPerson.direkturEmail} className='form-input' aria-invalid={errorsKontakPerson.direkturEmail} onChange={handleInputChange} @@ -315,6 +192,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { name='purchasingName' ref={purchasingNameRef} placeholder='Masukkan nama purchasing anda' + value={formKontakPerson.purchasingName} type='text' className='form-input' aria-invalid={errorsKontakPerson.purchasingName} @@ -328,6 +206,35 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
+
+
+ + + isi nomor purchasing yang bertanggung jawab di perusahaan anda + +
+
+ + {chekValid && ( +
+ {errorsKontakPerson.purchasingMobile} +
+ )} +
+
+