From e1b3d5b4f391323ff1c0c2cfd5865739f8ffb3b1 Mon Sep 17 00:00:00 2001 From: Dawid Date: Thu, 17 Nov 2022 15:14:45 +0100 Subject: [PATCH] Add names of attributes translations (#2566) * Add names of attributes translations * Support plain text attributes translation * Fix translation field type * Refactor attribute translations input data * Refactor translation fields code * Fix translation fields invalid skeleton display --- introspection.json | 16 +++ locale/defaultMessages.json | 8 +- schema.graphql | 3 + src/fragments/translations.ts | 98 ++++++----------- src/graphql/hooks.generated.ts | 102 ++++++------------ src/graphql/typePolicies.generated.ts | 6 +- src/graphql/types.generated.ts | 28 ++--- .../TranslationFields/TranslationFields.tsx | 13 ++- .../TranslationsPagesPage.tsx | 32 ++---- .../TranslationsProductVariantsPage.tsx | 26 ++--- .../TranslationsProductsPage.tsx | 32 ++---- src/translations/types.ts | 10 +- src/translations/utils.ts | 42 +++++++- src/translations/views/TranslationsPages.tsx | 11 +- .../views/TranslationsProductVariants.tsx | 11 +- .../views/TranslationsProducts.tsx | 11 +- 16 files changed, 206 insertions(+), 243 deletions(-) diff --git a/introspection.json b/introspection.json index e4348c7ac..5328820ca 100644 --- a/introspection.json +++ b/introspection.json @@ -9357,6 +9357,22 @@ "isDeprecated": false, "deprecationReason": null }, + { + "name": "attribute", + "description": "Represents a value of an attribute.", + "args": [], + "type": { + "kind": "NON_NULL", + "name": null, + "ofType": { + "kind": "OBJECT", + "name": "AttributeTranslatableContent", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null + }, { "name": "attributeValue", "description": "Represents a value of an attribute.", diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 4e8533c47..b12a37964 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -3497,10 +3497,6 @@ "context": "window title", "string": "Create Product" }, - "PajjqE": { - "context": "attribute list", - "string": "Attribute {number}" - }, "PbQJY5": { "context": "section header", "string": "Saleor Apps" @@ -7984,6 +7980,10 @@ "context": "attribute type", "string": "Content Attribute" }, + "zgqPGF": { + "context": "attribute list", + "string": "Attribute {name}" + }, "zjHH6b": { "context": "sale start date", "string": "Started" diff --git a/schema.graphql b/schema.graphql index e1d2fc144..1b0f8513d 100644 --- a/schema.graphql +++ b/schema.graphql @@ -1881,6 +1881,9 @@ type AttributeValueTranslatableContent implements Node { languageCode: LanguageCodeEnum! ): AttributeValueTranslation + """Represents an attribute.""" + attribute: Attribute! + """Represents a value of an attribute.""" attributeValue: AttributeValue @deprecated(reason: "This field will be removed in Saleor 4.0. Get model fields from the root level queries.") diff --git a/src/fragments/translations.ts b/src/fragments/translations.ts index f92eeb539..8762dd3b8 100644 --- a/src/fragments/translations.ts +++ b/src/fragments/translations.ts @@ -1,5 +1,31 @@ import { gql } from "@apollo/client"; +export const attributeValueTranslatableFragment = gql` + fragment AttributeValueTranslatable on AttributeValueTranslatableContent { + id + name + plainText + richText + attributeValue { + id + } + attribute { + id + name + } + translation(languageCode: $language) { + id + name + plainText + richText + language { + code + language + } + } + } +`; + export const categoryTranslationFragment = gql` fragment CategoryTranslation on CategoryTranslatableContent { translation(languageCode: $language) { @@ -64,21 +90,7 @@ export const productTranslationFragment = gql` } } attributeValues { - id - name - richText - attributeValue { - id - } - translation(languageCode: $language) { - id - name - richText - language { - code - language - } - } + ...AttributeValueTranslatable } } `; @@ -98,21 +110,7 @@ export const productVariantTranslationFragment = gql` } } attributeValues { - id - name - richText - attributeValue { - id - } - translation(languageCode: $language) { - id - name - richText - language { - code - language - } - } + ...AttributeValueTranslatable } } `; @@ -191,21 +189,7 @@ export const pageTranslationFragment = gql` } } attributeValues { - id - name - richText - attributeValue { - id - } - translation(languageCode: $language) { - id - name - richText - language { - code - language - } - } + ...AttributeValueTranslatable } } `; @@ -240,11 +224,13 @@ export const attributeChoicesTranslationFragment = gql` node { id name + plainText richText inputType translation(languageCode: $language) { id name + plainText richText } } @@ -291,28 +277,6 @@ export const attributeTranslationDetailsFragment = gql` } `; -export const attributeValueTranslatableContentFragment = gql` - fragment AttributeValueTranslatableContent on AttributeTranslatableContent { - translation(languageCode: $language) { - id - name - } - attribute { - id - name - inputType - choices( - first: $firstValues - after: $afterValues - last: $lastValues - before: $beforeValues - ) { - ...AttributeChoicesTranslation - } - } - } -`; - export const menuItemTranslationFragment = gql` fragment MenuItemTranslation on MenuItemTranslatableContent { translation(languageCode: $language) { diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts index 035ff2f31..dcb20dccf 100644 --- a/src/graphql/hooks.generated.ts +++ b/src/graphql/hooks.generated.ts @@ -2505,6 +2505,31 @@ export const CollectionTranslationFragmentDoc = gql` } } `; +export const AttributeValueTranslatableFragmentDoc = gql` + fragment AttributeValueTranslatable on AttributeValueTranslatableContent { + id + name + plainText + richText + attributeValue { + id + } + attribute { + id + name + } + translation(languageCode: $language) { + id + name + plainText + richText + language { + code + language + } + } +} + `; export const ProductTranslationFragmentDoc = gql` fragment ProductTranslation on ProductTranslatableContent { product { @@ -2526,24 +2551,10 @@ export const ProductTranslationFragmentDoc = gql` } } attributeValues { - id - name - richText - attributeValue { - id - } - translation(languageCode: $language) { - id - name - richText - language { - code - language - } - } + ...AttributeValueTranslatable } } - `; + ${AttributeValueTranslatableFragmentDoc}`; export const ProductVariantTranslationFragmentDoc = gql` fragment ProductVariantTranslation on ProductVariantTranslatableContent { productVariant { @@ -2559,24 +2570,10 @@ export const ProductVariantTranslationFragmentDoc = gql` } } attributeValues { - id - name - richText - attributeValue { - id - } - translation(languageCode: $language) { - id - name - richText - language { - code - language - } - } + ...AttributeValueTranslatable } } - `; + ${AttributeValueTranslatableFragmentDoc}`; export const SaleTranslationFragmentDoc = gql` fragment SaleTranslation on SaleTranslatableContent { sale { @@ -2650,24 +2647,10 @@ export const PageTranslationFragmentDoc = gql` } } attributeValues { - id - name - richText - attributeValue { - id - } - translation(languageCode: $language) { - id - name - richText - language { - code - language - } - } + ...AttributeValueTranslatable } } - `; + ${AttributeValueTranslatableFragmentDoc}`; export const PageTranslatableFragmentDoc = gql` fragment PageTranslatable on PageTranslatableContent { id @@ -2713,11 +2696,13 @@ export const AttributeChoicesTranslationFragmentDoc = gql` node { id name + plainText richText inputType translation(languageCode: $language) { id name + plainText richText } } @@ -2746,27 +2731,6 @@ export const AttributeTranslationDetailsFragmentDoc = gql` } } ${AttributeChoicesTranslationFragmentDoc}`; -export const AttributeValueTranslatableContentFragmentDoc = gql` - fragment AttributeValueTranslatableContent on AttributeTranslatableContent { - translation(languageCode: $language) { - id - name - } - attribute { - id - name - inputType - choices( - first: $firstValues - after: $afterValues - last: $lastValues - before: $beforeValues - ) { - ...AttributeChoicesTranslation - } - } -} - ${AttributeChoicesTranslationFragmentDoc}`; export const MenuItemTranslationFragmentDoc = gql` fragment MenuItemTranslation on MenuItemTranslatableContent { translation(languageCode: $language) { diff --git a/src/graphql/typePolicies.generated.ts b/src/graphql/typePolicies.generated.ts index 1ff690cd2..2a2d58ebb 100644 --- a/src/graphql/typePolicies.generated.ts +++ b/src/graphql/typePolicies.generated.ts @@ -549,15 +549,15 @@ export type AttributeValueDeletedFieldPolicy = { recipient?: FieldPolicy | FieldReadFunction, attributeValue?: FieldPolicy | FieldReadFunction }; -export type AttributeValueTranslatableContentKeySpecifier = ('id' | 'name' | 'richText' | 'plainText' | 'translation' | 'attributeValue' | 'attribute' | AttributeValueTranslatableContentKeySpecifier)[]; +export type AttributeValueTranslatableContentKeySpecifier = ('id' | 'name' | 'richText' | 'plainText' | 'translation' | 'attribute' | 'attributeValue' | AttributeValueTranslatableContentKeySpecifier)[]; export type AttributeValueTranslatableContentFieldPolicy = { id?: FieldPolicy | FieldReadFunction, name?: FieldPolicy | FieldReadFunction, richText?: FieldPolicy | FieldReadFunction, plainText?: FieldPolicy | FieldReadFunction, translation?: FieldPolicy | FieldReadFunction, - attributeValue?: FieldPolicy | FieldReadFunction, - attribute?: FieldPolicy | FieldReadFunction + attribute?: FieldPolicy | FieldReadFunction, + attributeValue?: FieldPolicy | FieldReadFunction }; export type AttributeValueTranslateKeySpecifier = ('translationErrors' | 'errors' | 'attributeValue' | AttributeValueTranslateKeySpecifier)[]; export type AttributeValueTranslateFieldPolicy = { diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts index 03d0eb777..4eee103a1 100644 --- a/src/graphql/types.generated.ts +++ b/src/graphql/types.generated.ts @@ -7413,13 +7413,15 @@ export type TaxClassFragment = { __typename: 'TaxClass', id: string, name: strin export type TimePeriodFragment = { __typename: 'TimePeriod', amount: number, type: TimePeriodTypeEnum }; +export type AttributeValueTranslatableFragment = { __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string }, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }; + export type CategoryTranslationFragment = { __typename: 'CategoryTranslatableContent', translation: { __typename: 'CategoryTranslation', id: string, description: any | null, name: string | null, seoDescription: string | null, seoTitle: string | null, language: { __typename: 'LanguageDisplay', language: string } } | null, category: { __typename: 'Category', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null }; export type CollectionTranslationFragment = { __typename: 'CollectionTranslatableContent', collection: { __typename: 'Collection', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'CollectionTranslation', id: string, description: any | null, name: string | null, seoDescription: string | null, seoTitle: string | null, language: { __typename: 'LanguageDisplay', language: string } } | null }; -export type ProductTranslationFragment = { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> }; +export type ProductTranslationFragment = { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> }; -export type ProductVariantTranslationFragment = { __typename: 'ProductVariantTranslatableContent', name: string, productVariant: { __typename: 'ProductVariant', id: string } | null, translation: { __typename: 'ProductVariantTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> }; +export type ProductVariantTranslationFragment = { __typename: 'ProductVariantTranslatableContent', name: string, productVariant: { __typename: 'ProductVariant', id: string } | null, translation: { __typename: 'ProductVariantTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> }; export type SaleTranslationFragment = { __typename: 'SaleTranslatableContent', sale: { __typename: 'Sale', id: string, name: string } | null, translation: { __typename: 'SaleTranslation', id: string, name: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }; @@ -7427,17 +7429,15 @@ export type VoucherTranslationFragment = { __typename: 'VoucherTranslatableConte export type ShippingMethodTranslationFragment = { __typename: 'ShippingMethodTranslatableContent', id: string, name: string, description: any | null, shippingMethod: { __typename: 'ShippingMethodType', id: string } | null, translation: { __typename: 'ShippingMethodTranslation', id: string, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }; -export type PageTranslationFragment = { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> }; +export type PageTranslationFragment = { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> }; export type PageTranslatableFragment = { __typename: 'PageTranslatableContent', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }; -export type AttributeChoicesTranslationFragment = { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null } | null } }> }; +export type AttributeChoicesTranslationFragment = { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, plainText: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null } | null } }> }; export type AttributeTranslationFragment = { __typename: 'AttributeTranslatableContent', id: string, name: string, translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null } | null }; -export type AttributeTranslationDetailsFragment = { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, withChoices: boolean, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null } | null } }> } | null } | null }; - -export type AttributeValueTranslatableContentFragment = { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null } | null } }> } | null } | null }; +export type AttributeTranslationDetailsFragment = { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, withChoices: boolean, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, plainText: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null } | null } }> } | null } | null }; export type MenuItemTranslationFragment = { __typename: 'MenuItemTranslatableContent', translation: { __typename: 'MenuItemTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', language: string } } | null, menuItem: { __typename: 'MenuItem', id: string, name: string } | null }; @@ -9093,7 +9093,7 @@ export type UpdatePageTranslationsMutationVariables = Exact<{ }>; -export type UpdatePageTranslationsMutation = { __typename: 'Mutation', pageTranslate: { __typename: 'PageTranslate', errors: Array<{ __typename: 'TranslationError', code: TranslationErrorCode, field: string | null, message: string | null }>, page: { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | null } | null }; +export type UpdatePageTranslationsMutation = { __typename: 'Mutation', pageTranslate: { __typename: 'PageTranslate', errors: Array<{ __typename: 'TranslationError', code: TranslationErrorCode, field: string | null, message: string | null }>, page: { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | null } | null }; export type UpdateVoucherTranslationsMutationVariables = Exact<{ id: Scalars['ID']; @@ -9180,7 +9180,7 @@ export type ProductTranslationsQueryVariables = Exact<{ }>; -export type ProductTranslationsQuery = { __typename: 'Query', translations: { __typename: 'TranslatableItemConnection', edges: Array<{ __typename: 'TranslatableItemEdge', node: { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null }; +export type ProductTranslationsQuery = { __typename: 'Query', translations: { __typename: 'TranslatableItemConnection', edges: Array<{ __typename: 'TranslatableItemEdge', node: { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null }; export type PageTranslationsQueryVariables = Exact<{ language: LanguageCodeEnum; @@ -9191,7 +9191,7 @@ export type PageTranslationsQueryVariables = Exact<{ }>; -export type PageTranslationsQuery = { __typename: 'Query', translations: { __typename: 'TranslatableItemConnection', edges: Array<{ __typename: 'TranslatableItemEdge', node: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null }; +export type PageTranslationsQuery = { __typename: 'Query', translations: { __typename: 'TranslatableItemConnection', edges: Array<{ __typename: 'TranslatableItemEdge', node: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null }; export type VoucherTranslationsQueryVariables = Exact<{ language: LanguageCodeEnum; @@ -9254,7 +9254,7 @@ export type ProductTranslationDetailsQueryVariables = Exact<{ }>; -export type ProductTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; +export type ProductTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent', product: { __typename: 'Product', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'ProductTranslation', id: string, seoTitle: string | null, seoDescription: string | null, name: string | null, description: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; export type ProductVariantListQueryVariables = Exact<{ id: Scalars['ID']; @@ -9269,7 +9269,7 @@ export type ProductVariantTranslationDetailsQueryVariables = Exact<{ }>; -export type ProductVariantTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent', name: string, productVariant: { __typename: 'ProductVariant', id: string } | null, translation: { __typename: 'ProductVariantTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; +export type ProductVariantTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent', name: string, productVariant: { __typename: 'ProductVariant', id: string } | null, translation: { __typename: 'ProductVariantTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; export type CategoryTranslationDetailsQueryVariables = Exact<{ id: Scalars['ID']; @@ -9293,7 +9293,7 @@ export type PageTranslationDetailsQueryVariables = Exact<{ }>; -export type PageTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; +export type PageTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent' } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent', page: { __typename: 'Page', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string } | null, translation: { __typename: 'PageTranslation', id: string, content: any | null, seoDescription: string | null, seoTitle: string | null, title: string | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null, attributeValues: Array<{ __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null }> } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; export type SaleTranslationDetailsQueryVariables = Exact<{ id: Scalars['ID']; @@ -9321,7 +9321,7 @@ export type AttributeTranslationDetailsQueryVariables = Exact<{ }>; -export type AttributeTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, withChoices: boolean, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, richText: any | null } | null } }> } | null } | null } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; +export type AttributeTranslationDetailsQuery = { __typename: 'Query', translation: { __typename: 'ProductTranslatableContent' } | { __typename: 'CollectionTranslatableContent' } | { __typename: 'CategoryTranslatableContent' } | { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, withChoices: boolean, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, plainText: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null } | null } }> } | null } | null } | { __typename: 'AttributeValueTranslatableContent' } | { __typename: 'ProductVariantTranslatableContent' } | { __typename: 'PageTranslatableContent' } | { __typename: 'ShippingMethodTranslatableContent' } | { __typename: 'SaleTranslatableContent' } | { __typename: 'VoucherTranslatableContent' } | { __typename: 'MenuItemTranslatableContent' } | null }; export type ShippingMethodTranslationDetailsQueryVariables = Exact<{ id: Scalars['ID']; diff --git a/src/translations/components/TranslationFields/TranslationFields.tsx b/src/translations/components/TranslationFields/TranslationFields.tsx index 9a219400a..2b99f7845 100644 --- a/src/translations/components/TranslationFields/TranslationFields.tsx +++ b/src/translations/components/TranslationFields/TranslationFields.tsx @@ -14,7 +14,10 @@ import { IconButton, makeStyles, } from "@saleor/macaw-ui"; -import { TranslationField } from "@saleor/translations/types"; +import { + TranslationField, + TranslationFieldType, +} from "@saleor/translations/types"; import { ListProps } from "@saleor/types"; import classNames from "classnames"; import React from "react"; @@ -178,7 +181,7 @@ const TranslationFields: React.FC = props => {
{field && field.value !== undefined ? ( - field.type === "short" ? ( + field.type === TranslationFieldType.SHORT ? ( = props => { onDiscard={onDiscard} onSubmit={undefined} /> - ) : field.type === "long" ? ( + ) : field.type === TranslationFieldType.LONG ? ( = props => {
{field && field.translation !== undefined ? ( - field.type === "short" ? ( + field.type === TranslationFieldType.SHORT ? ( = props => { onDiscard={onDiscard} onSubmit={data => onSubmit(field, data)} /> - ) : field.type === "long" ? ( + ) : field.type === TranslationFieldType.LONG ? ( = ({ }), name: PageTranslationInputFieldName.title, translation: data?.translation?.title || null, - type: "short" as "short", + type: "short", value: data?.page?.title, }, { @@ -95,7 +96,7 @@ const TranslationsPagesPage: React.FC = ({ }), name: PageTranslationInputFieldName.content, translation: data?.translation?.content || null, - type: "rich" as "rich", + type: "rich", value: data?.page?.content, }, ]} @@ -123,7 +124,7 @@ const TranslationsPagesPage: React.FC = ({ }), name: PageTranslationInputFieldName.seoTitle, translation: data?.translation?.seoTitle || null, - type: "short" as "short", + type: "short", value: data?.page?.seoTitle, }, { @@ -133,7 +134,7 @@ const TranslationsPagesPage: React.FC = ({ }), name: PageTranslationInputFieldName.seoDescription, translation: data?.translation?.seoDescription || null, - type: "long" as "long", + type: "long", value: data?.page?.seoDescription, }, ]} @@ -151,25 +152,10 @@ const TranslationsPagesPage: React.FC = ({ disabled={disabled} initialState={true} title={intl.formatMessage(commonMessages.translationAttributes)} - fields={ - data.attributeValues.map((attrVal, i) => ({ - id: attrVal.attributeValue.id, - displayName: intl.formatMessage( - { - id: "PajjqE", - defaultMessage: "Attribute {number}", - description: "attribute list", - }, - { - number: i + 1, - }, - ), - name: attrVal?.name, - translation: attrVal?.translation?.richText || null, - type: "rich" as "rich", - value: attrVal?.richText, - })) || [] - } + fields={mapAttributeValuesToTranslationFields( + data.attributeValues, + intl, + )} saveButtonState={saveButtonState} richTextResetKey={languageCode} onEdit={onEdit} diff --git a/src/translations/components/TranslationsProductVariantsPage/TranslationsProductVariantsPage.tsx b/src/translations/components/TranslationsProductVariantsPage/TranslationsProductVariantsPage.tsx index 9f57aad4d..a742af5d8 100644 --- a/src/translations/components/TranslationsProductVariantsPage/TranslationsProductVariantsPage.tsx +++ b/src/translations/components/TranslationsProductVariantsPage/TranslationsProductVariantsPage.tsx @@ -18,6 +18,7 @@ import { productVariantUrl, TranslatableEntities, } from "@saleor/translations/urls"; +import { mapAttributeValuesToTranslationFields } from "@saleor/translations/utils"; import React from "react"; import { useIntl } from "react-intl"; @@ -98,7 +99,7 @@ const TranslationsProductsPage: React.FC = ({ }), name: TranslationInputFieldName.name, translation: data?.translation?.name || null, - type: "short" as "short", + type: "short", value: data?.name, }, ]} @@ -116,25 +117,10 @@ const TranslationsProductsPage: React.FC = ({ disabled={disabled} initialState={true} title={intl.formatMessage(commonMessages.translationAttributes)} - fields={ - data.attributeValues.map((attrVal, i) => ({ - id: attrVal.attributeValue.id, - displayName: intl.formatMessage( - { - id: "PajjqE", - defaultMessage: "Attribute {number}", - description: "attribute list", - }, - { - number: i + 1, - }, - ), - name: attrVal?.name, - translation: attrVal?.translation?.richText || null, - type: "rich" as "rich", - value: attrVal?.richText, - })) || [] - } + fields={mapAttributeValuesToTranslationFields( + data.attributeValues, + intl, + )} saveButtonState={saveButtonState} richTextResetKey={languageCode} onEdit={onEdit} diff --git a/src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx b/src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx index 5bfc927c1..887f5f79a 100644 --- a/src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx +++ b/src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx @@ -15,6 +15,7 @@ import { languageEntityUrl, TranslatableEntities, } from "@saleor/translations/urls"; +import { mapAttributeValuesToTranslationFields } from "@saleor/translations/utils"; import React from "react"; import { useIntl } from "react-intl"; @@ -97,7 +98,7 @@ const TranslationsProductsPage: React.FC = ({ }), name: TranslationInputFieldName.name, translation: data?.translation?.name || null, - type: "short" as "short", + type: "short", value: data?.product?.name, }, { @@ -107,7 +108,7 @@ const TranslationsProductsPage: React.FC = ({ }), name: TranslationInputFieldName.description, translation: data?.translation?.description || null, - type: "rich" as "rich", + type: "rich", value: data?.product?.description, }, ]} @@ -134,7 +135,7 @@ const TranslationsProductsPage: React.FC = ({ }), name: TranslationInputFieldName.seoTitle, translation: data?.translation?.seoTitle || null, - type: "short" as "short", + type: "short", value: data?.product?.seoTitle, }, { @@ -144,7 +145,7 @@ const TranslationsProductsPage: React.FC = ({ }), name: TranslationInputFieldName.seoDescription, translation: data?.translation?.seoDescription || null, - type: "long" as "long", + type: "long", value: data?.product?.seoDescription, }, ]} @@ -162,25 +163,10 @@ const TranslationsProductsPage: React.FC = ({ disabled={disabled} initialState={true} title={intl.formatMessage(commonMessages.translationAttributes)} - fields={ - data.attributeValues.map((attrVal, i) => ({ - id: attrVal.attributeValue.id, - displayName: intl.formatMessage( - { - id: "PajjqE", - defaultMessage: "Attribute {number}", - description: "attribute list", - }, - { - number: i + 1, - }, - ), - name: attrVal?.name, - translation: attrVal?.translation?.richText || null, - type: "rich" as "rich", - value: attrVal?.richText, - })) || [] - } + fields={mapAttributeValuesToTranslationFields( + data.attributeValues, + intl, + )} saveButtonState={saveButtonState} richTextResetKey={languageCode} onEdit={onEdit} diff --git a/src/translations/types.ts b/src/translations/types.ts index 82b6aefcf..7c0d87b41 100644 --- a/src/translations/types.ts +++ b/src/translations/types.ts @@ -19,12 +19,20 @@ export enum PageTranslationInputFieldName { richText = "richText", } +export const TranslationFieldType = { + SHORT: "short", + LONG: "long", + RICH: "rich", +} as const; + +export type TranslationFieldType = typeof TranslationFieldType[keyof typeof TranslationFieldType]; + export interface TranslationField { id?: string; displayName: string; name: T; translation: string; - type: "short" | "long" | "rich"; + type: TranslationFieldType; value: string; } diff --git a/src/translations/utils.ts b/src/translations/utils.ts index feed30376..a2239744f 100644 --- a/src/translations/utils.ts +++ b/src/translations/utils.ts @@ -1,6 +1,13 @@ import { OutputData } from "@editorjs/editorjs"; -import { AttributeTranslationDetailsFragment } from "@saleor/graphql"; -import { TranslationField } from "@saleor/translations/types"; +import { + AttributeTranslationDetailsFragment, + AttributeValueTranslatableFragment, + AttributeValueTranslationInput, +} from "@saleor/graphql"; +import { + TranslationField, + TranslationFieldType, +} from "@saleor/translations/types"; import { mapEdgesToItems } from "@saleor/utils/maps"; import { getParsedDataForJsonStringField } from "@saleor/utils/richText/misc"; import { IntlShape } from "react-intl"; @@ -52,3 +59,34 @@ export const getTranslationFields = ( }; }, ) || []; + +export const mapAttributeValuesToTranslationFields = ( + attributeValues: AttributeValueTranslatableFragment[], + intl: IntlShape, +) => + attributeValues.map(attrVal => ({ + id: attrVal.attributeValue.id, + displayName: intl.formatMessage( + { + id: "zgqPGF", + defaultMessage: "Attribute {name}", + description: "attribute list", + }, + { + name: attrVal.attribute.name, + }, + ), + name: attrVal.name, + translation: + attrVal.translation?.richText || attrVal.translation?.plainText || null, + type: attrVal.richText ? "rich" : "short", + value: attrVal.richText || attrVal.plainText, + })) || []; + +export const getAttributeValueTranslationsInputData = ( + type: TranslationFieldType, + data: OutputData | string, +): AttributeValueTranslationInput => + type === TranslationFieldType.RICH + ? { richText: JSON.stringify(data) } + : { plainText: data as string }; diff --git a/src/translations/views/TranslationsPages.tsx b/src/translations/views/TranslationsPages.tsx index 2e77607cf..ba6421fe0 100644 --- a/src/translations/views/TranslationsPages.tsx +++ b/src/translations/views/TranslationsPages.tsx @@ -16,7 +16,10 @@ import { useIntl } from "react-intl"; import TranslationsPagesPage from "../components/TranslationsPagesPage"; import { PageTranslationInputFieldName, TranslationField } from "../types"; -import { getParsedTranslationInputData } from "../utils"; +import { + getAttributeValueTranslationsInputData, + getParsedTranslationInputData, +} from "../utils"; export interface TranslationsPagesQueryParams { activeField: string; @@ -96,14 +99,14 @@ const TranslationsPages: React.FC = ({ ); const handleAttributeValueSubmit = ( - { id }: TranslationField, - data: OutputData, + { id, type }: TranslationField, + data: OutputData | string, ) => extractMutationErrors( updateAttributeValueTranslations({ variables: { id, - input: { richText: JSON.stringify(data) }, + input: getAttributeValueTranslationsInputData(type, data), language: languageCode, }, }), diff --git a/src/translations/views/TranslationsProductVariants.tsx b/src/translations/views/TranslationsProductVariants.tsx index 79fe1d291..9423f991f 100644 --- a/src/translations/views/TranslationsProductVariants.tsx +++ b/src/translations/views/TranslationsProductVariants.tsx @@ -16,7 +16,10 @@ import { useIntl } from "react-intl"; import { extractMutationErrors, maybe } from "../../misc"; import TranslationsProductVariantsPage from "../components/TranslationsProductVariantsPage"; import { TranslationField, TranslationInputFieldName } from "../types"; -import { getParsedTranslationInputData } from "../utils"; +import { + getAttributeValueTranslationsInputData, + getParsedTranslationInputData, +} from "../utils"; export interface TranslationsProductVariantsQueryParams { activeField: string; @@ -98,14 +101,14 @@ const TranslationsProductVariants: React.FC = ); const handleAttributeValueSubmit = ( - { id }: TranslationField, - data: OutputData, + { id, type }: TranslationField, + data: OutputData | string, ) => extractMutationErrors( updateAttributeValueTranslations({ variables: { id, - input: { richText: JSON.stringify(data) }, + input: getAttributeValueTranslationsInputData(type, data), language: languageCode, }, }), diff --git a/src/translations/views/TranslationsProducts.tsx b/src/translations/views/TranslationsProducts.tsx index 438889360..3355aee74 100644 --- a/src/translations/views/TranslationsProducts.tsx +++ b/src/translations/views/TranslationsProducts.tsx @@ -16,7 +16,10 @@ import { useIntl } from "react-intl"; import { extractMutationErrors, maybe } from "../../misc"; import TranslationsProductsPage from "../components/TranslationsProductsPage"; import { TranslationField, TranslationInputFieldName } from "../types"; -import { getParsedTranslationInputData } from "../utils"; +import { + getAttributeValueTranslationsInputData, + getParsedTranslationInputData, +} from "../utils"; export interface TranslationsProductsQueryParams { activeField: string; @@ -96,14 +99,14 @@ const TranslationsProducts: React.FC = ({ ); const handleAttributeValueSubmit = ( - { id }: TranslationField, - data: OutputData, + { id, type }: TranslationField, + data: OutputData | string, ) => extractMutationErrors( updateAttributeValueTranslations({ variables: { id, - input: { richText: JSON.stringify(data) }, + input: getAttributeValueTranslationsInputData(type, data), language: languageCode, }, }),