From 4245e5f8128261cfac6685dfecdb2a4d96504f7a Mon Sep 17 00:00:00 2001
From: Matthias Luger <malua007@live.de>
Date: Sun, 7 Jul 2024 22:51:44 +0200
Subject: [PATCH] add more premim options change premium type styling

---
 components/Premium/BuyPremium/BuyPremium.module.css |  3 +++
 components/Premium/BuyPremium/BuyPremium.tsx        | 12 ++++++++++++
 utils/PremiumTypeUtils.tsx                          |  4 ++++
 3 files changed, 19 insertions(+)

diff --git a/components/Premium/BuyPremium/BuyPremium.module.css b/components/Premium/BuyPremium/BuyPremium.module.css
index 942581ea..4a16fb58 100644
--- a/components/Premium/BuyPremium/BuyPremium.module.css
+++ b/components/Premium/BuyPremium/BuyPremium.module.css
@@ -59,10 +59,13 @@
 .purchaseCard :global(:not(.btn-check:checked)) + .priceRangeButton{
     background-color: #2a3644;
     border-color: #2a3644;
+    filter: grayscale(70%);
+    font-weight: bold;
     color: lightgray;
 }
 
 /** Show the selected price option more clearly as selected **/
 .purchaseCard :global(.btn-check:checked) + .priceRangeButton{
     border-color: white;
+    font-weight: bold;
 }
\ No newline at end of file
diff --git a/components/Premium/BuyPremium/BuyPremium.tsx b/components/Premium/BuyPremium/BuyPremium.tsx
index 1d3e1668..ad9218d1 100644
--- a/components/Premium/BuyPremium/BuyPremium.tsx
+++ b/components/Premium/BuyPremium/BuyPremium.tsx
@@ -71,6 +71,17 @@ function BuyPremium(props: Props) {
         return durationString
     }
 
+    function getPremiumToggleButtonStyle(premiumType: PremiumType) {
+        switch (premiumType.productId) {
+            case 'premium':
+                return { color: '#32de84' }
+            case 'premium_plus':
+                return { color: '#ffaa00' }
+            default:
+                return {}
+        }
+    }
+
     return (
         <>
             <Card className={styles.purchaseCard}>
@@ -97,6 +108,7 @@ function BuyPremium(props: Props) {
                                             className={styles.priceRangeButton}
                                             size="lg"
                                             variant="primary"
+                                            style={getPremiumToggleButtonStyle(premiumType)}
                                         >
                                             {premiumType.label}
                                         </ToggleButton>
diff --git a/utils/PremiumTypeUtils.tsx b/utils/PremiumTypeUtils.tsx
index f8cb9a95..db38b199 100644
--- a/utils/PremiumTypeUtils.tsx
+++ b/utils/PremiumTypeUtils.tsx
@@ -19,6 +19,10 @@ export const PREMIUM_TYPES: PremiumType[] = [
         priority: PREMIUM_RANK.PREMIUM_PLUS,
         options: [
             { value: 1, label: '1 week', productId: 'premium_plus', price: 1800 },
+            { value: 3, label: '3 weeks', productId: 'premium_plus', price: 1800 },
+            { value: 4, label: '4 weeks', productId: 'premium_plus', price: 1800 },
+            { value: 6, label: '6 weeks', productId: 'premium_plus', price: 1800 },
+            { value: 12, label: '12 weeks', productId: 'premium_plus', price: 1800 },
             { value: 1, label: '1 hour', productId: 'premium_plus-hour', price: 200 },
             { value: 1, label: '1 day', productId: 'premium_plus-day', price: 600 }
         ]