h-usersite/angular/src/app/pages/guest-card/guest-card.component.html

<app-navbar title="Карта гостя" (backEvent)="logout()"></app-navbar>

<ng-container
  *ngTemplateOutlet="appTpl; context: { user: customerInfo | async }"
></ng-container>

<ng-template #appTpl let-user="user">
  <div class="guest-card">
    <div class="guest-card__qr" (click)="qrCodeClick()">
      <qr-code
        *ngIf="user; else spinner"
        [value]="user?.customer_info?.phone.substr(2) || 'Данные не найдены'"
        [margin]="0"
        [size]="qrCodeSize"
        errorCorrectionLevel="M"
      ></qr-code>
    </div>
    <div class="guest-card__user-description">
      Текущий баланс бонусов:
      <span *ngIf="user">
        {{
          getBalanceAmount(user?.customer_info?.walletBalances)
        }}
        бонусов</span
      >
    </div>
    <app-accordion header="Условия начисления бонусов">
      <p>
        Расчет начисления бонусов - 10% от суммы покупок за период с
        11.01.2023г. по 31.03.2023 г.
      </p>
      <p>
        За период с 11.01.2023г. по 31.03.2023 г. сумма ваших покупок составила
        3700 руб.
      </p>
      <p>Начисляемый бонус 10% от суммы покупок</p>
    </app-accordion>
    <app-accordion header="Условия «оплаты» покупки бонусами">
      <p>
        Участник может использовать Бонусы для «оплаты» до 100% стоимости любой
        покупки.
      </p>
      <p>
        Списание Бонусов происходит из расчета 1:1 (один Бонус дает скидку 1
        российский рубль / 1 тенге / 1 белорусский рубль. Скидка,
        предоставляемая Участнику при списании Бонусов, уменьшает цену товаров в
        заказе в соответствии с условиями ПЛ.
      </p>
      <p>
        Для списания Бонусов Участник должен попросить об этом в кофе-баре сети
        «COFFEE LIKE» кассира до момента пробития фискального чека, после чего
        им будет проверена возможность списания Бонусов.
      </p>
      <p>
        Для всех Участников возможно списание без использования мобильного
        приложения.
      </p>
      <p>Полученные Бонусы не подлежат обмену на денежные средства.</p>
    </app-accordion>
    <app-accordion header="Особые условия">
      <p>
        Начисленные на счет бонусы сгорают по прошествии 90 дней с момента
        совершения последней покупки с начислением или списанием бонусов.
      </p>

      <ul>
        Возврат покупки, за которую бонусы были начислены:
        <li>
          В случае, если бонусов на счету достаточно для списания, бонусы
          списываются в полном ранее начисленном за возвращаемый товар объеме.
        </li>
        <li>
          В случае, если бонусов на счету недостаточно, формируется минусовой
          баланс.
        </li>
      </ul>

      <ul>
        Возврат покупки, которая была оплачена бонусами:
        <li>
          В случае предъявления Участником кассового или товарного чека, сумма
          бонусов, списанная для оплаты возвращаемого товара, зачисляется на
          счет участника.
        </li>
        <li>
          В случае возврата товара с применением оплаты бонусами, клиенту
          возвращается денежная сумма в размере, внесенном Участником в оплату
          товара при покупке, за вычетом суммы, оплаченной бонусами.
        </li>
      </ul>
    </app-accordion>

    <div class="guest-card__purchases-description">
      Сумма ваших покупок за период с 01.04.2023г. - <span>1200 руб.</span>
    </div>
    <app-accordion header="Узнать % начисляемых бонусов">
      <p>
        Начисление Бонусных баллов происходит по дифференцированной шкале в
        зависимости от уровня:
      </p>

      <ul>
        <span style="color: #f2c94c">Уровень 1</span>
        <li>Сумма покупок за предыдущий период 0-1600 руб.</li>
        <li>Начисляемый бонус 3% от суммы покупки</li>
      </ul>
      <br />
      <ul>
        <span style="color: #f2994a">Уровень 2</span>
        <li>Сумма покупок за предыдущий период 1601-3600 руб.</li>
        <li>Начисляемый бонус 6% от суммы покупки</li>
      </ul>
      <br />
      <ul>
        <span style="color: #6fcf97">Уровень 3</span>
        <li>Сумма покупок за предыдущий период  3601-8600 руб.</li>
        <li>Начисляемый бонус 10% от суммы покупки</li>
      </ul>
      <br />
      <ul>
        <span style="color: #6fcf97">Уровень 4</span>
        <li>Сумма покупок за предыдущий период — от 8601 руб.</li>
        <li>Начисляемый бонус, в % от суммы покупки - 15%</li>
      </ul>
    </app-accordion>

    <div class="guest-card__level-info">
      <h2>
        До следующего уровня за период с 01.04.2023 по 30.06.2023г осталось
        совершить покупки на 401 рублей
      </h2>
      <input
        type="range"
        [(ngModel)]="discountLevel"
        [min]="3"
        [max]="6"
        [step]="0.1"
        [ngStyle]="{
          'background-size': ((discountLevel - 3) / (6 - 3)) * 100 + '% 100%'
        }"
      />

      <p class="show-more">Узнать условия начисления бонусов</p>
    </div>
    <hr />
    <app-last-order></app-last-order>
    <hr />
    <app-invite-friends></app-invite-friends>
    <hr />
    <div class="guest-card__download-app">
      <img src="/assets/download-app.svg" alt="Скачай приложение" />
    </div>
    <a class="guest-card__loyalty-program" routerLink="loyalty-program"
      >Подробнее о правилах <br />
      Программы лояльности</a
    >
  </div>
</ng-template>

<ng-template #spinner>
  <mat-spinner></mat-spinner>
</ng-template>