From 06efc50cab515f49c4eeec74093250242d498b0e Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Thu, 23 Feb 2023 20:53:47 +0100 Subject: [PATCH] feat(admin-ui): Add support for translatable PaymentMethods Relates to #1184 --- .../lib/core/src/common/generated-types.ts | 35 +++++-- .../data/definitions/settings-definitions.ts | 6 ++ .../data/providers/settings-data.service.ts | 12 ++- .../payment-method-detail.component.html | 6 ++ .../payment-method-detail.component.ts | 91 ++++++++++++------- .../routing/payment-method-resolver.ts | 1 + 6 files changed, 108 insertions(+), 43 deletions(-) diff --git a/packages/admin-ui/src/lib/core/src/common/generated-types.ts b/packages/admin-ui/src/lib/core/src/common/generated-types.ts index f5b1e869a5..274b1ad26b 100644 --- a/packages/admin-ui/src/lib/core/src/common/generated-types.ts +++ b/packages/admin-ui/src/lib/core/src/common/generated-types.ts @@ -745,10 +745,9 @@ export type CreatePaymentMethodInput = { checker?: InputMaybe; code: Scalars['String']; customFields?: InputMaybe; - description?: InputMaybe; enabled: Scalars['Boolean']; handler: ConfigurableOperationInput; - name: Scalars['String']; + translations: Array; }; export type CreateProductInput = { @@ -3884,6 +3883,7 @@ export type PaymentMethod = Node & { handler: ConfigurableOperation; id: Scalars['ID']; name: Scalars['String']; + translations: Array; updatedAt: Scalars['DateTime']; }; @@ -3946,6 +3946,24 @@ export type PaymentMethodSortParameter = { updatedAt?: InputMaybe; }; +export type PaymentMethodTranslation = { + __typename?: 'PaymentMethodTranslation'; + createdAt: Scalars['DateTime']; + description: Scalars['String']; + id: Scalars['ID']; + languageCode: LanguageCode; + name: Scalars['String']; + updatedAt: Scalars['DateTime']; +}; + +export type PaymentMethodTranslationInput = { + customFields?: InputMaybe; + description?: InputMaybe; + id?: InputMaybe; + languageCode: LanguageCode; + name?: InputMaybe; +}; + /** Returned if an attempting to refund a Payment against OrderLines from a different Order */ export type PaymentOrderMismatchError = ErrorResult & { __typename?: 'PaymentOrderMismatchError'; @@ -5804,11 +5822,10 @@ export type UpdatePaymentMethodInput = { checker?: InputMaybe; code?: InputMaybe; customFields?: InputMaybe; - description?: InputMaybe; enabled?: InputMaybe; handler?: InputMaybe; id: Scalars['ID']; - name?: InputMaybe; + translations?: InputMaybe>; }; export type UpdateProductInput = { @@ -7362,14 +7379,14 @@ export type DeleteChannelMutationVariables = Exact<{ export type DeleteChannelMutation = { deleteChannel: { __typename?: 'DeletionResponse', result: DeletionResult, message?: string | null } }; -export type PaymentMethodFragment = { __typename?: 'PaymentMethod', id: string, createdAt: any, updatedAt: any, name: string, code: string, description: string, enabled: boolean, checker?: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } | null, handler: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } }; +export type PaymentMethodFragment = { __typename?: 'PaymentMethod', id: string, createdAt: any, updatedAt: any, name: string, code: string, description: string, enabled: boolean, translations: Array<{ __typename?: 'PaymentMethodTranslation', id: string, languageCode: LanguageCode, name: string, description: string }>, checker?: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } | null, handler: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } }; export type GetPaymentMethodListQueryVariables = Exact<{ options: PaymentMethodListOptions; }>; -export type GetPaymentMethodListQuery = { paymentMethods: { __typename?: 'PaymentMethodList', totalItems: number, items: Array<{ __typename?: 'PaymentMethod', id: string, createdAt: any, updatedAt: any, name: string, code: string, description: string, enabled: boolean, checker?: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } | null, handler: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } }> } }; +export type GetPaymentMethodListQuery = { paymentMethods: { __typename?: 'PaymentMethodList', totalItems: number, items: Array<{ __typename?: 'PaymentMethod', id: string, createdAt: any, updatedAt: any, name: string, code: string, description: string, enabled: boolean, translations: Array<{ __typename?: 'PaymentMethodTranslation', id: string, languageCode: LanguageCode, name: string, description: string }>, checker?: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } | null, handler: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } }> } }; export type GetPaymentMethodOperationsQueryVariables = Exact<{ [key: string]: never; }>; @@ -7381,21 +7398,21 @@ export type GetPaymentMethodQueryVariables = Exact<{ }>; -export type GetPaymentMethodQuery = { paymentMethod?: { __typename?: 'PaymentMethod', id: string, createdAt: any, updatedAt: any, name: string, code: string, description: string, enabled: boolean, checker?: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } | null, handler: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } } | null }; +export type GetPaymentMethodQuery = { paymentMethod?: { __typename?: 'PaymentMethod', id: string, createdAt: any, updatedAt: any, name: string, code: string, description: string, enabled: boolean, translations: Array<{ __typename?: 'PaymentMethodTranslation', id: string, languageCode: LanguageCode, name: string, description: string }>, checker?: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } | null, handler: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } } | null }; export type CreatePaymentMethodMutationVariables = Exact<{ input: CreatePaymentMethodInput; }>; -export type CreatePaymentMethodMutation = { createPaymentMethod: { __typename?: 'PaymentMethod', id: string, createdAt: any, updatedAt: any, name: string, code: string, description: string, enabled: boolean, checker?: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } | null, handler: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } } }; +export type CreatePaymentMethodMutation = { createPaymentMethod: { __typename?: 'PaymentMethod', id: string, createdAt: any, updatedAt: any, name: string, code: string, description: string, enabled: boolean, translations: Array<{ __typename?: 'PaymentMethodTranslation', id: string, languageCode: LanguageCode, name: string, description: string }>, checker?: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } | null, handler: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } } }; export type UpdatePaymentMethodMutationVariables = Exact<{ input: UpdatePaymentMethodInput; }>; -export type UpdatePaymentMethodMutation = { updatePaymentMethod: { __typename?: 'PaymentMethod', id: string, createdAt: any, updatedAt: any, name: string, code: string, description: string, enabled: boolean, checker?: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } | null, handler: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } } }; +export type UpdatePaymentMethodMutation = { updatePaymentMethod: { __typename?: 'PaymentMethod', id: string, createdAt: any, updatedAt: any, name: string, code: string, description: string, enabled: boolean, translations: Array<{ __typename?: 'PaymentMethodTranslation', id: string, languageCode: LanguageCode, name: string, description: string }>, checker?: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } | null, handler: { __typename?: 'ConfigurableOperation', code: string, args: Array<{ __typename?: 'ConfigArg', name: string, value: string }> } } }; export type DeletePaymentMethodMutationVariables = Exact<{ id: Scalars['ID']; diff --git a/packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts b/packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts index 851734b2f1..93d09879c4 100644 --- a/packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts +++ b/packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts @@ -469,6 +469,12 @@ export const PAYMENT_METHOD_FRAGMENT = gql` code description enabled + translations { + id + languageCode + name + description + } checker { ...ConfigurableOperation } diff --git a/packages/admin-ui/src/lib/core/src/data/providers/settings-data.service.ts b/packages/admin-ui/src/lib/core/src/data/providers/settings-data.service.ts index 4513410fda..2c0442a1bd 100644 --- a/packages/admin-ui/src/lib/core/src/data/providers/settings-data.service.ts +++ b/packages/admin-ui/src/lib/core/src/data/providers/settings-data.service.ts @@ -389,7 +389,7 @@ export class SettingsDataService { Codegen.CreatePaymentMethodMutation, Codegen.CreatePaymentMethodMutationVariables >(CREATE_PAYMENT_METHOD, { - input, + input: pick(input, ['code', 'checker', 'handler', 'enabled', 'translations', 'customFields']), }); } @@ -398,7 +398,15 @@ export class SettingsDataService { Codegen.UpdatePaymentMethodMutation, Codegen.UpdatePaymentMethodMutationVariables >(UPDATE_PAYMENT_METHOD, { - input, + input: pick(input, [ + 'id', + 'code', + 'checker', + 'handler', + 'enabled', + 'translations', + 'customFields', + ]), }); } diff --git a/packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.html b/packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.html index 2998a5a9d9..36c4c22094 100644 --- a/packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.html +++ b/packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.html @@ -1,6 +1,12 @@ + diff --git a/packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.ts b/packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.ts index 35c66e6b93..2d1d3eb4d4 100644 --- a/packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.ts +++ b/packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.ts @@ -7,15 +7,21 @@ import { configurableDefinitionToInstance, ConfigurableOperation, ConfigurableOperationDefinition, + CreateFacetInput, CreatePaymentMethodInput, + createUpdatedTranslatable, CustomFieldConfig, DataService, + FacetWithValuesFragment, + findTranslation, getConfigArgValue, + LanguageCode, NotificationService, PaymentMethodFragment, Permission, ServerConfigService, toConfigurableOperationInput, + UpdateFacetInput, UpdatePaymentMethodInput, } from '@vendure/admin-ui/core'; import { normalizeString } from '@vendure/common/lib/normalize-string'; @@ -145,22 +151,17 @@ export class PaymentMethodDetailComponent if (!selectedHandler) { return; } - this.entity$ + combineLatest(this.entity$, this.languageCode$) .pipe( take(1), - mergeMap(({ id }) => { - const formValue = this.detailForm.value; - const input: CreatePaymentMethodInput = { - name: formValue.name, - code: formValue.code, - description: formValue.description, - enabled: formValue.enabled, - checker: selectedChecker - ? toConfigurableOperationInput(selectedChecker, formValue.checker) - : null, - handler: toConfigurableOperationInput(selectedHandler, formValue.handler), - customFields: formValue.customFields, - }; + mergeMap(([paymentMethod, languageCode]) => { + const input = this.getUpdatedPaymentMethod( + paymentMethod, + this.detailForm, + languageCode, + selectedHandler, + selectedChecker, + ) as CreatePaymentMethodInput; return this.dataService.settings.createPaymentMethod(input); }), ) @@ -187,23 +188,17 @@ export class PaymentMethodDetailComponent if (!selectedHandler) { return; } - this.entity$ + combineLatest(this.entity$, this.languageCode$) .pipe( take(1), - mergeMap(({ id }) => { - const formValue = this.detailForm.value; - const input: UpdatePaymentMethodInput = { - id, - name: formValue.name, - code: formValue.code, - description: formValue.description, - enabled: formValue.enabled, - checker: selectedChecker - ? toConfigurableOperationInput(selectedChecker, formValue.checker) - : null, - handler: toConfigurableOperationInput(selectedHandler, formValue.handler), - customFields: formValue.customFields, - }; + mergeMap(([paymentMethod, languageCode]) => { + const input = this.getUpdatedPaymentMethod( + paymentMethod, + this.detailForm, + languageCode, + selectedHandler, + selectedChecker, + ) as UpdatePaymentMethodInput; return this.dataService.settings.updatePaymentMethod(input); }), ) @@ -223,11 +218,43 @@ export class PaymentMethodDetailComponent ); } - protected setFormValues(paymentMethod: PaymentMethodFragment): void { + /** + * Given a facet and the value of the detailForm, this method creates an updated copy of the facet which + * can then be persisted to the API. + */ + private getUpdatedPaymentMethod( + paymentMethod: PaymentMethodFragment, + formGroup: FormGroup, + languageCode: LanguageCode, + selectedHandler: ConfigurableOperation, + selectedChecker?: ConfigurableOperation | null, + ): UpdatePaymentMethodInput | CreatePaymentMethodInput { + const input = createUpdatedTranslatable({ + translatable: paymentMethod, + updatedFields: formGroup.value, + customFieldConfig: this.customFields, + languageCode, + defaultTranslation: { + languageCode, + name: paymentMethod.name || '', + description: paymentMethod.description || '', + }, + }); + return { + ...input, + checker: selectedChecker + ? toConfigurableOperationInput(selectedChecker, formGroup.value.checker) + : null, + handler: toConfigurableOperationInput(selectedHandler, formGroup.value.handler), + }; + } + + protected setFormValues(paymentMethod: PaymentMethodFragment, languageCode: LanguageCode): void { + const currentTranslation = findTranslation(paymentMethod, languageCode); this.detailForm.patchValue({ - name: paymentMethod.name, + name: currentTranslation?.name, code: paymentMethod.code, - description: paymentMethod.description, + description: currentTranslation?.description, enabled: paymentMethod.enabled, checker: paymentMethod.checker || {}, handler: paymentMethod.handler || {}, diff --git a/packages/admin-ui/src/lib/settings/src/providers/routing/payment-method-resolver.ts b/packages/admin-ui/src/lib/settings/src/providers/routing/payment-method-resolver.ts index 6bef758729..ea7dcdbb69 100644 --- a/packages/admin-ui/src/lib/settings/src/providers/routing/payment-method-resolver.ts +++ b/packages/admin-ui/src/lib/settings/src/providers/routing/payment-method-resolver.ts @@ -23,6 +23,7 @@ export class PaymentMethodResolver extends BaseEntityResolver dataService.settings.getPaymentMethod(id).mapStream(data => data.paymentMethod), );