From ad768a945ec7de270a25631f53bf9697a5e4bc5e Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Mon, 28 Aug 2023 13:27:36 -0400
Subject: [PATCH] Coupon on profile

---
 .../pages/familylogin/familylogin.page.html   |   6 +-
 .../pages/familylogin/familylogin.page.scss   |  12 +-
 src/app/pages/login/login.page.scss           |   6 +-
 src/app/pages/mycoupons/mycoupons.page.html   | 332 +++++++++---------
 src/app/pages/profile/profile.page.html       |   6 +
 src/app/pages/profile/profile.page.ts         |   3 +
 src/app/pages/slider/slider.page.scss         |   1 +
 src/global.scss                               |   5 +
 8 files changed, 195 insertions(+), 176 deletions(-)

diff --git a/src/app/pages/familylogin/familylogin.page.html b/src/app/pages/familylogin/familylogin.page.html
index d61f259..77cc91c 100644
--- a/src/app/pages/familylogin/familylogin.page.html
+++ b/src/app/pages/familylogin/familylogin.page.html
@@ -1,4 +1,8 @@
 <ion-content class="ion-padding">
+  <div class="page_logo">
+    <img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
+  </div>
+
   <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/jobinterest.jpg)'">
     <div class="ion-padding">
       <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
@@ -15,7 +19,7 @@
         </ion-item>
 
         <ion-item lines="none">
-          <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
+          <ion-icon slot="start" name="pin-outline"></ion-icon>
           <ion-input type="password" placeholder="PIN" maxlength="4" [(ngModel)]='pin'></ion-input>
         </ion-item>
 
