dev #12401

правки страницы заполнить анкету и добавил кнопки уведомлений и pwa(состояние тестинг)

src/app/components/footer-buttons/footer-buttons.component.scss

@@ -4,6 +4,7 @@
     width: 100%;
     display: flex;
     justify-content: center;
+    z-index: 9999;
     .footer-buttons-container {
         max-width: 400px;
         width: 90vw;
@@ -11,6 +12,7 @@
             width: 100%;
             height: 34px;
             background: #09467f;
+            border: solid #fff 1px !important;
             color: #fff;
             border-radius: 5px;
             font-weight: 600;

src/app/pages/account/bonus-program/bonus-program.component.html

@@ -1,88 +1,50 @@
 <div class="woocommerce-MyAccount-content">
-    <h2>{{currentPage.name}}</h2>
+  <h2>{{ currentPage.name }}</h2>
-    <!-- <p>{{currentPage.description}}</p> -->
+  <!-- <p>{{currentPage.description}}</p> -->
-    <div style="display: flex;justify-content: center;">
+  <div style="display: flex; justify-content: center">
-        <div class="card-container">
+    <div class="card-container">
-            <div class="card-container__header">
+      <div class="card-container__header">
-                <img src="./assets/logo.svg" alt="Логотип карта">
+        <img src="./assets/logo.svg" alt="Логотип карта" />
-                <span *ngIf="accountData">#{{accountData.CardNumber}}</span>
+        <span *ngIf="accountData">#{{ accountData.CardNumber }}</span>
-            </div>
+      </div>
-            <div class="card-container__decorative-pattern">
+      <div class="card-container__decorative-pattern">
-                <!-- <div class="imgs-row"></div>
+        <!-- <div class="imgs-row"></div>
                 <div class="imgs-row" style="background-position-x: -22px;"></div>
                 <div class="imgs-row"></div> -->
-                <img src="./assets/card-decorative-pattern.svg" alt="">
+        <img src="./assets/card-decorative-pattern.svg" alt="" />
-            </div>
+      </div>
-            <div class="card-container__content">
+      <div class="card-container__content">
-                <div class="info" *ngIf="accountData">
+        <div class="info">
-                    <div class="row">
+          <div *ngIf="accountData" class="row">
-                        <span class="key">Имя</span>
+            <span class="key">Имя</span>
-                        <span class="value" *ngIf="accountData.BonusProgramName">{{accountData.BonusProgramName}}</span>
+            <span class="value" *ngIf="accountData.BonusProgramName">{{
-                        <span class="value" *ngIf="!accountData.BonusProgramName">Не задано</span>
+              accountData.BonusProgramName
-                    </div>
+            }}</span>
-                    <div class="row">
+            <span class="value" *ngIf="!accountData.BonusProgramName"
-                        <span class="key">Баланс карты</span>
+              >Не задано</span
-                        <span class="value">{{accountData.Bonuses}}</span>
+            >
-                    </div>
+          </div>
-                </div>
+          <div *ngIf="accountData" class="row">
-                <div class="card-container__barcode-container">
+            <span class="key">Баланс карты</span>
-                    <svg id="barcode"></svg>
+            <span class="value">{{ accountData.Bonuses }}</span>
-                </div>
+          </div>
-            </div>
         </div>
+        <div class="card-container__barcode-container">
+          <svg
+            id="barcode"
+            [ngClass]="{
+              hidden: loadingBonuses
+            }"
+          ></svg>
+          <p-progressSpinner
+            *ngIf="loadingBonuses"
+            [style]="{ width: '100%' }"
+            [ngStyle]="{width: '90px'}"
+            strokeWidth="2"
+            styleClass="angular-spinner"
+          ></p-progressSpinner>
+        </div>
+      </div>
     </div>
-    <!-- <div [ngClass]="{
+  </div>
-        'card-content': true,
-        'active_back': isCardBack
-    }" (click)="rotateCard()">
-        <div class="card-content__front">
-            <p-progressSpinner
-                *ngIf="loadingBonuses"
-                [style]="{ width: '100%', height: '100%' }"
-                strokeWidth="2"
-                styleClass="angular-spinner"
-            ></p-progressSpinner>
-            <div *ngIf="!loadingBonuses">
-                <div class="card-content__logo">
-                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" style="height: 100%; width: fit-content;"
-                    width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
-                    preserveAspectRatio="xMidYMid meet">
-    
-                    <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
-                    fill="#03d1be" stroke="none">
-                    <path d="M530 4151 c-55 -17 -110 -52 -144 -93 -70 -81 -66 5 -66 -1499 0
-                    -1547 -7 -1422 86 -1516 90 -91 -109 -83 2154 -83 2211 0 2056 -5 2138 66 24
-                    20 55 59 70 88 l27 51 0 1395 0 1395 -27 50 c-31 59 -67 94 -128 126 l-45 24
-                    -2020 2 c-1111 1 -2031 -2 -2045 -6z m3876 -327 c57 -27 74 -74 74 -199 l0
-                    -105 -1920 0 -1920 0 0 108 c0 124 15 166 71 194 32 17 141 18 1847 18 1660 0
-                    1817 -1 1848 -16z m74 -1852 c0 -550 -1 -589 -18 -621 -10 -19 -34 -43 -53
-                    -53 -32 -17 -110 -18 -1849 -18 -1708 0 -1817 1 -1850 18 -72 35 -70 17 -70
-                    675 l0 587 1920 0 1920 0 0 -588z"/>
-                    <path d="M960 2000 l0 -80 960 0 960 0 0 80 0 80 -960 0 -960 0 0 -80z"/>
-                    <path d="M3520 1840 l0 -240 320 0 320 0 0 240 0 240 -320 0 -320 0 0 -240z"/>
-                    <path d="M960 1680 l0 -80 480 0 480 0 0 80 0 80 -480 0 -480 0 0 -80z"/>
-                    </g>
-                    </svg>
-                    <h3 class="title">Card Project</h3>
-                </div>
-                <div class="card-content__footer">
-                    <div class="card-content__number">
-                        <span>#{{accountData.CardNumber}}</span>
-                    </div>
-                    <div class="card-content__bonuses">
-                        <span>Доступно:
-                            <span class="count">
-                                {{accountData.Bonuses}}
-                            </span>
-                        </span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="card-content__back">
-            <div class="card-content__barcode-container">
-                <svg id="barcode"></svg>
-            </div>
-        </div>
-    </div> -->
 </div>

