ok

src/pages/CreateCoupon.js

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
+import styles from './Join.module.css';
+import Coupon from '../components/Coupon';
 
+import CryptoJS from 'crypto-js';
 import {createCoupon} from "../helpers/couponHelpers.js"
 
 function getAuthToken() {
@@ -9,57 +12,134 @@ const CreateCouponPage = () => {
   const [discountType, setDiscountType] = useState("percentage");
   const [discountValue, setDiscountValue] = useState("");
   const [discountPeriods, setDiscountPeriods] = useState("");
-  const [message, setMessage] = useState("");
+  const [couponDetails, setCouponDetails] = useState(null);
 
+  
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    const [wasInputtingPassword, setWasInputtingPassword] = useState(false);
+    const [inputtingPassword, setInputtingPassword] = useState(false);
+    const [username, setUsername] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [retypePassword, setRetypePassword] = useState('');
+    const [codeExpectation, setCodeExpectation] = useState('');
+    const [couponUrl, setCouponUrl] = useState('');
+  
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    setLoading(true);
     
     // Call the helper function to create the coupon
-    const result = await createCoupon(discountType, discountValue, discountPeriods);
+    const result = await createCoupon(discountType, discountValue, discountPeriods, codeExpectation);
     
     if (result.success) {
-      setMessage(`Coupon created successfully: ${result.couponCode}`);
+      setCouponDetails(result.coupon);
+      const secretKey = 'xixixi666'; // Your AES-256 key (32 characters)
+
+      // Encrypt couponCode inline
+      const encryptedCouponCode = CryptoJS.AES.encrypt(result.coupon.code, secretKey).toString();
+      setCouponUrl(encryptedCouponCode)
+      console.log(encryptedCouponCode)
+      setLoading(false);
     } else {
-      setMessage(result.message);
+      setLoading(false);
     }
   };
 
   return (
-    <div>
-      <h1>Create Coupon</h1>
-      <form onSubmit={handleSubmit}>
-        <div>
-          <label>Discount Type:</label>
-          <select
-            value={discountType}
-            onChange={(e) => setDiscountType(e.target.value)}
-          >
-            <option value="percentage">Percentage</option>
-            <option value="fixed">Fixed</option>
-          </select>
+    <div className={styles.linktreePage}>
+      <div className={styles.dashboardContainer}>
+        <div className={styles.mainHeading}>Buat Voucher {couponDetails != null && 'Berhasil'}</div>
+        <div className={styles.subHeadingTransparent}>
+          Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
         </div>
-        <div>
-          <label>Discount Value:</label>
-          <input
-            type="number"
-            value={discountValue}
-            onChange={(e) => setDiscountValue(e.target.value)}
-            required
-          />
-        </div>
-        <div>
-          <label>Discount Periods (in weeks):</label>
-          <input
-            type="number"
-            value={discountPeriods}
-            onChange={(e) => setDiscountPeriods(e.target.value)}
-            required
-          />
-        </div>
-        <button type="submit">Create Coupon</button>
-      </form>
-      {message && <p>{message}</p>}
+
+        {couponDetails != null ?
+        <>
+        <Coupon
+                code={couponDetails?.code || null}
+                value={couponDetails?.discountValue}
+                period={couponDetails?.discountPeriods}
+                type={couponDetails?.type}
+                expiration={couponDetails?.expirationDate}
+              />
+              <button 
+  onClick={() => {
+    navigator.clipboard.writeText('https://dev.coupon.kedaimaster.com/coupon?c=' + couponUrl)
+      .then(() => {
+        // Optional: Show a message that the text has been copied
+        alert("Coupon URL copied to clipboard!");
+      })
+      .catch((err) => {
+        console.error("Failed to copy text: ", err);
+      });
+  }} 
+  className={styles.claimButton}
+  style={{marginBottom: '10px'}}
+>
+  <span>Salin URL VOUCHER</span>
+</button></>
+
+              :
+              <div className={styles.LoginForm}>
+                <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
+                  <label htmlFor="username" className={styles.usernameLabel}>---- Daftar -------------------------------</label>
+                  <select
+                    className={!error ? styles.usernameInput : styles.usernameInputError}
+                    value={discountType}
+                    onChange={(e) => setDiscountType(e.target.value)}
+                  >
+                    <option value="percentage">Percentage</option>
+                    <option value="fixed">Fixed</option>
+                  </select>
+      
+                  <input
+                    type="number"
+                    placeholder="Nilai voucher"
+                    value={discountValue}
+                    onChange={(e) => setDiscountValue(e.target.value)}
+                    className={!error ? styles.usernameInput : styles.usernameInputError}
+                  />
+                  <button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true); }} className={styles.claimButton}>
+                    <span>➜</span>
+                  </button>
+                </div>
+      
+                <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
+                  <span>
+                    <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
+                    <label htmlFor="password" className={styles.usernameLabel}> &nbsp; ----------------- &nbsp; </label>
+                  </span>
+      
+                    <input
+                    type="number"
+                    placeholder="Periode diskon (minggu)"
+                    value={discountPeriods}
+                    onChange={(e) => setDiscountPeriods(e.target.value)}
+                    maxLength="30"
+                    className={!error ? styles.usernameInput : styles.usernameInputError}
+                  />
+                  <input
+                    type="text"
+                    placeholder="Ekspektasi kode"
+                    value={codeExpectation}
+                    onChange={(e) => setCodeExpectation(e.target.value)}
+                    maxLength="30"
+                    className={!error ? styles.usernameInput : styles.usernameInputError}
+                  />
+                  <button
+                    onClick={handleSubmit}
+                    className={`${styles.claimButton} ${loading ? styles.loading : ''}`}
+                    disabled={loading}
+                  >
+                    <span>{loading ? 'Loading...' : 'Buat'}</span>
+                  </button>
+                </div>
+                </div>
+        }
+      </div>
     </div>
   );
 };