diff --git a/src/app/pages/familylogin/familylogin.page.scss b/src/app/pages/familylogin/familylogin.page.scss
index c358bff..5c8e478 100644
--- a/src/app/pages/familylogin/familylogin.page.scss
+++ b/src/app/pages/familylogin/familylogin.page.scss
@@ -1,7 +1,7 @@
 ion-content {
   .back_image {
-    width: 100%;
-    height: 200px;
+    width: auto;
+    height: 100px;
 
     .back {
       font-size: 25px;
@@ -10,10 +10,10 @@ ion-content {
   }
 
   .simp_lbl {
-    margin-top: 20px;
-    font-size: 30px;
-    letter-spacing: 1.2;
-    margin-bottom: 30px;
+    margin-top: 15px;
+    font-size: 19px;
+    letter-spacing: 1.2px;
+    margin-bottom: 15px;
     font-family: 'semi-bold';
   }
   .login-type{
diff --git a/src/app/pages/login/login.page.scss b/src/app/pages/login/login.page.scss
index 103007f..06cfe90 100644
--- a/src/app/pages/login/login.page.scss
+++ b/src/app/pages/login/login.page.scss
@@ -2,11 +2,7 @@ ion-content {
   .family_box{
     margin-bottom: 20px;
   }
-  .page_logo{
-    text-align: center;
-    margin-top: 30px;
-   // background-color: red;
-  }
+
   .simp_lbl {
     margin-top: 20px;
     font-size: 30px;
diff --git a/src/app/pages/mycoupons/mycoupons.page.html b/src/app/pages/mycoupons/mycoupons.page.html
index b56a36e..89db9b5 100644
--- a/src/app/pages/mycoupons/mycoupons.page.html
+++ b/src/app/pages/mycoupons/mycoupons.page.html
@@ -1,174 +1,178 @@
 
 <ion-content>
-  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p4.jpg)'">
-    <div class="ion-padding">
-      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
-    </div>
-  </div>
-
-  <div class="ion-padding">
-    <div class="flex">
-      <ion-label class="bold_text">Coupons</ion-label>
-<!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
-    </div>
-
-    <div class="row">
-<!--      <ion-label class="bg_text">3D Design</ion-label>-->
-<!--      <div class="rate">-->
-<!--        <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
-<!--        <ion-label class="review">4.8 (4478 reviews)</ion-label>-->
-<!--      </div>-->
-    </div>
-
-<!--    <ion-label class="color_text">$40</ion-label>-->
-
-    <div class="items">
-<!--      <div class="stud">-->
-<!--        <ion-icon slot="start" name="people" color="primary"></ion-icon>-->
-<!--        <ion-label>9876 Students</ion-label>-->
-<!--      </div>-->
-<!--      <div class="stud">-->
-<!--        <ion-icon slot="start" name="time" color="primary"></ion-icon>-->
-<!--        <ion-label>2.5 hours</ion-label>-->
-<!--      </div>-->
-<!--      <div class="stud">-->
-<!--        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
-<!--        <ion-label>Certificate</ion-label>-->
-<!--      </div>-->
-    </div>
-
-    <ion-segment [(ngModel)]="tabs">
-      <ion-segment-button value="about">
-        <ion-label>Pending</ion-label>
-      </ion-segment-button>
-      <ion-segment-button value="lesson">
-        <ion-label>History</ion-label>
-      </ion-segment-button>
-<!--      <ion-segment-button value="review">-->
-<!--        <ion-label>Reviews</ion-label>-->
-<!--      </ion-segment-button>-->
-    </ion-segment>
-
-    <div *ngIf="tabs =='about'" class="lesson">
-
-      <div class="video" *ngFor="let item of myCouponPend">
-        <div class="left">
-          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
-
-          <div class="text">
-            <ion-label class="bold_text">{{item.amount*0.01| number : '1.2-2'}} {{item.currency}} </ion-label>
-            <ion-label class="grey_text">{{item.code}} - {{item.added}}</ion-label>
-          </div>
+    <div class="boxed_contents">
+        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p4.jpg)'">
+            <div class="ion-padding">
+                <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
+            </div>
         </div>
-        <div class="right">
-          <ion-button color="secondary" (click)="startRedeem(item)">Redeem</ion-button>
-        </div>
-      </div>
 
+        <div class="ion-padding">
+            <div class="flex">
+                <ion-label class="bold_text">Coupons</ion-label>
+                <!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
+            </div>
+
+            <div class="row">
+                <!--      <ion-label class="bg_text">3D Design</ion-label>-->
+                <!--      <div class="rate">-->
+                <!--        <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
+                <!--        <ion-label class="review">4.8 (4478 reviews)</ion-label>-->
+                <!--      </div>-->
+            </div>
+
+            <!--    <ion-label class="color_text">$40</ion-label>-->
+
+            <div class="items">
+                <!--      <div class="stud">-->
+                <!--        <ion-icon slot="start" name="people" color="primary"></ion-icon>-->
+                <!--        <ion-label>9876 Students</ion-label>-->
+                <!--      </div>-->
+                <!--      <div class="stud">-->
+                <!--        <ion-icon slot="start" name="time" color="primary"></ion-icon>-->
+                <!--        <ion-label>2.5 hours</ion-label>-->
+                <!--      </div>-->
+                <!--      <div class="stud">-->
+                <!--        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
+                <!--        <ion-label>Certificate</ion-label>-->
+                <!--      </div>-->
+            </div>
+
+            <ion-segment [(ngModel)]="tabs">
+                <ion-segment-button value="about">
+                    <ion-label>Pending</ion-label>
+                </ion-segment-button>
+                <ion-segment-button value="lesson">
+                    <ion-label>History</ion-label>
+                </ion-segment-button>
+                <!--      <ion-segment-button value="review">-->
+                <!--        <ion-label>Reviews</ion-label>-->
+                <!--      </ion-segment-button>-->
+            </ion-segment>
+
+            <div *ngIf="tabs =='about'" class="lesson">
+
+                <div class="video" *ngFor="let item of myCouponPend">
+                    <div class="left">
+                        <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
+
+                        <div class="text">
+                            <ion-label class="bold_text">{{item.amount*0.01| number : '1.2-2'}} {{item.currency}} </ion-label>
+                            <ion-label class="grey_text">{{item.code}} - {{item.added}}</ion-label>
+                        </div>
+                    </div>
+                    <div class="right">
+                        <ion-button color="secondary" (click)="startRedeem(item)">Redeem</ion-button>
+                    </div>
+                </div>
+
+            </div>
+
+            <div *ngIf="tabs =='lesson'" class="lesson">
+                <!--      <div class="flex">-->
+                <!--        <ion-label class="bold">Most Popular Courses</ion-label>-->
+                <!--        <ion-label class="color">See all</ion-label>-->
+                <!--      </div>-->
+
+                <!--      <div class="sec">-->
+                <!--        <ion-label class="grey">Section 1 - Introduction</ion-label>-->
+                <!--        <ion-label class="color">15 min</ion-label>-->
+                <!--      </div>-->
+
+
+                <div class="video" *ngFor="let item of myCouponHx">
+                    <div class="left">
+                        <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
+
+                        <div class="text">
+                            <ion-label class="bold_text">{{item.amount*0.01| number : '1.2-2'}} {{item.currency}} </ion-label>
+                            <ion-label class="grey_text">{{item.code}} - {{item.added}}</ion-label>
+                        </div>
+                    </div>
+                    <div class="right">
+                        <!--          <ion-icon name="lock-closed-outline"></ion-icon>-->
+                    </div>
+                </div>
+
+                <!--      <div class="sec">-->
+                <!--        <ion-label class="grey">Section 2 - Figma Basic</ion-label>-->
+                <!--        <ion-label class="color">60 min</ion-label>-->
+                <!--      </div>-->
+
+
+            </div>
+
+            <!--    <div *ngIf="tabs =='review'" class="review_tab">-->
+            <!--      <div class="total">-->
+            <!--        <div class="star-rate">-->
+            <!--          <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
+            <!--          <ion-label class="bold">4.8 (5456 Reviews)</ion-label>-->
+            <!--        </div>-->
+            <!--        <ion-label class="color">See all</ion-label>-->
+            <!--      </div>-->
+
+            <!--      <div class="story-item">-->
+            <!--        <div class="menu">-->
+            <!--          <div class="text">-->
+            <!--            <div class="select show">-->
+            <!--              <ion-icon slot="start" name="star" color="light" class="star_icon"></ion-icon>-->
+            <!--              <ion-label class="rate_num white">All</ion-label>-->
+            <!--            </div>-->
+            <!--            <div class="select">-->
+            <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+            <!--              <ion-label class="rate_num">1</ion-label>-->
+            <!--            </div>-->
+            <!--            <div class="select">-->
+            <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+            <!--              <ion-label class="rate_num">2</ion-label>-->
+            <!--            </div>-->
+            <!--            <div class="select">-->
+            <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+            <!--              <ion-label class="rate_num">3</ion-label>-->
+            <!--            </div>-->
+            <!--            <div class="select">-->
+            <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+            <!--              <ion-label class="rate_num">4</ion-label>-->
+            <!--            </div>-->
+            <!--            <div class="select">-->
+            <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+            <!--              <ion-label class="rate_num">5</ion-label>-->
+            <!--            </div>-->
+            <!--          </div>-->
+            <!--        </div>-->
+            <!--      </div>-->
+
+            <!--      <div class="reviw_list" *ngFor="let item of [1,2,3,4,5]">-->
+            <!--        <div class="profile">-->
+            <!--          <div class="left">-->
+            <!--            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>-->
+            <!--            <div style="margin-left: 10px;">-->
+            <!--              <ion-label class="bold">Jonathon Williams</ion-label>-->
+            <!--            </div>-->
+            <!--          </div>-->
+            <!--          <div class="right">-->
+            <!--            <div class="select">-->
+            <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+            <!--              <ion-label class="rate_num">5</ion-label>-->
+            <!--            </div>-->
+            <!--            <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
+            <!--          </div>-->
+            <!--        </div>-->
+            <!--        <ion-label>The course is very good. the experience of the menter is very clear and easy to understand-->
+            <!--        </ion-label>-->
+
+            <!--        <div class="like">-->
+            <!--          <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>-->
+            <!--          <ion-label class="count">330</ion-label>-->
+            <!--          <ion-label class="time">2 Days ago</ion-label>-->
+            <!--        </div>-->
+            <!--      </div>-->
+            <!--    </div>-->
+
+        </div>
     </div>
 
-    <div *ngIf="tabs =='lesson'" class="lesson">
-<!--      <div class="flex">-->
-<!--        <ion-label class="bold">Most Popular Courses</ion-label>-->
-<!--        <ion-label class="color">See all</ion-label>-->
-<!--      </div>-->
 
-<!--      <div class="sec">-->
-<!--        <ion-label class="grey">Section 1 - Introduction</ion-label>-->
-<!--        <ion-label class="color">15 min</ion-label>-->
-<!--      </div>-->
-
-
-      <div class="video" *ngFor="let item of myCouponHx">
-        <div class="left">
-          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
-
-          <div class="text">
-            <ion-label class="bold_text">{{item.amount*0.01| number : '1.2-2'}} {{item.currency}} </ion-label>
-            <ion-label class="grey_text">{{item.code}} - {{item.added}}</ion-label>
-          </div>
-        </div>
-        <div class="right">
-<!--          <ion-icon name="lock-closed-outline"></ion-icon>-->
-        </div>
-      </div>
-
-<!--      <div class="sec">-->
-<!--        <ion-label class="grey">Section 2 - Figma Basic</ion-label>-->
-<!--        <ion-label class="color">60 min</ion-label>-->
-<!--      </div>-->
-
-
-    </div>
-
-<!--    <div *ngIf="tabs =='review'" class="review_tab">-->
-<!--      <div class="total">-->
-<!--        <div class="star-rate">-->
-<!--          <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
-<!--          <ion-label class="bold">4.8 (5456 Reviews)</ion-label>-->
-<!--        </div>-->
-<!--        <ion-label class="color">See all</ion-label>-->
-<!--      </div>-->
-
-<!--      <div class="story-item">-->
-<!--        <div class="menu">-->
-<!--          <div class="text">-->
-<!--            <div class="select show">-->
-<!--              <ion-icon slot="start" name="star" color="light" class="star_icon"></ion-icon>-->
-<!--              <ion-label class="rate_num white">All</ion-label>-->
-<!--            </div>-->
-<!--            <div class="select">-->
-<!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
-<!--              <ion-label class="rate_num">1</ion-label>-->
-<!--            </div>-->
-<!--            <div class="select">-->
-<!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
-<!--              <ion-label class="rate_num">2</ion-label>-->
-<!--            </div>-->
-<!--            <div class="select">-->
-<!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
-<!--              <ion-label class="rate_num">3</ion-label>-->
-<!--            </div>-->
-<!--            <div class="select">-->
-<!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
-<!--              <ion-label class="rate_num">4</ion-label>-->
-<!--            </div>-->
-<!--            <div class="select">-->
-<!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
-<!--              <ion-label class="rate_num">5</ion-label>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-
-<!--      <div class="reviw_list" *ngFor="let item of [1,2,3,4,5]">-->
-<!--        <div class="profile">-->
-<!--          <div class="left">-->
-<!--            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>-->
-<!--            <div style="margin-left: 10px;">-->
-<!--              <ion-label class="bold">Jonathon Williams</ion-label>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--          <div class="right">-->
-<!--            <div class="select">-->
-<!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
-<!--              <ion-label class="rate_num">5</ion-label>-->
-<!--            </div>-->
-<!--            <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        <ion-label>The course is very good. the experience of the menter is very clear and easy to understand-->
-<!--        </ion-label>-->
-
-<!--        <div class="like">-->
-<!--          <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>-->
-<!--          <ion-label class="count">330</ion-label>-->
-<!--          <ion-label class="time">2 Days ago</ion-label>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-
-  </div>
 </ion-content>
 
 <ion-footer>
diff --git a/src/app/pages/profile/profile.page.html b/src/app/pages/profile/profile.page.html
index 73c365b..4df2c3b 100644
--- a/src/app/pages/profile/profile.page.html
+++ b/src/app/pages/profile/profile.page.html
@@ -121,6 +121,12 @@
           <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
         </ion-item>
 
+        <ion-item lines="none" (click)="onRewards()">
+          <ion-icon name="people-outline"></ion-icon>
+          <ion-label>Coupons & Rewards</ion-label>
+          <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
+        </ion-item>
+
         <ion-item lines="none" (click)="onNotification()">
           <ion-icon name="notifications-outline" color="dark"></ion-icon>
           <ion-label>Notifications</ion-label>
diff --git a/src/app/pages/profile/profile.page.ts b/src/app/pages/profile/profile.page.ts
index 660a69b..5a635c6 100644
--- a/src/app/pages/profile/profile.page.ts
+++ b/src/app/pages/profile/profile.page.ts
@@ -44,6 +44,9 @@ export class ProfilePage implements OnInit {
     this.router.navigate(['notification']);
   }
 
+  onRewards(){
+    this.router.navigate(['mycoupons']);
+  }
   onLanguage() {
     this.router.navigate(['language']);
   }
diff --git a/src/app/pages/slider/slider.page.scss b/src/app/pages/slider/slider.page.scss
index fb230b1..6c3356e 100644
--- a/src/app/pages/slider/slider.page.scss
+++ b/src/app/pages/slider/slider.page.scss
@@ -25,6 +25,7 @@
       display: flex;
       justify-content: center;
       border-radius: 10px 10px 10px 10px;
+      box-shadow: inset 0 0 15px 25px white;
     }
 
     .head_lbl {
diff --git a/src/global.scss b/src/global.scss
index ff492af..8be3679 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -139,3 +139,8 @@ ion-modal.custom_modal_bottom {
   border-radius: 5px;
 }
 
+.page_logo{
+  text-align: center;
+  margin-top: 30px;
+  // background-color: red;
+}
\ No newline at end of file