feat(admin-ui): Add support for translatable PaymentMethods

Relates to #1184

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -745,10 +745,9 @@ export type CreatePaymentMethodInput = {
   checker?: InputMaybe<ConfigurableOperationInput>;
   code: Scalars['String'];
   customFields?: InputMaybe<Scalars['JSON']>;
-  description?: InputMaybe<Scalars['String']>;
   enabled: Scalars['Boolean'];
   handler: ConfigurableOperationInput;
-  name: Scalars['String'];
+  translations: Array<PaymentMethodTranslationInput>;
 };
 
 export type CreateProductInput = {
@@ -3884,6 +3883,7 @@ export type PaymentMethod = Node & {
   handler: ConfigurableOperation;
   id: Scalars['ID'];
   name: Scalars['String'];
+  translations: Array<PaymentMethodTranslation>;
   updatedAt: Scalars['DateTime'];
 };
 
@@ -3946,6 +3946,24 @@ export type PaymentMethodSortParameter = {
   updatedAt?: InputMaybe<SortOrder>;
 };
 
+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<Scalars['JSON']>;
+  description?: InputMaybe<Scalars['String']>;
+  id?: InputMaybe<Scalars['ID']>;
+  languageCode: LanguageCode;
+  name?: InputMaybe<Scalars['String']>;
+};
+
 /** 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<ConfigurableOperationInput>;
   code?: InputMaybe<Scalars['String']>;
   customFields?: InputMaybe<Scalars['JSON']>;
-  description?: InputMaybe<Scalars['String']>;
   enabled?: InputMaybe<Scalars['Boolean']>;
   handler?: InputMaybe<ConfigurableOperationInput>;
   id: Scalars['ID'];
-  name?: InputMaybe<Scalars['String']>;
+  translations?: InputMaybe<Array<PaymentMethodTranslationInput>>;
 };
 
 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'];

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
         }

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',
+            ]),
         });
     }
 

packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.html

@@ -1,6 +1,12 @@
 <vdr-action-bar>
     <vdr-ab-left>
         <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
+        <vdr-language-selector
+            [disabled]="isNew$ | async"
+            [availableLanguageCodes]="availableLanguages$ | async"
+            [currentLanguageCode]="languageCode$ | async"
+            (languageCodeChange)="setLanguage($event)"
+        ></vdr-language-selector>
     </vdr-ab-left>
 
     <vdr-ab-right>

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 || {},

packages/admin-ui/src/lib/settings/src/providers/routing/payment-method-resolver.ts

@@ -23,6 +23,7 @@ export class PaymentMethodResolver extends BaseEntityResolver<PaymentMethodFragm
                 enabled: true,
                 checker: undefined as any,
                 handler: undefined as any,
+                translations: [],
             },
             id => dataService.settings.getPaymentMethod(id).mapStream(data => data.paymentMethod),
         );