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 (
{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