ok

src/components/Coupon.css

@@ -0,0 +1,56 @@
+/* Coupon container */
+.coupon {
+    display: flex;
+    border: 2px solid #ccc;
+    height: 50%;
+    background-color: #f8f8f8;
+    border-radius: 8px;
+    font-family: Arial, sans-serif;
+    align-items: center;
+  }
+  
+  /* Left side (with the rotated code and dotted line) */
+  .coupon-left {
+    width: 80px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-right: 2px dotted #ccc;
+    height: 100%;
+  }
+  
+  .coupon-code {
+    writing-mode: vertical-rl;
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+    margin: 0;
+  }
+  
+  .dotted-line {
+    position: absolute;
+    left: 0;
+    bottom: 10px;
+    width: 60px;
+    border-bottom: 2px dotted #ccc;
+  }
+  
+  /* Right side (coupon details) */
+  .coupon-right {
+    padding: 10px;
+    flex-grow: 1;
+  }
+  .coupon-value {
+    font-size: clamp(18px, 3vw, 24px); /* Minimum 18px, 6vw (responsive), Maximum 24px */
+    font-weight: bold;
+    color: #2c3e50;
+    text-align: left;
+  }
+  
+  .coupon-period,
+  .coupon-expiration {
+    font-size: 14px;
+    color: #7f8c8d;
+  }
+  

src/components/Coupon.js

@@ -0,0 +1,28 @@
+import React from 'react';
+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' ? `Rp ${value}` : value != 0 ? `${value}%` : 'kupon berlangganan';
+
+    return (
+        <div className='coupon'>
+            <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>
+                {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`} {/* Fixed string concatenation */}
+                </p>
+                <p className='coupon-expiration'>
+                    {expiration == null ? (code == null ? '-' : 'Tanpa kadaluarsa') : `Berlaku sampai: ${expiration}`}
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default Coupon;

src/components/Modal.js

@@ -30,6 +30,7 @@ import { getImageUrl } from "../helpers/itemHelper.js";
 
 import CreateCoupon from "../pages/CreateCoupon";
 import CheckCoupon from "../pages/CheckCoupon";
+import CreateUserWithCoupon from "../pages/CreateUserWithCoupon";
 
 const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMoveToTransaction,welcomePageConfig }) => {
   
@@ -60,7 +61,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
       <div className={styles.modalContent} onClick={handleContentClick}>
         
       {modalContent === "edit_account" && <AccountUpdatePage user={user} />}
-        {modalContent === "join" && <Join />}
+        {modalContent === "join" && <Join setModal={setModal} />}
         {modalContent === "reset-password" && <ResetPassword />}
         {modalContent === "req_notification" && <NotificationRequest setModal={setModal} />}
         {modalContent === "blocked_notification" && <NotificationBlocked />}
@@ -103,6 +104,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
         
         {modalContent === "create_coupon" && <CreateCoupon />}
         {modalContent === "check_coupon" && <CheckCoupon />}
+        {modalContent === "create_user" && <CreateUserWithCoupon />}
       </div>
     </div>
   );