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';
import { MatSnackBar } from '@angular/material/snack-bar';

@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,
    private _snackBar: MatSnackBar
  ) {}

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

  dateFilter(dateFilter: IDateFilter) {
    this.lastViewOrder = 3;
    switch (dateFilter.filterType) {
      case 'between':
        this.ordersLoadingStatus = true;
        this.filteredOfDatePurchases = []
        const token = this.cookiesService.getItem('token')
        this.wpJsonService.getTransactionsBetween(environment.systemId, token || '', environment.icardProxy, {
          date_from: dateFilter.from?.toLocaleString() || '',
          date_to: dateFilter.to?.toLocaleString() || ''
        }).subscribe({
          next: (value) => {
            this.filteredOfDatePurchases = Object.values(value)[0] as Purchase[]
            this.ordersLoadingStatus = false
            this.purchasesShortArray = this.filteredOfDatePurchases.slice(
              0,
              this.lastViewOrder
            );
            console.log(value);
            
          },
          error: (err) => {
            console.error(err);
            
          }
        })
        // 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;
    }

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

    // combineLatest([this.transactionsState$, this.transactionsInfoState$])
    //   .pipe(distinctUntilChanged())
    //   .subscribe({
    //     next: ([transactions, transactionsInfo]) => {
    //       console.log('####: ', transactions);
    //       console.log('####I: ', 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)
    //           );
    //       } else if (transactions && !transactionsInfo) {
    //         this.purchases = transactions.filter((purchase: Purchase) =>
    //           ['PayFromWallet', 'CancelPayFromWallet', 'RefillWallet'].includes(
    //             purchase.transactionType
    //           )
    //         );
    //         this._snackBar.open(
    //           'Произошла ошибка получения подробностей по транзакциям',
    //           '',
    //           {
    //             duration: 3500,
    //           }
    //         );
    //       } else {
    //         this._snackBar.open(
    //           'Произошла ошибка получения данных по транзакциям',
    //           '',
    //           {
    //             duration: 3500,
    //           }
    //         );
    //       }
    //       this.ordersLoadingStatus = false;
    //       console.log(this.purchases);

    //       this.dateFilter({ filterType: this.defaultFilterType });
    //     },
    //     error: (err) => {
    //       console.error('Error: ', err);
    //       this.ordersLoadingStatus = false;
    //     },
    //   });
  }

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

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