kediritechnopark/groovee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
zadit
2025-02-02 18:17:56 +07:00
parent b0813e1519
commit 02e101025e
13 changed files with 216 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Coupon.js
View File

@@ -3,7 +3,7 @@ import './Coupon.css'; // Import a CSS file for styling
const Coupon = ({ code, value, period, type, expiration }) => {
// Format the value based on type
const formattedValue = type == 'fixed' ? `Diskon Rp${value}` : value != 0 ? `Diskon${value}%` : 'kupon berlangganan';
const formattedValue = type == 'fixed' ? `Diskon Rp${value}` : value != 0 ? `Diskon${value}%` : 'Voucher berlangganan';
// Function to convert expiration to Indonesian date format (dd MMMM yyyy)
const formatExpirationDate = (dateString) => {
@@ -42,27 +42,31 @@ const Coupon = ({ code, value, period, type, expiration }) => {
return (
<div className='coupon'>
{(expiration == null && code != null) || (expiration != null && code != null && daysLeft < 1) && (
<div className='RibbonBannerInverted'>
<img src={"https://i.imgur.com/yt6osgL.png"}></img>
<h1>Kupon berakhir</h1>
</div>
<div className='RibbonBannerInverted'>
<img src={"https://i.imgur.com/yt6osgL.png"}></img>
<h1>Voucher berakhir</h1>
</div>
)}
<div className='coupon-left'>
<div className='coupon-code'>{code == null ? '404' : code}</div>
{/* <div className='dotted-line'></div> */}
</div>
<div className='coupon-right'>
<h2 className='coupon-value'>{code == null ? 'Kupon tidak ditemukan' : formattedValue}</h2>
<h2 className='coupon-value'>{code == null ? 'Voucher tidak ditemukan' : formattedValue}</h2>
{type && <span className='coupon-type'>{type}</span>} {/* Display type if provided */}
<p className='coupon-period'>
{code == null ? '-' : value === 0 ? `Masa berlangganan ${period} minggu` : `Masa kupon ${period} minggu`}
{code == null ? '-' : value === 0 ? `Masa berlangganan ${period} minggu` : `Masa Voucher ${period} minggu`}
</p>
<p className='coupon-expiration'>
{expiration == null ? (code == null ? '-' : 'Tanpa kadaluarsa') :
daysLeft <= 7
? `Berlaku hingga ${daysLeft} hari lagi`
: `Berlaku hingga: ${formatExpirationDate(expiration)}`}
{expiration == null
? (code == null ? '-' : 'Tanpa kadaluarsa')
: daysLeft < 0
? `Berakhir ${Math.abs(daysLeft)} hari lalu`
: daysLeft <= 7
? `Berlaku hingga ${daysLeft} hari lagi`
: `Berlaku hingga: ${formatExpirationDate(expiration)}`}
</p>
</div>
</div>
);