From c09f8952601ea2337f5aa8bdd99e51f34bc7e02e Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Fri, 19 Jan 2024 19:47:55 +0300
Subject: [PATCH] added text about promocode-status in payments-modal,
 promocode-input

---
 .../css/ComponentsStyles/payments-modal.css   | 26 +++++++++++++++++--
 luckydiamond/src/components/PaymentsModal.vue | 14 +++++++++-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css b/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
index 8e31bea..9b7e9ed 100644
--- a/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
@@ -205,8 +205,30 @@ input[type="checkbox"]:checked::before {
 
 .error-checkbox h2 {
     font-size: 13px;
-    font-weight: 400;
-    color: #c52f2f;
+    font-weight: 700;
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+}
+
+.error-promocode {
+    position: absolute;
+    left: 49%;
+    top: 35%;
+}
+
+.error-promocode .error-text__promocode {
+    font-size: 11px;
+    font-weight: 700;
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+    margin-left: 55px;
+}
+
+.error-promocode .correct-text__promocode {
+    font-size: 11px;
+    font-weight: 700;
+    color: #3BA44C;
+    font-family: "Montserrat Alternates";
 }
 
 .checkbox-styles input:disabled:hover {
diff --git a/luckydiamond/src/components/PaymentsModal.vue b/luckydiamond/src/components/PaymentsModal.vue
index 6c44cec..7b008ed 100644
--- a/luckydiamond/src/components/PaymentsModal.vue
+++ b/luckydiamond/src/components/PaymentsModal.vue
@@ -29,9 +29,13 @@
             </li>
           </ul>
         </div>
+        <div v-if="showPromocodeStatus" class="error-promocode">
+          <h2 v-if="errorPromocode" class="error-text__promocode">Промокод не найден</h2>
+          <h2 v-else class="correct-text__promocode">Промокод успешно применён</h2>
+        </div>
         <div class="deposit-promocode deposit-promocode__padding--input">
           <h3>Промокод</h3>
-          <input class="promo-input" type="text" />
+          <input @focusout="checkValidationPromocode" v-model="promocode" class="promo-input" type="text" />
         </div>
         <div class="deposit-checkbox checkbox-styles">
           <input @click="agreeUser = !agreeUser" type="checkbox" />
@@ -108,6 +112,10 @@ export default {
       amountWithdraw: 1,
       amountSave: 1,
       card: '',
+      promocode: '',
+      promocodeBase: ['ANTI-GRIF'],
+      errorPromocode: false,
+      showPromocodeStatus: false,
       errorAgree: false,
       captchaToken: null,
       clickedBtn: "",
@@ -179,6 +187,10 @@ export default {
     closeModal() {
       return this.$emit("closemodal");
     },
+    checkValidationPromocode() {
+      this.errorPromocode = !this.promocodeBase.includes(this.promocode);
+      this.showPromocodeStatus = true
+    },
     completeValidationCheck() {
       this.offBtn = true