src/app/pages/account/bonus-program/bonus-program.component.scss

@@ -103,6 +103,10 @@
 
         #barcode {
           border-radius: 16px;
+          &.hidden {
+            display: none;
+            width: 0;
+          }
         }
       }
     }
@@ -186,13 +190,6 @@
           font-size: 22px;
         }
       }
-
-      &__barcode-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-      }
     }
 
     .explanation {

src/app/pages/account/bonus-program/bonus-program.component.ts

@@ -17,7 +17,6 @@ export class BonusProgramComponent implements OnInit {
   public accountData!: BonusProgramAccount;
   public purchases: Purchase[] = [];
   public loadingBonuses: boolean = false;
-  public isCardBack: boolean = false;
   readonly orderStatuses = orderStatuses;
   readonly moment = moment;
   readonly pageList = environment.hasBonusProgram ? PageListWithBonus : PageList;
@@ -31,10 +30,6 @@ export class BonusProgramComponent implements OnInit {
     this.getAccountData();
   }
 
-  rotateCard() {
-    this.isCardBack = !this.isCardBack
-  }
-
   async getAccountData(): Promise<void>{
     this.loadingBonuses = true;
     this.accountData = (await lastValueFrom(
@@ -44,12 +39,12 @@ export class BonusProgramComponent implements OnInit {
       },
       RpcService.bonusService
     )))['Cards'][0];
+    this.loadingBonuses = false;
     
     barcode("#barcode")
     .options({font: "OCR-B"}) // Will affect all barcodes
     .EAN13(`${this.accountData.CardNumber}`.padStart(12, "0"), {fontSize: 18, textMargin: 0})
     .render();
-    this.loadingBonuses = false;
     const transactions: Transaction[] = (await lastValueFrom(
       this.jsonrpc.rpc(
         {

src/app/pages/account/user-data/user-data.component.scss

@@ -81,9 +81,9 @@
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
                 "Segoe UI Symbol";
-            font-size: 1rem;
             color: #495057;
             padding: 0.5rem 0.75rem;
+            padding-left: 13px;
             transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
             -webkit-appearance: none;
             appearance: none;
@@ -93,6 +93,8 @@
             background: #FFFFFF;
             border: 1px solid #B8DEFF;
             border-radius: 15px;
+            font-size: 14px;
+            text-align: left;
             &.ng-dirty.ng-invalid {
                 border-color: red;
             }
@@ -102,13 +104,18 @@
         }
 
         select {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+                "Segoe UI Symbol";
             background: #FFFFFF;
             border: 1px solid #B8DEFF;
             border-radius: 15px;
             width: 100%;
             height: 45px;
             padding: 0 10px;
-
+            font-size: 14px;
+            text-align: left;
+            color: #495057;
             // option[value=""][disabled] {
             //     display: none;
             // }
@@ -158,12 +165,16 @@
         position: relative;
         &::before {
             content: 'Выберите пол';
-            top: 3px;
             position: absolute;
+            top: 3px;
             left: 13px;
             height: 100%;
-            font-weight: 500;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+                "Segoe UI Symbol" !important;
+            font-family: inherit;
             color: #6c757d;
+            font-size: 14px;
         }
         &.hidden::before {
             display: none;

src/app/pages/main/main.component.html

@@ -1,5 +1,5 @@
 <div class="main-container">
     <app-navbar></app-navbar>
     <p-toast position="top-center"></p-toast>
-    <!-- <app-footer-buttons [token]="token" [deferredPrompt]="deferredPrompt" [isPermissionNotifications]="isPermissionNotifications" (downloadingPWA)="downloadPWA()" (requestingPermission)="requestPermission()"></app-footer-buttons> -->
+    <app-footer-buttons [token]="token" [deferredPrompt]="deferredPrompt" [isPermissionNotifications]="isPermissionNotifications" (downloadingPWA)="downloadPWA()" (requestingPermission)="requestPermission()"></app-footer-buttons>
 </div>

src/app/pages/main/main.component.ts

@@ -27,17 +27,17 @@ export class MainComponent implements OnInit {
       public renderer: Renderer2,
       private messageService: MessageService
   ) {
-    // renderer.listen('window', 'appinstalled', (evt) => {
+    renderer.listen('window', 'appinstalled', (evt) => {
-    //   console.log('INSTALLED!!!')
+      console.log('INSTALLED!!!')
-    // })
+    })
-    // renderer.listen('window', 'beforeinstallprompt', (e) => {
+    renderer.listen('window', 'beforeinstallprompt', (e) => {
-    //   e.preventDefault()
+      e.preventDefault()
-    //   this.deferredPrompt = e
+      this.deferredPrompt = e
-    // })
+    })
-    // route.queryParams.subscribe( (params) => {
+    route.queryParams.subscribe( (params) => {
-    //   console.log('####: ', params)
+      console.log('####: ', params)
-    //   if (params['token']) this.token = params['token']
+      if (params['token']) this.token = params['token']
-    // });
+    });
   }
 
   ngOnInit(): void {