From bc04e721d51e149709ab3cfaf5e77ef034511860 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 27 Mar 2023 10:17:49 +0700
Subject: invoice, invoice detail, address, create address, edit address,
 wishlist

---
 src/lib/address/components/Addresses.jsx     | 125 ++++++++++----
 src/lib/address/components/CreateAddress.jsx | 237 +++++++++++++--------------
 src/lib/address/components/EditAddress.jsx   | 237 +++++++++++++--------------
 3 files changed, 314 insertions(+), 285 deletions(-)

(limited to 'src/lib/address')

diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
index 3ac06b6c..a2adecb1 100644
--- a/src/lib/address/components/Addresses.jsx
+++ b/src/lib/address/components/Addresses.jsx
@@ -4,13 +4,15 @@ import useAuth from '@/core/hooks/useAuth'
 import { getItemAddress, updateItemAddress } from '@/core/utils/address'
 import { useRouter } from 'next/router'
 import useAddresses from '../hooks/useAddresses'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import Menu from '@/lib/auth/components/Menu'
 
 const Addresses = () => {
   const router = useRouter()
   const { select = null } = router.query
-  const auth = useAuth()
   const { addresses } = useAddresses()
-  const selectedAdress = getItemAddress(select || '')
+  const selectedAddress = getItemAddress(select || '')
   const changeSelectedAddress = (id) => {
     if (!select) return
     updateItemAddress(select, id)
@@ -26,43 +28,96 @@ const Addresses = () => {
   }
 
   return (
-    <div className='p-4'>
-      <div className='text-right'>
-        <Link href='/my/address/create'>Tambah Alamat</Link>
-      </div>
+    <>
+      <MobileView>
+        <div className='p-4'>
+          <div className='text-right'>
+            <Link href='/my/address/create'>Tambah Alamat</Link>
+          </div>
+
+          <div className='grid gap-y-4 mt-4'>
+            {addresses.data?.map((address, index) => {
+              const type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
+              return (
+                <AddressCard
+                  key={index}
+                  address={address}
+                  type={type}
+                  changeSelectedAddress={changeSelectedAddress}
+                  selectedAddress={selectedAddress}
+                  select={select}
+                />
+              )
+            })}
+          </div>
+        </div>
+      </MobileView>
 
-      <div className='grid gap-y-4 mt-4'>
-        {addresses.data?.map((address, index) => {
-          let type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
-          return (
-            <div
-              key={index}
-              className={
-                'p-4 rounded-md border ' +
-                (selectedAdress && selectedAdress == address.id
-                  ? 'border-gray_r-7 bg-gray_r-4'
-                  : 'border-gray_r-7')
-              }
-            >
-              <div onClick={() => changeSelectedAddress(address.id)}>
-                <div className='flex gap-x-2'>
-                  <div className='badge-red'>{type}</div>
-                  {auth?.partnerId == address.id && <div className='badge-green'>Utama</div>}
-                </div>
-                <p className='font-medium mt-2'>{address.name}</p>
-                {address.mobile && <p className='mt-2 text-gray_r-11'>{address.mobile}</p>}
-                <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
-              </div>
-              <Link
-                href={`/my/address/${address.id}/edit`}
-                className='btn-light bg-white mt-3 w-full !text-gray_r-11'
-              >
-                Ubah Alamat
+      <DesktopView>
+        <div className='container mx-auto flex py-10'>
+          <div className='w-3/12 pr-4'>
+            <Menu />
+          </div>
+          <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+            <div className='flex items-center mb-6'>
+              <h1 className='text-title-sm font-semibold'>Daftar Alamat</h1>
+              <Link href='/my/address/create' className='btn-solid-red py-2 px-3 text-gray_r-1 h-fit ml-auto'>
+                Tambah Alamat
               </Link>
             </div>
-          )
-        })}
+
+            <div className='grid grid-cols-2 gap-4'>
+              {addresses.data?.map((address, index) => {
+                const type =
+                  address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
+                return (
+                  <AddressCard
+                    key={index}
+                    address={address}
+                    type={type}
+                    changeSelectedAddress={changeSelectedAddress}
+                    selectedAddress={selectedAddress}
+                    select={select}
+                  />
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </DesktopView>
+    </>
+  )
+}
+
+const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, select }) => {
+  const auth = useAuth()
+
+  return (
+    <div
+      className={`p-4 rounded-md border 
+        ${
+          (selectedAddress && selectedAddress == address.id
+            ? 'border-gray_r-7 bg-gray_r-4'
+            : 'border-gray_r-7') +
+          ' ' +
+          (select && 'cursor-pointer hover:bg-gray_r-4 transition')
+        }`}
+    >
+      <div onClick={() => changeSelectedAddress(address.id)} className={select && 'cursor-pointer'}>
+        <div className='flex gap-x-2'>
+          <div className='badge-red'>{type}</div>
+          {auth?.partnerId == address.id && <div className='badge-green'>Utama</div>}
+        </div>
+        <p className='font-medium mt-2'>{address.name}</p>
+        {address.mobile && <p className='mt-2 text-gray_r-11'>{address.mobile}</p>}
+        <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
       </div>
+      <Link
+        href={`/my/address/${address.id}/edit`}
+        className='btn-light bg-white mt-3 w-full !text-gray_r-11'
+      >
+        Ubah Alamat
+      </Link>
     </div>
   )
 }
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index 849b4c01..475d8548 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -10,6 +10,7 @@ import { useEffect, useState } from 'react'
 import createAddressApi from '../api/createAddressApi'
 import { toast } from 'react-hot-toast'
 import { yupResolver } from '@hookform/resolvers/yup'
+import Menu from '@/lib/auth/components/Menu'
 
 const CreateAddress = () => {
   const auth = useAuth()
@@ -88,133 +89,119 @@ const CreateAddress = () => {
   }
 
   return (
-    <form
-      className='p-4 flex flex-col gap-y-4'
-      onSubmit={handleSubmit(onSubmitHandler)}
-    >
-      <div>
-        <label className='form-label mb-2'>Label Alamat</label>
-        <Controller
-          name='type'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              isSearchable={false}
-              options={types}
-            />
-          )}
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+    <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
+      <div className='hidden md:block w-3/12 pr-4'>
+        <Menu />
       </div>
-
-      <div>
-        <label className='form-label mb-2'>Nama</label>
-        <input
-          {...register('name')}
-          placeholder='John Doe'
-          type='text'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Email</label>
-        <input
-          {...register('email')}
-          placeholder='contoh@email.com'
-          type='email'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Mobile</label>
-        <input
-          {...register('mobile')}
-          placeholder='08xxxxxxxx'
-          type='tel'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Alamat</label>
-        <input
-          {...register('street')}
-          placeholder='Jl. Bandengan Utara 85A'
-          type='text'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kode Pos</label>
-        <input
-          {...register('zip')}
-          placeholder='10100'
-          type='number'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kota</label>
-        <Controller
-          name='city'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              options={cities}
-            />
-          )}
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kecamatan</label>
-        <Controller
-          name='district'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              options={districts}
-              disabled={!watchCity}
-            />
-          )}
-        />
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kelurahan</label>
-        <Controller
-          name='subDistrict'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              options={subDistricts}
-              disabled={!watchDistrict}
-            />
-          )}
-        />
+      <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+        <form onSubmit={handleSubmit(onSubmitHandler)}>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+            <div>
+              <label className='form-label mb-2'>Label Alamat</label>
+              <Controller
+                name='type'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} isSearchable={false} options={types} />
+                )}
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Nama</label>
+              <input
+                {...register('name')}
+                placeholder='John Doe'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Email</label>
+              <input
+                {...register('email')}
+                placeholder='contoh@email.com'
+                type='email'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Mobile</label>
+              <input
+                {...register('mobile')}
+                placeholder='08xxxxxxxx'
+                type='tel'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Alamat</label>
+              <input
+                {...register('street')}
+                placeholder='Jl. Bandengan Utara 85A'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kode Pos</label>
+              <input
+                {...register('zip')}
+                placeholder='10100'
+                type='number'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kota</label>
+              <Controller
+                name='city'
+                control={control}
+                render={(props) => <HookFormSelect {...props} options={cities} />}
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kecamatan</label>
+              <Controller
+                name='district'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} options={districts} disabled={!watchCity} />
+                )}
+              />
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kelurahan</label>
+              <Controller
+                name='subDistrict'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} />
+                )}
+              />
+            </div>
+          </div>
+
+          <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
+            Simpan
+          </button>
+        </form>
       </div>
