Skip to content

Commit

Permalink
OPS-480: Add randomizeAmount form (#187)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KeinAsylum
KeinAsylum authored Jul 1, 2024
1 parent a785856 commit 939004f
Show file tree
Hide file tree
Showing 33 changed files with 541 additions and 987 deletions.
16 changes: 5 additions & 11 deletions ...link/create-invoice-or-invoice-template/create-invoice-or-invoice-template.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,19 +31,13 @@ <h1 class="dsh-headline">{{ c('title') }}</h1>
<h1 class="dsh-headline">{{ c('invoiceTitle') }}</h1>
<dsh-create-invoice-form
[formControl]="createInvoiceFormControl"
[shops]="shops$ | async"
[shops]="shops"
></dsh-create-invoice-form>
<dsh-actions *transloco="let t; scope: 'components'; read: 'components.shared'">
<button
[disabled]="createInvoiceFormControl.pristine"
color="accent"
dsh-text-button
(click)="createInvoiceFormControl.reset()"
>
{{ t('clearForm') }}
</button>
<button
[disabled]="createInvoiceFormControl.invalid"
[disabled]="
createInvoiceFormControl.invalid || createInvoiceFormControl.disabled
"
color="accent"
dsh-button
(click)="create()"
Expand All @@ -55,7 +49,7 @@ <h1 class="dsh-headline">{{ c('invoiceTitle') }}</h1>
</ng-container>
<dsh-create-invoice-template
*ngIf="form.value.type === type.Template"
[shops]="shops$ | async"
[shops]="shops"
(next)="nextTemplate.next($event)"
></dsh-create-invoice-template>
</ng-container>
Expand Down
68 changes: 42 additions & 26 deletions ...t-link/create-invoice-or-invoice-template/create-invoice-or-invoice-template.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
import { Component, EventEmitter, OnInit, Output, ChangeDetectionStrategy } from '@angular/core';
import {
Component,
EventEmitter,
OnInit,
Output,
ChangeDetectionStrategy,
Input,
} from '@angular/core';
import { FormControl, UntypedFormBuilder } from '@angular/forms';
import { TranslocoService } from '@ngneat/transloco';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { Invoice, InvoiceTemplateAndToken } from '@vality/swag-payments';
import pick from 'lodash-es/pick';
import moment from 'moment';
import { merge, Subject } from 'rxjs';
import { map, switchMap, take } from 'rxjs/operators';
import { NotifyLogService } from '@vality/ng-core';
import { Invoice, InvoiceTemplateAndToken, Shop } from '@vality/swag-payments';
import { merge, Subject, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

import { InvoicesService } from '@dsh/app/api/payments';

import { CreateInvoiceOrInvoiceTemplateService } from './create-invoice-or-invoice-template.service';

export enum Type {
Invoice = 'invoice',
Template = 'template',
Expand All @@ -26,20 +32,22 @@ export type InvoiceOrInvoiceTemplate =
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CreateInvoiceOrInvoiceTemplateComponent implements OnInit {
@Input() shops: Shop[];
@Output() next = new EventEmitter<InvoiceOrInvoiceTemplate>();

nextInvoice = new Subject<Invoice>();
nextTemplate = new Subject<InvoiceTemplateAndToken>();

shops$ = this.createInvoiceOrInvoiceTemplateService.shops$;
form = this.createInvoiceOrInvoiceTemplateService.form;
form = this.fb.group({ type: null });
type = Type;

createInvoiceFormControl = this.createInvoiceOrInvoiceTemplateService.createInvoiceFormControl;
createInvoiceFormControl = new FormControl();

constructor(
private createInvoiceOrInvoiceTemplateService: CreateInvoiceOrInvoiceTemplateService,
private invoicesService: InvoicesService,
private transloco: TranslocoService,
private fb: UntypedFormBuilder,
private log: NotifyLogService,
) {}

ngOnInit(): void {
Expand All @@ -62,22 +70,30 @@ export class CreateInvoiceOrInvoiceTemplateComponent implements OnInit {
}

create(): void {
const { value } = this.createInvoiceFormControl;
this.shops$
this.createInvoiceFormControl.disable();
this.invoicesService
.createInvoice({
invoiceParams: this.createInvoiceFormControl.value,
})
.pipe(
take(1),
switchMap((shops) =>
this.invoicesService.createInvoice({
invoiceParams: {
...pick(value, ['product', 'description', 'cart', 'shopID']),
dueDate: moment(value.dueDate).utc().endOf('d').format(),
currency: shops.find((s) => s.id === value.shopID)?.currency,
metadata: {},
},
}),
),
untilDestroyed(this),
catchError((err) => {
this.log.error(
err,
this.transloco.selectTranslate(
'createInvoiceOrInvoiceTemplate.createInvoiceFailed',
null,
'payment-section',
),
);
this.createInvoiceFormControl.enable();
return throwError(() => err);
}),
)
.subscribe(({ invoice }) => this.nextInvoice.next(invoice));
.subscribe(({ invoice }) => {
this.nextInvoice.next(invoice);
this.createInvoiceFormControl.reset();
this.createInvoiceFormControl.enable();
});
}
}
27 changes: 0 additions & 27 deletions ...ent-link/create-invoice-or-invoice-template/create-invoice-or-invoice-template.service.ts
View file

This file was deleted.

1 change: 0 additions & 1 deletion ...ons/payment-section/integrations/payment-link/create-invoice-or-invoice-template/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export * from './create-invoice-or-invoice-template.component';
export * from './create-invoice-or-invoice-template.service';
190 changes: 15 additions & 175 deletions .../integrations/payment-link/create-invoice-template/create-invoice-template.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
*transloco="let c; scope: 'payment-section'; read: 'paymentSection.createInvoiceTemplate'"
[formGroup]="control"
fxLayout="column"
fxLayoutGap="32px"
fxLayoutGap="24px"
>
<h1 class="dsh-headline">{{ c('title') }}</h1>
<div fxLayout="column" fxLayoutGap="16px">
Expand All @@ -28,189 +28,29 @@ <h1 class="dsh-headline">{{ c('title') }}</h1>
<mat-datepicker #dateDatepicker></mat-datepicker>
</mat-form-field>

<label class="dsh-subheading-1">{{ c('form.invoiceTemplateType') }}:</label>
<mat-radio-group formControlName="templateType" fxLayout fxLayoutGap="24px">
<mat-radio-button
*ngFor="let selectedInvoiceTemplateType of invoiceTemplateTypes"
[value]="selectedInvoiceTemplateType"
fxFlex="0 1 calc((100% - 24px * 2)/3)"
>
<ng-container
*transloco="
let t;
scope: 'payment-section';
read: 'paymentSection.createInvoiceTemplate.invoiceTemplateType'
"
[ngSwitch]="selectedInvoiceTemplateType"
>
<ng-container *ngSwitchCase="'InvoiceTemplateMultiLine'">{{
t('InvoiceTemplateMultiLine')
}}</ng-container>
<ng-container *ngSwitchCase="'InvoiceTemplateSingleLine'">{{
t('InvoiceTemplateSingleLine')
}}</ng-container>
</ng-container>
</mat-radio-button>
</mat-radio-group>

<ng-container
*ngIf="
control.value.templateType === templateType.InvoiceTemplateMultiLine;
else singleLine
"
formArrayName="cart"
>
<h2 class="dsh-subheading-1">{{ c('form.cart.title') }}:</h2>
<ng-container *ngFor="let cart of cartForm.controls; let i = index" [formGroupName]="i">
<mat-form-field>
<mat-label>{{ c('form.cart.description') }}</mat-label>
<input formControlName="product" matInput maxlength="1000" required />
</mat-form-field>
<div fxLayout fxLayoutGap="24px">
<mat-form-field fxFlex>
<mat-label>{{ c('form.cart.amount') }}</mat-label>
<dsh-format-input
format="amount"
formControlName="price"
required
></dsh-format-input>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>{{ c('form.cart.quantity') }}</mat-label>
<dsh-format-input
format="quantity"
formControlName="quantity"
required
></dsh-format-input>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>{{ c('form.taxMode') }}</mat-label>
<mat-select formControlName="taxMode" required>
<mat-option [value]="withoutVAT">{{ c('form.withoutVAT') }}</mat-option>
<mat-option *ngFor="let taxMode of taxModes" [value]="taxMode">
{{ taxMode }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxLayout="column" fxLayoutAlign=" end">
<button
*ngIf="i !== 0 || (i === 0 && cartForm.controls.length > 1)"
color="warn"
dsh-text-button
(click)="removeProduct(i)"
>
{{ c('form.cart.remove') }}
</button>
</div>
</ng-container>
<mat-divider></mat-divider>
<div fxLayout fxLayoutAlign="space-between center" fxLayoutGap="24px">
<div>
{{ c('form.cart.summary') }}:
{{ summary$ | async | currency: control.value.currency }}
</div>
<button color="accent" dsh-text-button (click)="addProduct()">
{{ c('form.cart.add') }}
</button>
</div>
</ng-container>

<ng-template #singleLine>
<mat-form-field>
<mat-label>{{ c('form.product') }}</mat-label>
<input formControlName="product" matInput maxlength="1000" required />
</mat-form-field>

<mat-form-field>
<mat-label>{{ c('form.taxMode') }}</mat-label>
<mat-select formControlName="taxMode" required>
<mat-option [value]="withoutVAT">{{ c('form.withoutVAT') }}</mat-option>
<mat-option *ngFor="let taxMode of taxModes" [value]="taxMode">{{
taxMode
}}</mat-option>
</mat-select>
</mat-form-field>

<label class="dsh-subheading-1">{{ c('form.invoiceTemplateTypeCostType') }}:</label>
<mat-radio-group formControlName="costType" fxLayout fxLayoutGap="24px">
<mat-radio-button
*ngFor="let selectedInvoiceTemplateCostType of invoiceTemplateCostTypes"
[value]="selectedInvoiceTemplateCostType"
fxFlex
>
<ng-container
*transloco="
let t;
scope: 'payment-section';
read: 'paymentSection.createInvoiceTemplate.invoiceTemplateCostType'
"
[ngSwitch]="selectedInvoiceTemplateCostType"
>
<ng-container *ngSwitchCase="'InvoiceTemplateLineCostFixed'">{{
t('InvoiceTemplateLineCostFixed')
}}</ng-container>
<ng-container *ngSwitchCase="'InvoiceTemplateLineCostRange'">{{
t('InvoiceTemplateLineCostRange')
}}</ng-container>
<ng-container *ngSwitchCase="'InvoiceTemplateLineCostUnlim'">{{
t('InvoiceTemplateLineCostUnlim')
}}</ng-container>
</ng-container>
</mat-radio-button>
</mat-radio-group>
<mat-form-field>
<mat-label>{{ c('form.product') }}</mat-label>
<input formControlName="product" matInput maxlength="1000" required />
</mat-form-field>

<mat-form-field
*ngIf="control.value.costType === costType.InvoiceTemplateLineCostFixed"
>
<mat-label>{{ c('form.cost') }}</mat-label>
<dsh-format-input
format="amount"
formControlName="amount"
required
></dsh-format-input>
</mat-form-field>
<mat-form-field>
<mat-label>{{ c('form.cost') }}</mat-label>
<dsh-format-input format="amount" formControlName="amount" required></dsh-format-input>
<span matTextPrefix>{{ currency }}&nbsp;</span>
</mat-form-field>

<div
*ngIf="control.value.costType === costType.InvoiceTemplateLineCostRange"
formGroupName="range"
fxLayout
fxLayoutGap="24px"
>
<mat-form-field fxFlex>
<mat-label>{{ c('form.lowerBound') }}</mat-label>
<dsh-format-input
format="amount"
formControlName="lowerBound"
required
></dsh-format-input>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>{{ c('form.upperBound') }}</mat-label>
<dsh-format-input
format="amount"
formControlName="upperBound"
required
></dsh-format-input>
</mat-form-field>
</div>
</ng-template>
<dsh-invoice-randomize-amount-form
[currency]="currency"
formControlName="randomizeAmount"
></dsh-invoice-randomize-amount-form>
</div>

<div
*transloco="let t; scope: 'components'; read: 'components.shared'"
fxLayout
fxLayout="row-reverse"
fxLayoutAlign="space-between"
fxLayoutGap="24px"
>
<button
[disabled]="(isLoading$ | async) || control.pristine"
color="accent"
dsh-text-button
(click)="clear()"
>
{{ t('clearForm') }}
</button>
<button
[disabled]="control.invalid || (isLoading$ | async)"
color="accent"
Expand Down
Loading

0 comments on commit 939004f

Please sign in to comment.