Merge ccd7413 into 6d0394b

vtex-apps · Apr 17, 2019 · 4bb8dfc · 4bb8dfc
2 parents 6d0394b + ccd7413
commit 4bb8dfc
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Add `defineMessages` for all the messages (only editor messages in this project).
 
 ## [2.8.0] - 2019-03-25
 ### Changed

diff --git a/react/Carousel.tsx b/react/Carousel.tsx
@@ -1,6 +1,7 @@
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
+import { defineMessages } from 'react-intl'
 import { Dots, Slide, Slider, SliderContainer } from 'vtex.slider'
 import { Container } from 'vtex.store-components'
 import { IconCaret } from 'vtex.store-icons'
@@ -38,6 +39,77 @@ interface ArrowContainerProps {
   children: React.ReactNode
 }
 
+const editorMessages = defineMessages({
+  CarouselTitle: {
+    id: 'editor.carousel.title',
+    defaultMessage: ''
+  },
+  CarouselDescription: {
+    id: 'editor.carousel.description',
+    defaultMessage: ''
+  },
+  CarouselShowDotsTitle: {
+    id: 'editor.carousel.showDots.title',
+    defaultMessage: ''
+  },
+  CarouselShowArrowsTitle: {
+    id: 'editor.carousel.showArrows.title',
+    defaultMessage: ''
+  },
+  CarouselHeightTitle: {
+    id: 'editor.carousel.height.title',
+    defaultMessage: ''
+  },
+  CarouselAutoplayTitle: {
+    id: 'editor.carousel.autoplay.title',
+    defaultMessage: ''
+  },
+  CarouselAutoplaySpeedTitle: {
+    id: 'editor.carousel.autoplaySpeed.title',
+    defaultMessage: ''
+  },
+  CarouselBannerLinkPageTitle: {
+    id: 'editor.carousel.bannerLink.page.title',
+    defaultMessage: ''
+  },
+  CarouselBannerLinkParamsTitle: {
+    id: 'editor.carousel.bannerLink.params.title',
+    defaultMessage: ''
+  },
+  CarouselBannerLinkParamsDescription: {
+    id: 'editor.carousel.bannerLink.params.description',
+    defaultMessage: ''
+  },
+  CarouselBannerLinkUrlTitle: {
+    id: 'editor.carousel.bannerLink.url.title',
+    defaultMessage: ''
+  },
+  CarouselBannersTitle: {
+    id: 'editor.carousel.banners.title',
+    defaultMessage: ''
+  },
+  CarouselBannerTitle: {
+    id: 'editor.carousel.banner.title',
+    defaultMessage: ''
+  },
+  CarouselBannerDescriptionTitle: {
+    id: 'editor.carousel.banner.description.title',
+    defaultMessage: ''
+  },
+  CarouselBannerExternalRouteTitle: {
+    id: 'editor.carousel.banner.externalRoute.title',
+    defaultMessage: ''
+  },
+  CarouselBannerImageTitle: {
+    id: 'editor.carousel.banner.image.title',
+    defaultMessage: ''
+  },
+  CarouselBannerMobileImageTitle: {
+    id: 'editor.carousel.banner.mobileImage.title',
+    defaultMessage: ''
+  },
+})
+
 /**
  * Carousel component. Shows a serie of banners.
  */
@@ -101,41 +173,41 @@ export default class Carousel extends Component<Props, State> {
       page: {
         enum: GLOBAL_PAGES,
         isLayout: false,
-        title: 'editor.carousel.bannerLink.page.title',
+        title: editorMessages.CarouselBannerLinkPageTitle.id,
         type: 'string',
       },
       params: {
-        description: 'editor.carousel.bannerLink.params.description',
+        description: editorMessages.CarouselBannerLinkParamsDescription.id,
         isLayout: false,
-        title: 'editor.carousel.bannerLink.params.title',
+        title: editorMessages.CarouselBannerLinkParamsTitle.id,
         type: 'string',
       },
     }
 
     const externalRouteSchema = {
       url: {
         isLayout: false,
-        title: 'editor.carousel.bannerLink.url.title',
+        title: editorMessages.CarouselBannerLinkUrlTitle.id,
         type: 'string',
       },
     }
 
     return {
-      description: 'editor.carousel.description',
+      description: editorMessages.CarouselDescription.id,
       properties: {
         // tslint:disable-line
         autoplay: {
           default: true,
           isLayout: true,
-          title: 'editor.carousel.autoplay.title',
+          title: editorMessages.CarouselAutoplayTitle.id,
           type: 'boolean',
         },
         autoplaySpeed: autoplay
           ? {
               default: 5,
               enum: [4, 5, 6],
               isLayout: true,
-              title: 'editor.carousel.autoplaySpeed.title',
+              title: editorMessages.CarouselAutoplaySpeedTitle.id,
               type: 'number',
               widget: {
                 'ui:options': {
@@ -152,62 +224,62 @@ export default class Carousel extends Component<Props, State> {
               // tslint:disable-line
               description: {
                 default: '',
-                title: 'editor.carousel.banner.description.title',
+                title: editorMessages.CarouselBannerDescriptionTitle.id,
                 type: 'string',
               },
               externalRoute: {
                 default: false,
                 isLayout: false,
-                title: 'editor.carousel.banner.externalRoute.title',
+                title: editorMessages.CarouselBannerExternalRouteTitle.id,
                 type: 'boolean',
               },
               ...externalRouteSchema,
               ...internalRouteSchema,
               image: {
                 default: '',
-                title: 'editor.carousel.banner.image.title',
+                title: editorMessages.CarouselBannerImageTitle.id,
                 type: 'string',
                 widget: {
                   'ui:widget': 'image-uploader',
                 },
               },
               mobileImage: {
                 default: '',
-                title: 'editor.carousel.banner.mobileImage.title',
+                title: editorMessages.CarouselBannerMobileImageTitle.id,
                 type: 'string',
                 widget: {
                   'ui:widget': 'image-uploader',
                 },
               },
             },
-            title: 'editor.carousel.banner.title',
+            title: editorMessages.CarouselBannerTitle.id,
             type: 'object',
           },
           minItems: 1,
-          title: 'editor.carousel.banners.title',
+          title: editorMessages.CarouselBannersTitle.id,
           type: 'array',
         },
         height: {
           default: 420,
           enum: [420, 440],
           isLayout: true,
-          title: 'editor.carousel.height.title',
+          title: editorMessages.CarouselHeightTitle.id,
           type: 'number',
         },
         showArrows: {
           default: true,
           isLayout: true,
-          title: 'editor.carousel.showArrows.title',
+          title: editorMessages.CarouselShowArrowsTitle.id,
           type: 'boolean',
         },
         showDots: {
           default: true,
           isLayout: true,
-          title: 'editor.carousel.showDots.title',
+          title: editorMessages.CarouselShowDotsTitle.id,
           type: 'boolean',
         },
       },
-      title: 'editor.carousel.title',
+      title: editorMessages.CarouselTitle.id,
       type: 'object',
     }
   }

diff --git a/react/package.json b/react/package.json
@@ -26,6 +26,7 @@
     "coveralls": "^3.0.3",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
+    "react-intl": "^2.8.0",
     "tslint": "^5.12.1",
     "tslint-config-vtex": "^2.1.0",
     "tslint-eslint-rules": "^5.4.0"