add email event UI triggers for resend option in emails

docs/docs/guides/storefront/checkout-flow/index.mdx

@@ -234,7 +234,7 @@ query GetShippingMethods {
 The results can then be displayed to the customer so they can choose the desired shipping method. If there is only a single
 result, then it can be automatically selected.
 
-The desired shipping method's id is the passed to the [`setOrderShippingMethod`](/reference/graphql-api/shop/mutations/#setordershippingmethod) mutation.
+The desired shipping method's id is then passed to the [`setOrderShippingMethod`](/reference/graphql-api/shop/mutations/#setordershippingmethod) mutation.
 
 ```graphql
 mutation SetShippingMethod($id: [ID!]!) {

license/signatures/version1/cla.json

@@ -111,6 +111,14 @@
       "created_at": "2024-08-13T15:47:42Z",
       "repoId": 136938012,
       "pullRequestNo": 3009
+    },
+    {
+      "name": "sphade",
+      "id": 85949974,
+      "comment_id": 2304127063,
+      "created_at": "2024-08-22T08:51:51Z",
+      "repoId": 136938012,
+      "pullRequestNo": 3027
     }
   ]
 }

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -182,6 +182,9 @@ export * from './shared/components/dropdown/dropdown.component';
 export * from './shared/components/duplicate-entity-dialog/duplicate-entity-dialog.component';
 export * from './shared/components/duplicate-entity-dialog/duplicate-entity-dialog.graphql';
 export * from './shared/components/edit-note-dialog/edit-note-dialog.component';
+export * from './shared/components/email-configurable-input/email-event-configurable-input.component';
+export * from './shared/components/email-event-list/email-event-list.component';
+export * from './shared/components/email-event-list/email-event-list.graphql';
 export * from './shared/components/empty-placeholder/empty-placeholder.component';
 export * from './shared/components/entity-info/entity-info.component';
 export * from './shared/components/extension-host/extension-host-config';

packages/admin-ui/src/lib/core/src/shared/components/email-configurable-input/email-event-configurable-input.component.html

@@ -0,0 +1,29 @@
+<div class="card" *ngIf="operation">
+    <div class="card-block" *ngIf="hideDescription !== true">{{ interpolateDescription() }}</div>
+    <div class="card-block" *ngIf="operation.args?.length">
+        <form [formGroup]="form" *ngIf="operation" class="operation-inputs">
+            <div *ngFor="let arg of operation.args; trackBy: trackByName" class="arg-row">
+                <ng-container *ngIf="form.get(arg.name) && getArgDef(arg) as argDef">
+                    <label class="clr-control-label">{{ argDef.label || (arg.name | sentenceCase) }}</label>
+                    <vdr-help-tooltip
+                        class="mr3"
+                        *ngIf="argDef.description"
+                        [content]="argDef.description"
+                    ></vdr-help-tooltip>
+                    <vdr-dynamic-form-input
+                        [def]="getArgDef(arg)"
+                        [readonly]="readonly"
+                        [control]="form.get(arg.name)"
+                        [formControlName]="arg.name"
+                    ></vdr-dynamic-form-input>
+                </ng-container>
+            </div>
+        </form>
+    </div>
+    <div class="card-footer">
+        <button class="button-small" *ngIf="canSubmit()" (click)="resend.emit(operation)">
+            <clr-icon shape="email"></clr-icon>
+            {{ 'common.resend' | translate }}
+        </button>
+    </div>
+</div>

packages/admin-ui/src/lib/core/src/shared/components/email-configurable-input/email-event-configurable-input.component.scss

@@ -0,0 +1,33 @@
+:host {
+    display: block;
+    margin-bottom: 12px;
+
+    > .card {
+        margin-top: 6px;
+    }
+}
+
+.operation-inputs {
+    padding-top: 0;
+
+    .arg-row:not(:last-child) {
+        margin-bottom: 12px;
+    }
+
+    .arg-row {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        label {
+            margin-inline-end: 6px;
+        }
+    }
+
+    .hidden {
+        display: none;
+    }
+    label {
+        min-width: 130px;
+        display: inline-block;
+    }
+}

packages/admin-ui/src/lib/core/src/shared/components/email-configurable-input/email-event-configurable-input.component.ts

@@ -0,0 +1,186 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    forwardRef,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    Output,
+    SimpleChanges,
+} from '@angular/core';
+import {
+    AbstractControl,
+    ControlValueAccessor,
+    NG_VALIDATORS,
+    NG_VALUE_ACCESSOR,
+    UntypedFormControl,
+    UntypedFormGroup,
+    ValidationErrors,
+    Validator,
+    Validators,
+} from '@angular/forms';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { configurableOperationValueIsValid, getDefaultConfigArgValue } from '@vendure/admin-ui/core';
+import {
+    ConfigArg,
+    ConfigArgDefinition,
+    ConfigurableOperation,
+    ConfigurableOperationDefinition,
+} from '../../../common/generated-types';
+import { CurrencyService } from '../../../providers/currency/currency.service';
+import { interpolateDescription } from '../../../common/utilities/interpolate-description';
+
+/**
+ * A form input which renders a card with the internal form fields of the given ConfigurableOperation.
+ */
+@Component({
+    selector: 'vdr-email-event-configurable-input',
+    templateUrl: './email-event-configurable-input.component.html',
+    styleUrls: ['./email-event-configurable-input.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: EmailEventConfigurableInputComponent,
+            multi: true,
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => EmailEventConfigurableInputComponent),
+            multi: true,
+        },
+    ],
+})
+export class EmailEventConfigurableInputComponent
+    implements OnInit, OnChanges, OnDestroy, ControlValueAccessor, Validator
+{
+    @Input() operation?: ConfigurableOperation;
+    @Input() operationDefinition?: ConfigurableOperationDefinition;
+    @Input() readonly = false;
+    @Input() removable = true;
+    @Input() position = 0;
+    @Input() hideDescription = false;
+    @Output() resend = new EventEmitter<ConfigurableOperation>();
+    argValues: { [name: string]: any } = {};
+    onChange: (val: any) => void;
+    onTouch: () => void;
+    form = new UntypedFormGroup({});
+    positionChange$: Observable<number>;
+    private positionChangeSubject = new BehaviorSubject<number>(0);
+    private subscription: Subscription;
+
+    constructor(private currencyService: CurrencyService) {}
+
+    interpolateDescription(): string {
+        if (this.operationDefinition) {
+            return interpolateDescription(
+                this.operationDefinition,
+                this.form.value,
+                this.currencyService.precisionFactor,
+            );
+        } else {
+            return '';
+        }
+    }
+
+    ngOnInit() {
+        this.positionChange$ = this.positionChangeSubject.asObservable();
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if ('operation' in changes || 'operationDefinition' in changes) {
+            console.log('operation/operationDefinition changes', changes);
+            this.createForm();
+        }
+        if ('position' in changes) {
+            console.log('position changes', changes);
+            this.positionChangeSubject.next(this.position);
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+
+    registerOnChange(fn: any) {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn: any) {
+        this.onTouch = fn;
+    }
+
+    setDisabledState(isDisabled: boolean) {
+        if (isDisabled) {
+            this.form.disable();
+        } else {
+            this.form.enable();
+        }
+    }
+
+    writeValue(value: any): void {
+        if (value) {
+            console.log('writeValue', value);
+            this.form.patchValue(value);
+        }
+    }
+
+    trackByName(index: number, arg: ConfigArg): string {
+        return arg.name;
+    }
+
+    getArgDef(arg: ConfigArg): ConfigArgDefinition | undefined {
+        return this.operationDefinition?.args.find(a => a.name === arg.name);
+    }
+
+    private createForm() {
+        if (!this.operation) {
+            return;
+        }
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        this.form = new UntypedFormGroup({});
+        (this.form as any).__id = Math.random().toString(36).substr(10);
+
+        if (this.operation.args) {
+            for (const arg of this.operationDefinition?.args || []) {
+                let value: any = this.operation.args.find(a => a.name === arg.name)?.value;
+                if (value === undefined) {
+                    value = getDefaultConfigArgValue(arg);
+                }
+                const validators = arg.list ? undefined : arg.required ? Validators.required : undefined;
+                this.form.addControl(arg.name, new UntypedFormControl(value, validators));
+            }
+        }
+
+        this.subscription = this.form.valueChanges.subscribe(value => {
+            if (this.onChange) {
+                this.onChange({
+                    code: this.operation && this.operation.code,
+                    args: value,
+                });
+            }
+            if (this.onTouch) {
+                this.onTouch();
+            }
+        });
+    }
+
+    async canSubmit(): Promise<boolean> {
+        return configurableOperationValueIsValid(this.operationDefinition, this.form.value);
+    }
+
+    validate(c: AbstractControl): ValidationErrors | null {
+        if (this.form.invalid) {
+            return {
+                required: true,
+            };
+        }
+        return null;
+    }
+}

packages/admin-ui/src/lib/core/src/shared/components/email-event-list/email-event-list.component.html

@@ -0,0 +1,12 @@
+<vdr-card class="mb-3" [formGroup]="emailEventFormGroup" *ngIf="(emailEvents$ | async) as emailEvents">
+    <div *ngFor="let emailEvent of emailEvents">
+        <vdr-email-event-configurable-input
+            class="card-span"
+            [hideDescription]="false"
+            [operation]="emailEventsOperations.get(emailEvent.type)"
+            [operationDefinition]="emailEvent.operationDefinitions"
+            [formControlName]="emailEvent.type"
+            (resend)="onResend(emailEvent.type)"
+        ></vdr-email-event-configurable-input>
+    </div>
+</vdr-card>