Merged in Feature/step_approval (pull request #130)

Feature/step approval

1 files changed, 257 insertions, 0 deletions

diff --git a/src/lib/checkout/components/CheckoutSection.jsx b/src/lib/checkout/components/CheckoutSection.jsx
new file mode 100644
index 00000000..7f9ea08a
--- /dev/null
+++ b/src/lib/checkout/components/CheckoutSection.jsx
@@ -0,0 +1,257 @@
+import Link from 'next/link';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Divider, Spinner } from '@chakra-ui/react';
+
+export const SectionAddress = ({ address, label, url }) => {
+  return (
+    <div className='p-4'>
+      <div className='flex justify-between items-center'>
+        <div className='font-medium'>{label}</div>
+        <Link className='text-caption-1' href={url}>
+          Pilih Alamat Lain
+        </Link>
+      </div>
+
+      {address && (
+        <div className='mt-4 text-caption-1'>
+          <div className='badge-red mb-2'>
+            {address.type.charAt(0).toUpperCase() +
+              address.type.slice(1) +
+              ' Address'}
+          </div>
+          <p className='font-medium'>{address.name}</p>
+          <p className='mt-2 text-gray_r-11'>{address.mobile}</p>
+          <p className='mt-1 text-gray_r-11'>
+            {address.street}, {address?.city?.name}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const SectionValidation = ({ address }) =>
+  address?.rajaongkirCityId == 0 && (
+    <BottomPopup active={true} title='Update Alamat'>
+      <div className='leading-7 text-gray_r-12/80'>
+        Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '}
+      </div>
+      <div className='flex justify-center mt-6 gap-x-4'>
+        <Link
+          className='btn-solid-red w-full md:w-fit text-white'
+          href={`/my/address/${address?.id}/edit`}
+        >
+          Update Alamat
+        </Link>
+      </div>
+    </BottomPopup>
+  );
+
+export const SectionExpedisi = ({
+  address,
+  listExpedisi,
+  setSelectedExpedisi,
+  checkWeigth,
+  checkoutValidation,
+  expedisiValidation,
+  loadingRajaOngkir,
+}) =>
+  address?.rajaongkirCityId > 0 && (
+    <div className='p-4' ref={expedisiValidation}>
+      <div className='flex justify-between items-center'>
+        <div className='font-medium'>Pilih Ekspedisi: </div>
+        <div className='w-[250px]'>
+          <div className='flex items-center gap-x-4'>
+            <select
+              className={`form-input ${
+                checkoutValidation ? 'border-red-500 shake' : ''
+              }`}
+              onChange={(e) => setSelectedExpedisi(e.target.value)}
+              required
+            >
+              <option value='0,0'>Pilih Pengiriman</option>
+              <option value='1,32'>SELF PICKUP</option>
+              {checkWeigth != true &&
+                listExpedisi.map((expedisi) => (
+                  <option
+                    disabled={checkWeigth}
+                    value={expedisi.label + ',' + expedisi.carrierId}
+                    key={expedisi.value}
+                  >
+                    {' '}
+                    {expedisi.label.toUpperCase()}{' '}
+                  </option>
+                ))}
+            </select>
+
+            <AnimatePresence>
+              {loadingRajaOngkir && (
+                <motion.div
+                  initial={{ opacity: 0, width: 0 }}
+                  animate={{ opacity: 1, width: '28px' }}
+                  exit={{ opacity: 0, width: 0 }}
+                  transition={{
+                    duration: 0.25,
+                  }}
+                  className='overflow-hidden'
+                >
+                  <Spinner thickness='3px' speed='0.5s' color='red.500' />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+          {checkoutValidation && (
+            <span className='text-sm text-red-500'>
+              *silahkan pilih expedisi
+            </span>
+          )}
+        </div>
+        <style jsx>{`
+          .shake {
+            animation: shake 0.4s ease-in-out;
+          }
+        `}</style>
+      </div>
+      {checkWeigth == true && (
+        <p className='mt-4 text-gray_r-11 leading-6'>
+          Mohon maaf, pengiriman hanya tersedia untuk self pickup karena
+          terdapat barang yang belum diatur beratnya. Mohon atur berat barang
+          dengan menghubungi admin melalui{' '}
+          <a
+            className='text-danger-500 inline'
+            href='https://api.whatsapp.com/send?phone=628128080622'
+          >
+            tautan ini
+          </a>
+        </p>
+      )}
+    </div>
+  );
+
+export const SectionListService = ({
+  listserviceExpedisi,
+  setSelectedServiceType,
+}) =>
+  listserviceExpedisi?.length > 0 && (
+    <>
+      <div className='p-4'>
+        <div className='flex justify-between items-center'>
+          <div className='font-medium'>Tipe Layanan Ekspedisi: </div>
+          <div>
+            <select
+              className='form-input'
+              onChange={(e) => setSelectedServiceType(e.target.value)}
+            >
+              {listserviceExpedisi.map((service) => (
+                <option
+                  value={
+                    service.cost[0].value +
+                    ',' +
+                    service.description +
+                    '-' +
+                    service.service +
+                    ',' +
+                    extractDuration(service.cost[0].etd)
+                  }
+                  key={service.service}
+                >
+                  {' '}
+                  {service.description} - {service.service.toUpperCase()}
+                  {extractDuration(service.cost[0].etd) &&
+                    ` (Estimasi Tiba ${extractDuration(
+                      service.cost[0].etd
+                    )} Hari)`}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+      <Divider />
+    </>
+  );
+
+export const PickupAddress = ({ label }) => (
+  <div className='p-4'>
+    <div className='flex justify-between items-center'>
+      <div className='font-medium'>{label}</div>
+    </div>
+    <div className='mt-4 text-caption-1'>
+      <p className='font-medium'>Indoteknik</p>
+      <p className='mt-2 mb-2 text-gray_r-11 leading-6'>
+        Jl. Bandengan Utara Raya No.85, RT.3/RW.16, Penjaringan, Kec.
+        Penjaringan, Kota Jkt Utara, Daerah Khusus Ibukota Jakarta, Indonesia
+        Kodepos : 14440
+      </p>
+      <p className='mt-1 text-gray_r-11'>Telp : 021-2933 8828/29</p>
+      <p className='mt-1 text-gray_r-11'>Mobile : 0813 9000 7430</p>
+    </div>
+  </div>
+);
+
+const extractDuration = (text) => {
+  const matches = text.match(/\d+(?:-\d+)?/g);
+
+  if (matches && matches.length === 1) {
+    const parts = matches[0].split('-');
+    const min = parseInt(parts[0]);
+    const max = parseInt(parts[1]);
+
+    if (min === max) {
+      return min.toString();
+    }
+
+    return matches[0];
+  }
+
+  return '';
+};
+
+export function calculateEstimatedArrival(duration) {
+  if (duration) {
+    let estimationDate = duration.split('-');
+    estimationDate[0] = parseInt(estimationDate[0]);
+    estimationDate[1] = parseInt(estimationDate[1]);
+    const from = addDays(new Date(), estimationDate[0] + 3);
+    const to = addDays(new Date(), estimationDate[1] + 3);
+
+    let etdText = `*Estimasi tiba ${formatDate(from)}`;
+
+    if (estimationDate[1] > estimationDate[0]) {
+      etdText += ` - ${formatDate(to)}`;
+    }
+
+    return etdText;
+  }
+
+  return '';
+}
+
+function addDays(date, days) {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+}
+
+function formatDate(date) {
+  const day = date.getDate();
+  const month = date.toLocaleString('default', { month: 'short' });
+  return `${day} ${month}`;
+}
+
+export function splitDuration(duration) {
+  if (duration) {
+    let estimationDate = null;
+    if (duration.includes('-')) {
+      estimationDate = duration.split('-');
+      estimationDate = parseInt(estimationDate[1]);
+    } else {
+      estimationDate = parseInt(duration);
+    }
+
+    return estimationDate;
+  }
+
+  return '';
+}
\ No newline at end of file