summaryrefslogtreecommitdiff
path: root/src/lib/checkout
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/checkout')
-rw-r--r--src/lib/checkout/components/Checkout.jsx98
-rw-r--r--src/lib/checkout/components/CheckoutOld.jsx2
-rw-r--r--src/lib/checkout/components/CheckoutSection.jsx257
-rw-r--r--src/lib/checkout/email/FinishCheckoutEmail.jsx371
4 files changed, 506 insertions, 222 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 85eda80b..0090acee 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -1,36 +1,36 @@
-import Alert from '@/core/components/elements/Alert/Alert';
-import Divider from '@/core/components/elements/Divider/Divider';
-import Link from '@/core/components/elements/Link/Link';
-import useAuth from '@/core/hooks/useAuth';
-import { getItemAddress } from '@/core/utils/address';
-import addressesApi from '@/lib/address/api/addressesApi';
+import { Skeleton, Spinner } from '@chakra-ui/react';
import {
BanknotesIcon,
ChevronLeftIcon,
ClockIcon,
ExclamationCircleIcon,
} from '@heroicons/react/24/outline';
+import axios from 'axios';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useRouter } from 'next/router';
import React, { useEffect, useMemo, useRef, useState } from 'react';
-import _ from 'lodash';
-import { deleteItemCart } from '@/core/utils/cart';
-import currencyFormat from '@/core/utils/currencyFormat';
import { toast } from 'react-hot-toast';
-import getFileBase64 from '@/core/utils/getFileBase64';
-import { useRouter } from 'next/router';
-import axios from 'axios';
+import { useQuery } from 'react-query';
+import snakecaseKeys from 'snakecase-keys';
+
+import Alert from '@/core/components/elements/Alert/Alert';
+import Divider from '@/core/components/elements/Divider/Divider';
import Image from '@/core/components/elements/Image/Image';
-import MobileView from '@/core/components/views/MobileView';
-import DesktopView from '@/core/components/views/DesktopView';
-import ExpedisiList from '../api/ExpedisiList';
-import whatsappUrl from '@/core/utils/whatsappUrl';
+import Link from '@/core/components/elements/Link/Link';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
-import { useQuery } from 'react-query';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
+import useAuth from '@/core/hooks/useAuth';
+import { getItemAddress } from '@/core/utils/address';
+import { deleteItemCart } from '@/core/utils/cart';
+import currencyFormat from '@/core/utils/currencyFormat';
+import getFileBase64 from '@/core/utils/getFileBase64';
import { gtagPurchase } from '@/core/utils/googleTag';
-import { findVoucher, getVoucher } from '../api/getVoucher';
-import { Spinner } from '@chakra-ui/react';
-import { AnimatePresence, motion } from 'framer-motion';
-import snakecaseKeys from 'snakecase-keys';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import addressesApi from '@/lib/address/api/addressesApi';
import CartItem from '~/modules/cart/components/Item.tsx';
+import ExpedisiList from '../api/ExpedisiList';
+import { findVoucher, getVoucher } from '../api/getVoucher';
const SELF_PICKUP_ID = 32;
@@ -111,6 +111,7 @@ const Checkout = () => {
const [checkoutValidation, setCheckoutValidation] = useState(false);
const [loadingVoucher, setLoadingVoucher] = useState(true);
const [loadingRajaOngkir, setLoadingRajaOngkir] = useState(false);
+ const [grandTotal, setGrandTotal] = useState(0);
const expedisiValidation = useRef(null);
@@ -295,6 +296,14 @@ const Checkout = () => {
const [isLoading, setIsLoading] = useState(false);
+ useEffect(() => {
+ const GT =
+ cartCheckout?.grandTotal +
+ Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000;
+ const finalGT = GT < 0 ? 0 : GT;
+ setGrandTotal(finalGT);
+ }, [biayaKirim, cartCheckout?.grandTotal, activeVoucher]);
+
const checkout = async () => {
const file = poFile.current.files[0];
if (typeof file !== 'undefined' && file.size > 5000000) {
@@ -352,11 +361,20 @@ const Checkout = () => {
const midtrans = async () => {
for (const product of products) deleteItemCart({ productId: product.id });
- const payment = await axios.post(
- `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
- );
- setIsLoading(false);
- window.location.href = payment.data.redirectUrl;
+ if (grandTotal > 0) {
+ const payment = await axios.post(
+ `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
+ );
+ setIsLoading(false);
+ window.location.href = payment.data.redirectUrl;
+ } else {
+ window.location.href = `${
+ process.env.NEXT_PUBLIC_SELF_HOST
+ }/shop/checkout/success?order_id=${isCheckouted.name.replace(
+ /\//g,
+ '-'
+ )}`;
+ }
};
gtag('event', 'conversion', {
@@ -773,7 +791,10 @@ const Checkout = () => {
<PickupAddress label='Alamat Pickup' />
)}
{selectedCarrierId != SELF_PICKUP_ID && (
- <>
+ <Skeleton
+ isLoaded={!!selectedAddress.invoicing && !!selectedAddress.shipping}
+ minHeight={320}
+ >
<SectionAddress
address={selectedAddress.shipping}
label='Alamat Pengiriman'
@@ -785,7 +806,7 @@ const Checkout = () => {
label='Alamat Penagihan'
url='/my/address?select=invoice'
/>
- </>
+ </Skeleton>
)}
<Divider />
<SectionValidation address={selectedAddress.invoicing} />
@@ -910,10 +931,7 @@ const Checkout = () => {
<div className='flex gap-x-2 justify-between mb-4'>
<div>Grand Total</div>
<div className='font-semibold text-gray_r-12'>
- {currencyFormat(
- cartCheckout?.grandTotal +
- Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
- )}
+ {currencyFormat(grandTotal)}
</div>
</div>
)}
@@ -1056,7 +1074,12 @@ const Checkout = () => {
<PickupAddress label='Alamat Pickup' />
)}
{selectedCarrierId != SELF_PICKUP_ID && (
- <>
+ <Skeleton
+ isLoaded={
+ !!selectedAddress.invoicing && !!selectedAddress.shipping
+ }
+ minHeight={290}
+ >
<SectionAddress
address={selectedAddress.shipping}
label='Alamat Pengiriman'
@@ -1068,7 +1091,7 @@ const Checkout = () => {
label='Alamat Penagihan'
url='/my/address?select=invoice'
/>
- </>
+ </Skeleton>
)}
<Divider />
<SectionValidation address={selectedAddress.invoicing} />
@@ -1200,10 +1223,7 @@ const Checkout = () => {
<div className='flex gap-x-2 justify-between mb-4'>
<div>Grand Total</div>
<div className='font-semibold text-gray_r-12'>
- {currencyFormat(
- cartCheckout?.grandTotal +
- Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
- )}
+ {currencyFormat(grandTotal)}
</div>
</div>
)}
@@ -1434,7 +1454,7 @@ const SectionExpedisi = ({
dengan menghubungi admin melalui{' '}
<a
className='text-danger-500 inline'
- href='https://api.whatsapp.com/send?phone=628128080622'
+ href='https://api.whatsapp.com/send?phone=6281717181922'
>
tautan ini
</a>
diff --git a/src/lib/checkout/components/CheckoutOld.jsx b/src/lib/checkout/components/CheckoutOld.jsx
index d57fbd66..e2c45ce6 100644
--- a/src/lib/checkout/components/CheckoutOld.jsx
+++ b/src/lib/checkout/components/CheckoutOld.jsx
@@ -696,7 +696,7 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig
diatur beratnya. Mohon atur berat barang dengan menghubungi admin melalui{' '}
<a
className='text-danger-500 inline'
- href='https://api.whatsapp.com/send?phone=628128080622'
+ href='https://api.whatsapp.com/send?phone=6281717181922'
>
tautan ini
</a>
diff --git a/src/lib/checkout/components/CheckoutSection.jsx b/src/lib/checkout/components/CheckoutSection.jsx
new file mode 100644
index 00000000..affe6138
--- /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=6281717181922'
+ >
+ 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
diff --git a/src/lib/checkout/email/FinishCheckoutEmail.jsx b/src/lib/checkout/email/FinishCheckoutEmail.jsx
index d40ce7d4..d19ba1ca 100644
--- a/src/lib/checkout/email/FinishCheckoutEmail.jsx
+++ b/src/lib/checkout/email/FinishCheckoutEmail.jsx
@@ -14,8 +14,10 @@ import {
Section,
Text
} from '@react-email/components'
+import FinishCheckout from '../components/FinishCheckout'
const FinishCheckoutEmail = ({ transaction, payment, statusPayment }) => {
+
return (
<Html>
<Head />
@@ -38,7 +40,10 @@ const FinishCheckoutEmail = ({ transaction, payment, statusPayment }) => {
</Heading>
<Text style={style.text}>Hai {transaction.address.customer.name},</Text>
- <Text style={style.text}>
+
+ {transaction.amountTotal > 0 ?
+ <div>
+ <Text style={style.text}>
{statusPayment == 'success' && (
<>
Terima kasih atas kepercayaan anda berbelanja di Indoteknik. Dengan ini kami
@@ -71,202 +76,204 @@ const FinishCheckoutEmail = ({ transaction, payment, statusPayment }) => {
& Solution
</>
)}
- </Text>
- <Text style={style.text}>
- {['pending', 'failed'].includes(statusPayment) && (
- <>
- Jika anda mengalami kesulitan, dapat menghubungi Customer Service kami untuk
- menanyakan transaksi anda lakukan melalui Whatsapp kami.
- </>
- )}
- {statusPayment == 'success' && (
- <>
- Anda dapat menghubungi Customer Service kami untuk menanyakan status pesanan yang
- sudah berhasil anda lakukan melalui Whatsapp kami.
- </>
- )}
- {statusPayment == 'manual' && (
+ </Text>
+ <Text style={style.text}>
+ {['pending', 'failed'].includes(statusPayment) && (
+ <>
+ Jika anda mengalami kesulitan, dapat menghubungi Customer Service kami untuk
+ menanyakan transaksi anda lakukan melalui Whatsapp kami.
+ </>
+ )}
+ {statusPayment == 'success' && (
+ <>
+ Anda dapat menghubungi Customer Service kami untuk menanyakan status pesanan yang
+ sudah berhasil anda lakukan melalui Whatsapp kami.
+ </>
+ )}
+ {statusPayment == 'manual' && (
+ <>
+ Kami mohon kepada {transaction.address.customer.name} untuk dapat segera
+ menyelesaikan transaksi dengan detail dibawah ini:
+ <ul>
+ <li>Nomor Pembelian: {transaction.name}</li>
+ <li>Nominal: {currencyFormat(transaction.amountTotal)}</li>
+ <li>Tanggal: {transaction.dateOrder}</li>
+ </ul>
+ </>
+ )}
+ </Text>
+
+ {['pending', 'failed', 'success'].includes(statusPayment) && (
<>
- Kami mohon kepada {transaction.address.customer.name} untuk dapat segera
- menyelesaikan transaksi dengan detail dibawah ini:
- <ul>
- <li>Nomor Pembelian: {transaction.name}</li>
- <li>Nominal: {currencyFormat(transaction.amountTotal)}</li>
- <li>Tanggal: {transaction.dateOrder}</li>
- </ul>
- </>
- )}
- </Text>
+ <Text style={{ ...style.text, lineHeight: '100%', marginTop: '24px' }}>
+ <strong>Detail Transaksi</strong>
+ </Text>
+
+ <Hr style={style.hr} />
- {['pending', 'failed', 'success'].includes(statusPayment) && (
- <>
- <Text style={{ ...style.text, lineHeight: '100%', marginTop: '24px' }}>
- <strong>Detail Transaksi</strong>
- </Text>
+ <Section style={style.alert}>
+ {statusPayment == 'success' &&
+ 'Struk ini dapat anda simpan sebagai bukti tambahan dalam transaksi yang telah dilakukan.'}
+ {statusPayment == 'pending' &&
+ 'Kami akan menginformasikan melalui email setelah anda berhasil melakukan pembayaran.'}
+ {statusPayment == 'failed' &&
+ 'Dimohon untuk tidak melakukan pembayaran. Karena transaksi anda tidak berhasil dibuat.'}
+ </Section>
- <Hr style={style.hr} />
+ <Row style={style.descriptionRow}>
+ <Column style={style.descriptionLCol}>No Transaksi (SO)</Column>
+ <Column style={style.descriptionRCol}>{transaction.name}</Column>
+ </Row>
+ <Row style={style.descriptionRow}>
+ <Column style={style.descriptionLCol}>Tanggal Transaksi</Column>
+ <Column style={style.descriptionRCol}>{payment.transactionTime}</Column>
+ </Row>
+ <Row style={style.descriptionRow}>
+ <Column style={style.descriptionLCol}>Status Pembayaran</Column>
+ <Column style={{ ...style.descriptionRCol }}>
+ {statusPayment == 'success' && (
+ <div style={{ ...style.badge, ...style.badgeGreen }}>Berhasil</div>
+ )}
+ {statusPayment == 'pending' && (
+ <div style={{ ...style.badge, ...style.badgeRed }}>Pending</div>
+ )}
+ {statusPayment == 'failed' && (
+ <div style={{ ...style.badge, ...style.badgeRed }}>Tidak Berhasil</div>
+ )}
+ </Column>
+ </Row>
+ <Row style={style.descriptionRow}>
+ <Column style={style.descriptionLCol}>Metode Pembayaran</Column>
+ <Column style={style.descriptionRCol}>
+ {toTitleCase(payment.paymentType.replaceAll('_', ' '))}
+ </Column>
+ </Row>
+ <Row style={style.descriptionRow}>
+ <Column style={style.descriptionLCol}>Batas Akhir Pembayaran</Column>
+ <Column style={style.descriptionRCol}>{payment.expiryTime}</Column>
+ </Row>
+ <Row style={style.descriptionRow}>
+ <Column style={style.descriptionLCol}>Nominal Transfer</Column>
+ <Column style={style.descriptionRCol}>
+ <span style={{ fontWeight: '600' }}>{currencyFormat(payment.grossAmount)}</span>
+ </Column>
+ </Row>
- <Section style={style.alert}>
- {statusPayment == 'success' &&
- 'Struk ini dapat anda simpan sebagai bukti tambahan dalam transaksi yang telah dilakukan.'}
- {statusPayment == 'pending' &&
- 'Kami akan menginformasikan melalui email setelah anda berhasil melakukan pembayaran.'}
- {statusPayment == 'failed' &&
- 'Dimohon untuk tidak melakukan pembayaran. Karena transaksi anda tidak berhasil dibuat.'}
- </Section>
+ <Text style={{ ...style.text, lineHeight: '100%', marginTop: '24px' }}>
+ <strong>Detail Produk</strong>
+ </Text>
- <Row style={style.descriptionRow}>
- <Column style={style.descriptionLCol}>No Transaksi (SO)</Column>
- <Column style={style.descriptionRCol}>{transaction.name}</Column>
- </Row>
- <Row style={style.descriptionRow}>
- <Column style={style.descriptionLCol}>Tanggal Transaksi</Column>
- <Column style={style.descriptionRCol}>{payment.transactionTime}</Column>
- </Row>
- <Row style={style.descriptionRow}>
- <Column style={style.descriptionLCol}>Status Pembayaran</Column>
- <Column style={{ ...style.descriptionRCol }}>
- {statusPayment == 'success' && (
- <div style={{ ...style.badge, ...style.badgeGreen }}>Berhasil</div>
- )}
- {statusPayment == 'pending' && (
- <div style={{ ...style.badge, ...style.badgeRed }}>Pending</div>
- )}
- {statusPayment == 'failed' && (
- <div style={{ ...style.badge, ...style.badgeRed }}>Tidak Berhasil</div>
- )}
- </Column>
- </Row>
- <Row style={style.descriptionRow}>
- <Column style={style.descriptionLCol}>Metode Pembayaran</Column>
- <Column style={style.descriptionRCol}>
- {toTitleCase(payment.paymentType.replaceAll('_', ' '))}
- </Column>
- </Row>
- <Row style={style.descriptionRow}>
- <Column style={style.descriptionLCol}>Batas Akhir Pembayaran</Column>
- <Column style={style.descriptionRCol}>{payment.expiryTime}</Column>
- </Row>
- <Row style={style.descriptionRow}>
- <Column style={style.descriptionLCol}>Nominal Transfer</Column>
- <Column style={style.descriptionRCol}>
- <span style={{ fontWeight: '600' }}>{currencyFormat(payment.grossAmount)}</span>
- </Column>
- </Row>
+ <Hr style={style.hr} />
- <Text style={{ ...style.text, lineHeight: '100%', marginTop: '24px' }}>
- <strong>Detail Produk</strong>
- </Text>
+ {transaction.products.map((product) => (
+ <Row style={style.productRow} key={product.id}>
+ <Column style={style.productLCol}>
+ <Img src={product.parent.image} width='100%' />
+ </Column>
+ <Column style={style.productRCol}>
+ <Text style={style.productName}>{product.name}</Text>
+ <Text style={style.productCode}>{product.code}</Text>
+ <div style={{ dislay: 'flex' }}>
+ <span style={style.productPriceA}>
+ {currencyFormat(product.price.priceDiscount)}
+ </span>
+ {product.price.discountPercentage > 0 && (
+ <>
+ &nbsp;
+ <span style={style.productPriceB}>
+ {currencyFormat(product.price.price)}
+ </span>
+ </>
+ )}
+ &nbsp; x {product.quantity} barang
+ </div>
+ </Column>
+ </Row>
+ ))}
- <Hr style={style.hr} />
+ <Hr style={style.hr} />
- {transaction.products.map((product) => (
- <Row style={style.productRow} key={product.id}>
- <Column style={style.productLCol}>
- <Img src={product.parent.image} width='100%' />
+ <Row style={style.descriptionRow}>
+ <Column style={style.descriptionLCol}>Subtotal</Column>
+ <Column style={style.descriptionRCol}>
+ {currencyFormat(transaction.subtotal)}
</Column>
- <Column style={style.productRCol}>
- <Text style={style.productName}>{product.name}</Text>
- <Text style={style.productCode}>{product.code}</Text>
- <div style={{ dislay: 'flex' }}>
- <span style={style.productPriceA}>
- {currencyFormat(product.price.priceDiscount)}
- </span>
- {product.price.discountPercentage > 0 && (
- <>
- &nbsp;
- <span style={style.productPriceB}>
- {currencyFormat(product.price.price)}
- </span>
- </>
- )}
- &nbsp; x {product.quantity} barang
- </div>
+ </Row>
+ <Row style={style.descriptionRow}>
+ <Column style={style.descriptionLCol}>Total Diskon</Column>
+ <Column style={{ ...style.descriptionRCol, color: '#E20613' }}>
+ {currencyFormat(transaction.discountTotal)}
+ </Column>
+ </Row>
+ <Row style={style.descriptionRow}>
+ <Column style={style.descriptionLCol}>PPN 11% (Incl.)</Column>
+ <Column style={style.descriptionRCol}>
+ {currencyFormat(transaction.subtotal * 0.11)}
</Column>
</Row>
- ))}
-
- <Hr style={style.hr} />
-
- <Row style={style.descriptionRow}>
- <Column style={style.descriptionLCol}>Subtotal</Column>
- <Column style={style.descriptionRCol}>
- {currencyFormat(transaction.subtotal)}
- </Column>
- </Row>
- <Row style={style.descriptionRow}>
- <Column style={style.descriptionLCol}>Total Diskon</Column>
- <Column style={{ ...style.descriptionRCol, color: '#E20613' }}>
- {currencyFormat(transaction.discountTotal)}
- </Column>
- </Row>
- <Row style={style.descriptionRow}>
- <Column style={style.descriptionLCol}>PPN 11% (Incl.)</Column>
- <Column style={style.descriptionRCol}>
- {currencyFormat(transaction.subtotal * 0.11)}
- </Column>
- </Row>
-
- <Hr style={style.hr} />
- <Row style={style.descriptionRow}>
- <Column style={style.descriptionLCol}>Grand Total</Column>
- <Column style={style.descriptionRCol}>
- <span style={{ fontWeight: '600' }}>
- {currencyFormat(transaction.amountTotal)}
- </span>
- </Column>
- </Row>
+ <Hr style={style.hr} />
- <Hr style={style.hr} />
- </>
- )}
+ <Row style={style.descriptionRow}>
+ <Column style={style.descriptionLCol}>Grand Total</Column>
+ <Column style={style.descriptionRCol}>
+ <span style={{ fontWeight: '600' }}>
+ {transaction.amountTotal > 0 ? currencyFormat(transaction.amountTotal) : '0'}
+ </span>
+ </Column>
+ </Row>
- {statusPayment == 'manual' && (
- <>
- <Text style={style.text}>
- Dengan cara dibawah ini:
- <ul>
- <li>
- Lakukan pembayaran manual via mobile app perbankan{' '}
- {transaction.address.customer.name}
- <br />
- Nama Bank: Bank Central Asia (BCA)
- <br />
- No. Rek: 8870400081
- <br />
- A/N: INDOTEKNIK DOTCOM GEMILANG PT
- </li>
- <li>
- Setelah berhasil melakukan pembayaran, mohon agar melakukan Screen Capture bukti
- bayar sebagai bukti untuk kami bahwa {transaction.address.customer.name} telah
- melakukan transaksi pembayaran
- </li>
- <li>
- Kirimkan bukti transaksi pembayaran anda dengan melakukan reply / balas email
- ini dengan melampirkan bukti di attachment / lampiran
- </li>
- <li>
- Transaksi {transaction.address.customer.name} akan segera diproses oleh salah
- satu Account Representative Indoteknik
- </li>
- </ul>
- </Text>
- <Text style={style.text}>
- Jika ada pertanyaan seputar teknis pembayaran {transaction.address.customer.name}{' '}
- dapat hubungi kami melalui Email{' '}
- <a href='mailto:sales@indoteknik.com'>(sales@indoteknik.com)</a> atau Whatsapp{' '}
- <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
- (+62 812-8080-622)
- </a>
- .
- </Text>
- <Text style={style.text}>
- Terima kasih atas perhatiannya, selamat kembali beraktifitas
- </Text>
- </>
- )}
+ <Hr style={style.hr} />
+ </>
+ )}
+ {statusPayment == 'manual' && (
+ <>
+ <Text style={style.text}>
+ Dengan cara dibawah ini:
+ <ul>
+ <li>
+ Lakukan pembayaran manual via mobile app perbankan{' '}
+ {transaction.address.customer.name}
+ <br />
+ Nama Bank: Bank Central Asia (BCA)
+ <br />
+ No. Rek: 8870400081
+ <br />
+ A/N: INDOTEKNIK DOTCOM GEMILANG PT
+ </li>
+ <li>
+ Setelah berhasil melakukan pembayaran, mohon agar melakukan Screen Capture bukti
+ bayar sebagai bukti untuk kami bahwa {transaction.address.customer.name} telah
+ melakukan transaksi pembayaran
+ </li>
+ <li>
+ Kirimkan bukti transaksi pembayaran anda dengan melakukan reply / balas email
+ ini dengan melampirkan bukti di attachment / lampiran
+ </li>
+ <li>
+ Transaksi {transaction.address.customer.name} akan segera diproses oleh salah
+ satu Account Representative Indoteknik
+ </li>
+ </ul>
+ </Text>
+ <Text style={style.text}>
+ Jika ada pertanyaan seputar teknis pembayaran {transaction.address.customer.name}{' '}
+ dapat hubungi kami melalui Email{' '}
+ <a href='mailto:sales@indoteknik.com'>(sales@indoteknik.com)</a> atau Whatsapp{' '}
+ <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
+ (+62 812-8080-622)
+ </a>
+ .
+ </Text>
+ <Text style={style.text}>
+ Terima kasih atas perhatiannya, selamat kembali beraktifitas
+ </Text>
+ </>
+ )}
+ </div>
+ : <FinishCheckout query={{order_id:transaction.name}}/>
+ }
<Text style={{ ...style.text, margin: '12px 0 3px' }}>Best regards,</Text>
<Text style={{ ...style.text, margin: '3px 0 0' }}>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 00:28:11 +0000