h-usersite/angular/src/app/pages/account/orders/orders.component.ts

import { HttpErrorResponse } from '@angular/common/http';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import {
  IDateFilter,
  Page,
  Purchase,
  PurchaseInfo,
} from 'src/app/interface/data';
import * as moment from 'moment-timezone';
import {
  combineLatest,
  combineLatestWith,
  distinctUntilChanged,
  forkJoin,
  lastValueFrom,
} from 'rxjs';
import { WpJsonService } from 'src/app/services/wp-json.service';
import { environment } from 'src/environments/environment';
import { CookiesService } from 'src/app/services/cookies.service';
import { MatDialog } from '@angular/material/dialog';
import { PurchaseInfoComponent } from 'src/app/components/purchase-info/purchase-info.component';
import { dateFilterOptions } from 'src/app/app.constants';
import { Store, select } from '@ngrx/store';
import {
  selectCustomerInfo,
  selectProfileState,
  selectTransactions,
  selectTransactionsInfo,
} from 'src/app/state/profile/profile.reducer';
import {
  getTransactions,
  getTransactionsInfo,
} from 'src/app/state/profile/profile.actions';

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.scss'],
})
export class OrdersComponent implements OnInit {
  @Input() currentPage!: Page;
  @Input() handleHttpError!: (error: HttpErrorResponse) => void;
  @Output() deauthorization = new EventEmitter<boolean>(false);
  public lastViewOrder: number = 3;
  public ordersLoadingStatus: boolean = true;
  readonly moment = moment;
  public purchases: Purchase[] = [];
  public purchasesShortArray: Purchase[] = [];

  private profileState$ = this.store.select(selectCustomerInfo);
  private transactionsState$ = this.store.select(selectTransactions);
  private transactionsInfoState$ = this.store.select(selectTransactionsInfo);

  public dateFilterOptions = dateFilterOptions;
  public defaultFilterType = 'currentMonth';
  private startOfMonth = moment().startOf('month').format('YYYY-MM-DD HH:mm');
  public filteredOfDatePurchases: Purchase[] = [];

  constructor(
    private wpJsonService: WpJsonService,
    private cookiesService: CookiesService,
    public dialog: MatDialog,
    private store: Store
  ) {}

  ngOnInit(): void {
    this.getOrders();
  }

  dateFilter(dateFilter: IDateFilter) {
    this.lastViewOrder = 3;
    switch (dateFilter.filterType) {
      case 'between':
        this.filteredOfDatePurchases = this.purchases.filter((value) => {
          return moment(value.transactionCreateDate).isBetween(
            dateFilter.from,
            moment(dateFilter.to).add(1, 'day')
          );
        });
        break;

      case 'currentMonth':
        this.filteredOfDatePurchases = this.purchases.filter((value) => {
          return moment(value.transactionCreateDate).isAfter(this.startOfMonth);
        });
        break;

      case 'lastMonth':
        this.filteredOfDatePurchases = this.purchases.filter((value) => {
          return moment(value.transactionCreateDate).isBetween(
            moment(this.startOfMonth).subtract(1, 'month'),
            this.startOfMonth
          );
        });
        break;

      default:
        this.filteredOfDatePurchases = this.purchases;
        break;
    }
    this.purchasesShortArray = this.filteredOfDatePurchases.slice(
      0,
      this.lastViewOrder
    );
  }

  async getOrders() {
    const token = this.cookiesService.getItem('token');
    if (!token) {
      this.cookiesService.deleteCookie('token');
      this.deauthorization.emit(true);
      return;
    }

    combineLatest([this.transactionsState$, this.transactionsInfoState$])
      .pipe(distinctUntilChanged())
      .subscribe({
        next: ([transactions, transactionsInfo]) => {
          if (transactions && transactionsInfo) {
            this.purchases = transactions
              .map<Purchase>((purchase) => {
                return {
                  ...purchase,
                  more_info:
                    transactionsInfo.find(
                      (purchaseInfo: PurchaseInfo) =>
                        Number(purchaseInfo.number) === purchase.orderNumber
                    ) || null,
                };
              })
              .filter((purchase: Purchase) =>
                [
                  'PayFromWallet',
                  'CancelPayFromWallet',
                  'RefillWallet',
                ].includes(purchase.transactionType)
              );

            this.ordersLoadingStatus = false;
            this.dateFilter({ filterType: this.defaultFilterType });
          }
        },
      });
  }

  getMoreOrders() {
    this.lastViewOrder += 4;
    this.purchasesShortArray = this.filteredOfDatePurchases.slice(
      0,
      this.lastViewOrder
    );
  }

  showPurchaseInfo(purchaseInfo: PurchaseInfo) {
    const dialogRef = this.dialog.open(PurchaseInfoComponent, {
      data: { purchaseInfo },
    });
  }
}