From 76961c8312312609dbef0646274f6dd1f6c2bf19 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 3 Mar 2023 16:44:12 +0700 Subject: add midtrans payment email notification --- src/lib/checkout/email/FinishCheckoutEmail.jsx | 326 +++++++++++++++++++++++++ 1 file changed, 326 insertions(+) create mode 100644 src/lib/checkout/email/FinishCheckoutEmail.jsx (limited to 'src/lib/checkout/email/FinishCheckoutEmail.jsx') diff --git a/src/lib/checkout/email/FinishCheckoutEmail.jsx b/src/lib/checkout/email/FinishCheckoutEmail.jsx new file mode 100644 index 00000000..950fe318 --- /dev/null +++ b/src/lib/checkout/email/FinishCheckoutEmail.jsx @@ -0,0 +1,326 @@ +import currencyFormat from '@/core/utils/currencyFormat' +import toTitleCase from '@/core/utils/toTitleCase' +import { + Body, + Column, + Container, + Head, + Heading, + Hr, + Html, + Img, + Row, + Section, + Text +} from '@react-email/components' + +const FinishCheckoutEmail = ({ transaction, payment, statusPayment }) => { + return ( + + + + +
+ Indoteknik.com +
+ + {statusPayment == 'success' && 'Terimakasih untuk pembelian anda!'} + {statusPayment == 'pending' && 'Menunggu Pembayaran'} + {statusPayment == 'failed' && 'Pembayaran Tidak Berhasil'} + + + Hai {transaction.address.customer.name}, + + {statusPayment == 'success' && ( + <> + Terima kasih atas kepercayaan anda berbelanja di Indoteknik. Dengan ini kami + informasikan transaksi yang anda lakukan sebesar{' '} + {currencyFormat(payment.grossAmount)}{' '} + sudah berhasil dilakukan. Pembelian anda akan segera kami proses dan kirim sesuai + dengan antrian pesanan yang masuk. + + )} + {statusPayment == 'pending' && ( + <> + Terima kasih atas kepercayaan anda berbelanja di Indoteknik. Dengan ini kami + informasikan transaksi yang anda lakukan sebesar{' '} + {currencyFormat(payment.grossAmount)}{' '} + belum dilakukan. Silahkan lakukan pembayaran pada hari ini sebelum stoknya + kehabisan. + + )} + {statusPayment == 'failed' && ( + <> + Terima kasih atas kepercayaan anda berbelanja di Indoteknik. Dengan ini kami + informasikan transaksi yang anda lakukan Tidak Berhasil. Mohon untuk tidak melakukan + pembayaran dikarenakan transaksi ini gagal kami terima. Segera lakukan pembelian + kembali dengan produk yang anda inginkan di website Indoteknik.com. + + )} + + + {['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. + + )} + + + + Detail Transaksi + + +
+ +
+ {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.'} +
+ + + No Transaksi (SO) + {transaction.name} + + + Tanggal Transaksi + {payment.transactionTime} + + + Status Pembayaran + + {statusPayment == 'success' && ( +
Berhasil
+ )} + {statusPayment == 'pending' && ( +
Pending
+ )} + {statusPayment == 'failed' && ( +
Tidak Berhasil
+ )} + + + + Metode Pembayaran + + {toTitleCase(payment.paymentType.replaceAll('_', ' '))} + + + + Batas Akhir Pembayaran + {payment.expiryTime} + + + Nominal Transfer + + {currencyFormat(payment.grossAmount)} + + + + + Detail Produk + + +
+ + {transaction.products.map((product) => ( + + + + + + {product.name} + {product.code} +
+ + {currencyFormat(product.price.priceDiscount)} + + {product.price.discountPercentage > 0 && ( + <> +   + {currencyFormat(product.price.price)} + + )} +   x {product.quantity} barang +
+ + + ))} + +
+ + + Subtotal + {currencyFormat(transaction.subtotal)} + + + Total Diskon + + {currencyFormat(transaction.discountTotal)} + + + + PPN 11% (Incl.) + + {currencyFormat(transaction.subtotal * 0.11)} + + + +
+ + + Grand Total + + {currencyFormat(transaction.amountTotal)} + + + +
+ + Best regards, + + + PT. Indoteknik Dotcom Gemilang +
+ Jl. Bandengan Utara 85A No. 8-9 Penjaringan. +
+ Kec. Penjaringan, Jakarta Utara - DKI Jakarta + + + + + ) +} + +const style = { + main: { + backgroundColor: '#ffffff', + margin: '0 auto', + fontFamily: + "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif" + }, + container: { + border: '1px solid #eaeaea', + borderRadius: '5px', + margin: '40px auto', + padding: '20px', + width: '465px' + }, + h1: { + color: '#000', + fontSize: '24px', + fontWeight: 'normal', + textAlign: 'center', + margin: '30px 0', + padding: '0' + }, + text: { + color: '#000', + fontSize: '14px', + lineHeight: '24px' + }, + alert: { + backgroundColor: '#FDF1C7', + border: '1px solid #F8C20A', + padding: '8px', + borderRadius: '6px', + fontSize: '14px', + margin: '16px 0' + }, + hr: { + border: 'none', + borderTop: '1px solid #eaeaea', + margin: '8px 0', + width: '100%' + }, + descriptionRow: { + width: '100%', + margin: '10px 0', + fontSize: '14px' + }, + descriptionLCol: { + width: '50%', + color: '#6B7280' + }, + descriptionRCol: { + width: '50%', + textAlign: 'right' + }, + productRow: { + width: '100%', + margin: '10px 0', + fontSize: '14px' + }, + productLCol: { + width: '25%', + border: '1px solid #eaeaea', + borderRadius: '4px', + padding: '1px' + }, + productRCol: { + width: '75%', + padding: '0 8px', + verticalAlign: 'top' + }, + productName: { + lineHeight: '121%', + margin: '0 0 8px' + }, + productCode: { + color: '#6B7280', + lineHeight: '100%', + margin: '0 0 8px', + fontSize: '14px' + }, + productPriceA: { + lineHeight: '100%', + fontSize: '14px' + }, + productPriceB: { + color: '#6B7280', + lineHeight: '100%', + fontSize: '14px', + textDecoration: 'line-through' + }, + badge: { + padding: '3px 6px', + borderRadius: '6px', + fontSize: '14px', + width: 'fit-content', + marginLeft: 'auto' + }, + badgeRed: { + color: '#E20613', + backgroundColor: '#FCE2E4', + border: '1px solid #E20613' + }, + badgeGreen: { + color: '#16A34A', + backgroundColor: '#E7F4E9', + border: '1px solid #16A34A' + } +} + +export default FinishCheckoutEmail -- cgit v1.2.3