SAP / spartacus

Spartacus is a lean, Angular-based JavaScript storefront for SAP Commerce Cloud that communicates exclusively through the Commerce REST API.
Apache License 2.0
744 stars 389 forks source link

06c: Use translations in TS code #1809

Closed Platonn closed 5 years ago

Platonn commented 5 years ago

Use TranslateService in TS classes:

  1. component's implementations
  2. Page Meta Resolvers (search files for phrase extends PageMetaResolver)
  3. Http Error Handlers (search files for phrase extends HttpErrorHandler)
  4. anything else you find

When posible, it would be good to firstly move hardcoded text from code to HTML template, and then to translate it using cxTranslate pipe. When it's not possible, we have to use asynchronous TranslationService.translate method in the code.

Pucek9 commented 5 years ago

Please use convention proposed in #1962

mirkosoft commented 5 years ago

Hardcoded string that has been founded so far in the TS files:

projects/core/src/global-message/http-interceptors/handlers/bad-gateway.handler.ts
projects/core/src/global-message/http-interceptors/handlers/bad-request.handler.ts
...
projects/core/src/store-finder/facade/store-data.service.ts
projects/core/src/user/store/effects/forgot-password.effect.ts
projects/core/src/user/store/effects/reset-password.effect.ts
projects/core/src/user/store/effects/user-addresses.effect.ts
projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/container/multi-step-checkout.component.ts
projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/payment-method/payment-method.component.ts
projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/review-submit/review-submit.component.ts
projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/shipping-address/address-form/address-form.component.ts
projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/shipping-address/shipping-address.component.ts
projects/storefrontlib/src/lib/checkout/components/order-confirmation/order-confirmation.component.ts
projects/storefrontlib/src/lib/my-account/order/order-details/order-detail-shipping/order-detail-shipping.component.ts
projects/storefrontlib/src/lib/my-account/order/order-history/order-history.component.ts
projects/storefrontlib/src/lib/my-account/update-email/update-email.component.ts
projects/storefrontlib/src/lib/my-account/payment-methods/components/payment-methods.component.ts
projects/storefrontlib/src/lib/my-account/update-password/components/update-password/update-password.component.ts
projects/storefrontlib/src/lib/my-account/update-profile/update-profile.component.ts
projects/storefrontlib/src/lib/product/components/product-list/container/product-list.component.ts
projects/storefrontlib/src/lib/pwa/services/add-to-home-screen.service.ts
projects/storefrontlib/src/lib/ui/images/missingProduct.ts
projects/storefrontlib/src/lib/user/register/register.component.ts
projects/storefrontlib/src/lib/cms-lib/breadcrumb/breadcrumb.component.ts
mirkosoft commented 5 years ago

For the page meta resolvers: projects/core/src/checkout/services/checkout-page-meta.resolver.ts (return Checkout ${cart.totalItems} items;) projects/core/src/product/services/category-page-meta.resolver.ts (return ${data.pagination.totalResults} results for ${data.breadcrumbs[0].facetValueName};) projects/core/src/product/services/search-page-meta.resolver.ts (return ${total} results for "${part}";)

mirkosoft commented 5 years ago

templates: projects/storefrontlib/src/lib/cms-lib/mini-cart/mini-cart.component.html - aria labels are not translated projects/storefrontlib/src/lib/ui/components/card/card.component.html - this may need some refactoring to move interpolated phrases to templates - otherwise we will have to use async translation in the TS file. projects/storefrontlib/src/lib/ui/components/pagination-and-sorting/sorting/sorting.component.html - for this we have to find out are OrderHistoryListWsDTO.sorts come already translated

mirkosoft commented 5 years ago

Changes has been pushed to feature/GH-1809_use-translations-in-TS branch. Few things came up during the work:

  1. Global messaging needs additional handling for cases where message comes from the backend - we have to support both translated and hardcoded texts for adding a message. Will create a ticket for that.
  2. Multistep checkout components are not touched as there is another epic for extensible checkout. Will check what is the best/smoother way of combining both streams of work.
  3. <cx-card> and <cx-sorting> has been also equipped with cxTranslate but we need to ensure/handle situations where the input data come from backend (OrderHistoryListWsDTO.sorts). Also chceckout use those components (see above).
  4. Page meta resolvers aren't completed yet (didn't found out yet how to translate those either in the UI or TS).
mirkosoft commented 5 years ago

This blocked temporary because of this new issue: https://github.com/SAP/cloud-commerce-spartacus-storefront/issues/2121 Basically there is a need for handling both keys as well as plain strings by cxTranslate pipe.

Xymmer commented 5 years ago

GH-2121 is done, no longer blocked

mirkosoft commented 5 years ago

Closing this as all parts are already done/covered by other ticktets: #2438 #2371 #2401 #2210 #2192