-
-      <button
-        type='submit'
-        className='btn-yellow mt-2 w-full'
-      >
-        Simpan
-      </button>
-    </form>
+    </div>
   )
 }
 
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index a832edbc..d754cbd9 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -9,6 +9,7 @@ import subDistrictApi from '../api/subDistrictApi'
 import editAddressApi from '../api/editAddressApi'
 import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
 import { toast } from 'react-hot-toast'
+import Menu from '@/lib/auth/components/Menu'
 
 const EditAddress = ({ id, defaultValues }) => {
   const router = useRouter()
@@ -102,133 +103,119 @@ const EditAddress = ({ id, defaultValues }) => {
   }
 
   return (
-    <form
-      className='p-4 flex flex-col gap-y-4'
-      onSubmit={handleSubmit(onSubmitHandler)}
-    >
-      <div>
-        <label className='form-label mb-2'>Label Alamat</label>
-        <Controller
-          name='type'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              isSearchable={false}
-              options={types}
-            />
-          )}
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+    <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
+      <div className='hidden md:block w-3/12 pr-4'>
+        <Menu />
       </div>
-
-      <div>
-        <label className='form-label mb-2'>Nama</label>
-        <input
-          {...register('name')}
-          placeholder='John Doe'
-          type='text'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Email</label>
-        <input
-          {...register('email')}
-          placeholder='johndoe@example.com'
-          type='email'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Mobile</label>
-        <input
-          {...register('mobile')}
-          placeholder='08xxxxxxxx'
-          type='tel'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Alamat</label>
-        <input
-          {...register('street')}
-          placeholder='Jl. Bandengan Utara 85A'
-          type='text'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kode Pos</label>
-        <input
-          {...register('zip')}
-          placeholder='10100'
-          type='number'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kota</label>
-        <Controller
-          name='city'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              options={cities}
-            />
-          )}
-        />
-        <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kecamatan</label>
-        <Controller
-          name='district'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              options={districts}
-              disabled={!watchCity}
-            />
-          )}
-        />
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Kelurahan</label>
-        <Controller
-          name='subDistrict'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              options={subDistricts}
-              disabled={!watchDistrict}
-            />
-          )}
-        />
+      <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+        <h1 className='text-title-sm font-semibold mb-6 hidden md:block'>Ubah Alamat</h1>
+        <form onSubmit={handleSubmit(onSubmitHandler)}>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+            <div>
+              <label className='form-label mb-2'>Label Alamat</label>
+              <Controller
+                name='type'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} isSearchable={false} options={types} />
+                )}
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Nama</label>
+              <input
+                {...register('name')}
+                placeholder='John Doe'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Email</label>
+              <input
+                {...register('email')}
+                placeholder='johndoe@example.com'
+                type='email'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Mobile</label>
+              <input
+                {...register('mobile')}
+                placeholder='08xxxxxxxx'
+                type='tel'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Alamat</label>
+              <input
+                {...register('street')}
+                placeholder='Jl. Bandengan Utara 85A'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kode Pos</label>
+              <input
+                {...register('zip')}
+                placeholder='10100'
+                type='number'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kota</label>
+              <Controller
+                name='city'
+                control={control}
+                render={(props) => <HookFormSelect {...props} options={cities} />}
+              />
+              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kecamatan</label>
+              <Controller
+                name='district'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} options={districts} disabled={!watchCity} />
+                )}
+              />
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Kelurahan</label>
+              <Controller
+                name='subDistrict'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} />
+                )}
+              />
+            </div>
+          </div>
+          <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
+            Simpan
+          </button>
+        </form>
       </div>
-
-      <button
-        type='submit'
-        className='btn-yellow mt-2 w-full'
-      >
-        Simpan
-      </button>
-    </form>
+    </div>
   )
 }
 
-- 
cgit v1.2.3