projects/laboiteasessions/src/app/pages/cart/cart-delivery/cart-delivery.component.html
<div class="delivery-wrapper"> <form [formGroup]="form" (ngSubmit)="saveDelivery()"> <div fxLayout="row" fxLayoutAlign="space-around stretch" fxLayoutGap="30px" fxLayoutGap.xs="0px" fxLayout.xs="row wrap" fxLayoutAlign.xs="center stretch"> <div formGroupName="address" fxFlex="45" fxFlex.xs="100" fxLayout="column"> <div> <h2 class="text-ucfirst delivery-title" i18n> Adresse de livraison </h2> </div> <ng-container *ngIf="true then spacerTmpl"> </ng-container> <ng-template #activableDeliveryFormTmpl> <div class="form-delivery-wrapper" fxLayout="column"> <mat-form-field *ngIf="myPreviousDeliveries.length"> <mat-select [attr.name]="'deliveries'" (selectionChange)="onDeliveryChange($event)" placeholder="Vos adresses"> <mat-option [value]="null">-</mat-option> <mat-option [value]="delivery" *ngFor="let delivery of myPreviousDeliveries"> {{ delivery.address.title }} </mat-option> </mat-select> </mat-form-field> <button type="button" color="primary" (click)="activeDeliveryAddress()" mat-raised-button role="button" i18n *ngIf="deliveryConfig.display_add_address_button"> Ajouter une adresse de livraison </button> </div> </ng-template> <div class="form-delivery-wrapper" fxLayout="column" fxLayout.xs="row wrap" fxFlex.xs="100" *ngIf="isDeliveryAddressFormActive; else activableDeliveryFormTmpl"> <button title="Revenir aux choix de vos adresses" type="button" role="button" (click)="showDeliveryChoice()" mat-flat-button color="primary" fxLayout="row" fxLayoutAlign="start center"> <mat-icon style="line-height: 24px;" fontSet="fa" fontIcon="fa-undo"></mat-icon> <span i18n>Revenir aux choix de vos adresses</span> </button> <mat-form-field appearance="standard" fxFlex.xs="100"> <input matInput formControlName="email" autocomplete="email" i18n-placeholder="email" placeholder="email"> </mat-form-field> <div fxLayout="row" fxLayoutGap="10px" fxFlex.xs="100"> <mat-form-field appearance="standard" fxFlex="50" fxFlex.xs="45"> <input matInput formControlName="lastname" autocomplete="lastname" i18n-placeholder="nom" placeholder="nom"> </mat-form-field> <mat-form-field appearance="standard" fxFlex="50" fxFlex.xs="45"> <input matInput formControlName="firstname" autocomplete="firstname" i18n-placeholder="prénom" placeholder="prénom"> </mat-form-field> </div> <ng-container *ngIf="!isMinimalForm(cart)"> <mat-form-field appearance="standard" fxFlex.xs="100"> <input matInput formControlName="address" autocomplete="address" i18n-placeholder="adresse" placeholder="adresse"> </mat-form-field> <mat-form-field appearance="standard" fxFlex.xs="100"> <input matInput formControlName="address_complement" autocomplete="address_complement" i18n-placeholder="complément d'adresse" placeholder="complément d'adresse"> </mat-form-field> <div fxLayout="row" fxFlex.xs="100" fxLayoutGap="10px"> <mat-form-field appearance="standard" fxFlex="30"> <input matInput formControlName="zipcode" autocomplete="zipcode" i18n-placeholder="code postal" placeholder="code postal"> </mat-form-field> <mat-form-field appearance="standard" fxFlex="30"> <input matInput formControlName="city" autocomplete="city" i18n-placeholder="ville" placeholder="ville"> </mat-form-field> display_add_billing_button <mat-form-field appearance="standard" fxFlex="30"> <input matInput formControlName="country" autocomplete="country" i18n-placeholder="pays" placeholder="pays"> </mat-form-field> </div> </ng-container> </div> <div class="delivery-address-choice" fxLayout="row" fxLayoutAlign="center stretch" *ngIf="deliveryConfig.display_address_resume"> <mat-list> <mat-list-item *ngIf="form.value?.address?.lastname"> {{ form.value?.address?.lastname }} {{ form.value?.address?.firstname }}</mat-list-item> <mat-list-item *ngIf="form.value?.address?.address"> {{ form.value?.address?.address }} {{ form.value?.address?.address_complement }}</mat-list-item> <mat-list-item *ngIf="form.value?.address?.zipcode"> {{ form.value?.address?.zipcode }} {{ form.value?.address?.city }} , {{ form.value?.address?.country }}</mat-list-item> </mat-list> </div> </div> <div formGroupName="billing" fxFlex="45" fxFlex.xs="100" fxLayout="column"> <div> <h2 class="text-ucfirst delivery-title" i18n> Adresse de facturation </h2> </div> <ng-container *ngIf="isDeliveryCompleted(); else spacerTmpl"> <div class="duplicate-wrapper"> <button [title]="'cta.duplicate_same_delivery_as_billing'" *ngIf="isDeliveryCompleted()" type="button" role="button" (click)="copyDeliveryIntoBilling()" mat-flat-button color="primary" fxLayout="row" fxLayoutAlign="start center"> <mat-icon style="line-height: 24px;" fontSet="fa" fontIcon="fa-copy"></mat-icon> <span i18n>C'est aussi l'adresse de facturation</span> </button> </div> </ng-container> <ng-template #spacerTmpl> <div class="spacer-wrapper"> </div> </ng-template> <ng-template #activableBillingFormTmpl> <div class="form-billing-wrapper" fxLayout="column" *ngIf="deliveryConfig.display_add_billing_button"> <button type="button" color="primary" (click)="activeBillingAddress()" mat-raised-button role="button" i18n> Ajouter une adresse de facturation </button> </div> </ng-template> <div class="form-delivery-wrapper" fxLayout="column" fxLayout.xs="row wrap" *ngIf="isBillingActivable(); else activableBillingFormTmpl"> <button title="Revenir aux choix de vos adresses" i18n-title="Revenir aux choix de vos adresses" type="button" role="button" (click)="showBillingChoice()" mat-flat-button color="primary" fxLayout="row" fxLayoutAlign="start center"> <mat-icon style="line-height: 24px;" fontSet="fa" fontIcon="fa-undo"></mat-icon> <span i18n>Revenir aux choix de vos adresses</span> </button> <mat-form-field appearance="standard" fxFlex.xs="100"> <input matInput formControlName="email" autocomplete="email" i18n-placeholder="email" placeholder="email"> </mat-form-field> <div fxLayout="row" fxLayoutGap="10px" fxFlex.xs="100"> <mat-form-field appearance="standard" fxFlex="50" fxFlex.xs="45"> <input matInput formControlName="lastname" autocomplete="lastname" i18n-placeholder="nom" placeholder="nom"> </mat-form-field> <mat-form-field appearance="standard" fxFlex="50" fxFlex.xs="45"> <input matInput formControlName="firstname" autocomplete="firstname" i18n-placeholder="prénom" placeholder="prénom"> </mat-form-field> </div> <ng-container *ngIf="!isMinimalForm(cart)"> <mat-form-field appearance="standard" fxFlex.xs="100"> <input matInput formControlName="address" autocomplete="address" i18n-placeholder="adresse" placeholder="adresse"> </mat-form-field> <mat-form-field appearance="standard" fxFlex.xs="100"> <input matInput formControlName="address_complement" autocomplete="address_complement" i18n-placeholder="complément d'adresse" placeholder="complément d'adresse"> </mat-form-field> <div fxLayout="row" fxLayoutGap="10px" fxFlex.xs="100"> <mat-form-field appearance="standard" fxFlex="30"> <input matInput formControlName="zipcode" autocomplete="zipcode" i18n-placeholder="code postal" placeholder="code postal"> </mat-form-field> <mat-form-field appearance="standard" fxFlex="40" fxFlex.xs="30"> <input matInput formControlName="city" autocomplete="city" i18n-placeholder="ville" placeholder="ville"> </mat-form-field> <mat-form-field appearance="standard" fxFlex="30"> <input matInput formControlName="country" autocomplete="country" i18n-placeholder="pays" placeholder="pays"> </mat-form-field> </div> </ng-container> </div> <div class="spacer-select-wrapper" *ngIf="deliveryConfig.display_billing_resume"> </div> <div class="delivery-billing-choice" fxLayout="row" fxLayoutAlign="center stretch" *ngIf="deliveryConfig.display_billing_resume"> <mat-list> <mat-list-item *ngIf="form.value?.billing?.lastname"> {{ form.value?.billing?.lastname }} {{ form.value?.billing?.firstname }}</mat-list-item> <mat-list-item *ngIf="form.value?.billing?.address"> {{ form.value?.billing?.address }} {{ form.value?.billing?.address_complement }}</mat-list-item> <mat-list-item *ngIf="form.value?.billing?.zipcode"> {{ form.value?.billing?.zipcode }} {{ form.value?.billing?.city }} , {{ form.value?.billing?.country }}</mat-list-item> </mat-list> </div> </div> </div> <div class="actions-wrapper" fxLayout="row" fxLayoutAlign="space-around stretch"> <button type="button" class="text-uppercase" role="button" mat-raised-button title="Annuler" i18n-title="Annuler" (click)="cancel()" [disabled]="disableDeliveryButton"> Annuler </button> <button type="submit" class="text-uppercase" role="button" title="Valider la livraison" i18n-title="Valider la livraison" [color]="!disableDeliveryButton ? 'primary' : ''" mat-button mat-raised-button [disabled]="disableDeliveryButton || form.invalid"> Valider la livraison </button> </div> </form></div>