@capillarytech/creatives-library 3.1.2 → 3.1.4

package/v2Containers/Line/Edit/index.js

@@ -81,7 +81,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       injectedTags: {},
       showModal: false,
       eventsMap: map,
-      modalContent: {title: "Alert", body: this.props.intl.formatMessage(messages['template not configured,']), type: 'confirm'},
+      modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.templateNotConfigured), type: 'confirm'},
     };
   }
   componentWillMount() {
@@ -655,16 +655,16 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   setModalContent = (type) => {
     if (type === 'ios') {
       const modalContent = {
-        title: "Alert",
-        body: "Android template is not configured. Save without Android template",
+        title: this.props.intl.formatMessage(messages.alertMessage),
+        body: this.props.intl.formatMessage(messages.androidNotConfigured),
         type: 'confirm',
         id: 'ios',
       };
       this.setState({modalContent, showModal: true});
     } else if (type === 'android') {
       const modalContent = {
-        title: "Alert",
-        body: "IOS template is not configured, Save without IOS template",
+        title: this.props.intl.formatMessage(messages.alertMessage),
+        body: this.props.intl.formatMessage(messages.iosNotConfigured),
         type: 'confirm',
         id: 'android',
       };
@@ -761,8 +761,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   moveToTemplates = () => {
     console.log('in move to Templates');
     const modalContent = {
-      title: "Alert",
-      body: "Do you really want to go back? All your temporary changes will be lost!",
+      title: this.props.intl.formatMessage(messages.alertMessage),
+      body: this.props.intl.formatMessage(messages.goBackTemporaryChangesLost),
       type: 'confirm',
       id: 'template-back-confirm-modal',
       show: true,
@@ -967,9 +967,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
             <Col offset={1}>
               {this.props.location.query.type !== "embedded" &&
                 <Breadcrumb>
-                  <BreadcrumbItem>Campaigns</BreadcrumbItem>
-                  <BreadcrumbItem>Creatives</BreadcrumbItem>
-                  <BreadcrumbItem>Mobile Push</BreadcrumbItem>
+                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.Campaigns)}</BreadcrumbItem>
+                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.Creatives)}</BreadcrumbItem>
+                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.mobilePush)}</BreadcrumbItem>
                 </Breadcrumb>
               }
             </Col>

package/v2Containers/Line/Edit/messages.js

@@ -7,151 +7,167 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   "imageUploadLabel": {
-    id: 'app.containers.Line.Edit.ImageUploadLabel',
+    id: 'creatives.containersV2.Line.Edit.ImageUploadLabel',
     defaultMessage: 'Upload image',
   },
   "Enter template name*": {
-    id: 'app.containers.Line.Edit.enterTemplateNameImportant',
+    id: 'creatives.containersV2.Line.Edit.enterTemplateNameImportant',
     defaultMessage: 'Enter template name*',
   },
   "Enter template name": {
-    id: 'app.containers.Line.Edit.enterTemplateName',
+    id: 'creatives.containersV2.Line.Edit.enterTemplateName',
     defaultMessage: 'Enter template name',
   },
   "Template name cannot be empty": {
-    id: 'app.containers.Line.Edit.templateCantEmpty',
+    id: 'creatives.containersV2.Line.Edit.templateCantEmpty',
     defaultMessage: 'Template name cannot be empty',
   },
   "Discard Changes": {
-    id: 'app.containers.Line.Edit.discardChanges',
+    id: 'creatives.containersV2.Line.Edit.discardChanges',
     defaultMessage: 'Discard changes',
   },
   "Cancel": {
-    id: 'app.containers.Line.Edit.cancel',
+    id: 'creatives.containersV2.Line.Edit.cancel',
     defaultMessage: 'Cancel',
   },
   "Save": {
-    id: 'app.containers.Line.Edit.save',
+    id: 'creatives.containersV2.Line.Edit.save',
     defaultMessage: 'Save',
   },
   "Select Line Template": {
-    id: 'app.containers.Line.Edit.selectLineTemplate',
+    id: 'creatives.containersV2.Line.Edit.selectLineTemplate',
     defaultMessage: 'Select line template',
   },
   "Template": {
-    id: 'app.containers.Line.Edit.template',
+    id: 'creatives.containersV2.Line.Edit.template',
     defaultMessage: 'Template',
   },
   "Title*": {
-    id: 'app.containers.Line.Edit.titleLabel',
+    id: 'creatives.containersV2.Line.Edit.titleLabel',
     defaultMessage: 'Title*',
   },
   "Title": {
-    id: 'app.containers.Line.Edit.title',
+    id: 'creatives.containersV2.Line.Edit.title',
     defaultMessage: 'Title',
   },
   "Please input message title name.": {
-    id: 'app.containers.Line.Edit.titleNameInvalid',
+    id: 'creatives.containersV2.Line.Edit.titleNameInvalid',
     defaultMessage: 'Please enter the message title',
   },
   "Template message has unsupported/missing tags!": {
-    id: 'app.containers.Line.Edit.messageHasUnsupportedTag',
+    id: 'creatives.containersV2.Line.Edit.messageHasUnsupportedTag',
     defaultMessage: 'Please check the message content for unsupported/missing tags',
   },
   "Tags": {
-    id: 'app.containers.Line.Edit.Tags',
+    id: 'creatives.containersV2.Line.Edit.Tags',
     defaultMessage: 'Tags',
   },
   "Message*": {
-    id: 'app.containers.Line.Edit.messageLabel',
+    id: 'creatives.containersV2.Line.Edit.messageLabel',
     defaultMessage: 'Message*',
   },
   "Message": {
-    id: 'app.containers.Line.Edit.message',
+    id: 'creatives.containersV2.Line.Edit.message',
     defaultMessage: 'Message',
   },
   "Please input mobile push template content.": {
-    id: 'app.containers.Line.Edit.inputLineTemplateContent',
+    id: 'creatives.containersV2.Line.Edit.inputLineTemplateContent',
     defaultMessage: 'Please enter the message content',
   },
   "Template title has unsupported/missing tags.": {
-    id: 'app.containers.Line.Edit.titleHasUnsupportedTag',
+    id: 'creatives.containersV2.Line.Edit.titleHasUnsupportedTag',
     defaultMessage: 'Please check the message content for unsupported/missing tags',
   },
   "Template name cannot be empty.": {
-    id: 'app.containers.Line.Edit.templateNameNotEmpty',
+    id: 'creatives.containersV2.Line.Edit.templateNameNotEmpty',
     defaultMessage: 'Please provide a template name ',
   },
   "Message title has unsupported/missing tags!": {
-    id: 'app.containers.Line.Edit.messageTitleWithUnsupportedTag',
+    id: 'creatives.containersV2.Line.Edit.messageTitleWithUnsupportedTag',
     defaultMessage: 'Please check the message content for unsupported/missing tags',
   },
   "Image": {
-    id: 'app.containers.Line.Edit.Image',
+    id: 'creatives.containersV2.Line.Edit.Image',
     defaultMessage: 'Image',
   },
   "Max file size acceptable is 5mb": {
-    id: 'app.containers.Line.Edit.maxUploadFileSize',
+    id: 'creatives.containersV2.Line.Edit.maxUploadFileSize',
     defaultMessage: 'Max file size acceptable is 5mb',
   },
   "Please upload Image": {
-    id: 'app.containers.Line.Edit.pleaseUploadImage',
+    id: 'creatives.containersV2.Line.Edit.pleaseUploadImage',
     defaultMessage: 'Please upload image',
   },
   "Upload Image": {
-    id: 'app.containers.Line.Edit.uploadImage',
+    id: 'creatives.containersV2.Line.Edit.uploadImage',
     defaultMessage: 'Upload image',
   },
   "Line Template Edited Successfully": {
-    id: 'app.containers.Line.Edit.templateEditedSuccessfully',
+    id: 'creatives.containersV2.Line.Edit.templateEditedSuccessfully',
     defaultMessage: 'Line template edited successfully',
   },
   "somethingWentWrong": {
-    id: 'app.containers.Line.Edit.somethingWentWrong',
+    id: 'creatives.containersV2.Line.Edit.somethingWentWrong',
     defaultMessage: 'Something went wrong!!',
   },
   "Do you really want to go back? All your temporary changes will be lost!": {
-    id: 'app.containers.Line.Edit.goBackConfirmation',
+    id: 'creatives.containersV2.Line.Edit.goBackConfirmation',
     defaultMessage: "Going back will discard all the changes you've made. Continue?",
   },
   "Name and Description": {
-    id: 'app.containers.Line.Edit.nameAndDescription',
+    id: 'creatives.containersV2.Line.Edit.nameAndDescription',
     defaultMessage: 'Name and description',
   },
   "Button 1": {
-    id: 'app.containers.Line.Edit.button1',
+    id: 'creatives.containersV2.Line.Edit.button1',
     defaultMessage: 'Button 1',
   },
   "Button 2": {
-    id: 'app.containers.Line.Edit.button2',
+    id: 'creatives.containersV2.Line.Edit.button2',
     defaultMessage: 'Button 2',
   },
   "File size cannot be more than 5mb": {
-    id: 'app.containers.Line.Edit.uploadFileSizeError',
+    id: 'creatives.containersV2.Line.Edit.uploadFileSizeError',
     defaultMessage: 'File size cannot be more than 5mb',
   },
   "value cannot be empty.": {
-    id: 'app.containers.Line.Edit.valueCantEmpty',
+    id: 'creatives.containersV2.Line.Edit.valueCantEmpty',
     defaultMessage: 'value cannot be empty.',
   },
   "Uploading Image...": {
-    id: 'app.containers.Line.Edit.uploadingImage',
+    id: 'creatives.containersV2.Line.Edit.uploadingImage',
     defaultMessage: 'Uploading image...',
   },
   "Campaigns": {
-    id: 'app.containers.Line.Edit.Campaigns',
+    id: 'creatives.containersV2.Line.Edit.Campaigns',
     defaultMessage: 'Campaigns',
   },
   "Creatives": {
-    id: 'app.containers.Line.Edit.Creatives',
+    id: 'creatives.containersV2.Line.Edit.Creatives',
     defaultMessage: 'Creatives',
   },
-  "Line": {
-    id: 'app.containers.Line.Edit.mobilePush',
+  "mobilePush": {
+    id: 'creatives.containersV2.Line.Edit.mobilePush',
     defaultMessage: 'Mobile Push',
   },
-  "template not configured,": {
-    id: 'app.containers.Line.Edit.templateNotConfigured',
+  "templateNotConfigured": {
+    id: 'creatives.containersV2.Line.Edit.templateNotConfigured',
     defaultMessage: 'template not configured,',
   },
+  "alertMessage": {
+    id: 'creatives.containersV2.Line.Edit.alertMessage',
+    defaultMessage: 'Alert',
+  },
+  "androidNotConfigured": {
+    id: 'creatives.containersV2.Line.Edit.androidNotConfigured',
+    defaultMessage: 'Android template is not configured. Save without Android template',
+  },
+  "iosNotConfigured": {
+    id: 'creatives.containersV2.Line.Edit.iosNotConfigured',
+    defaultMessage: 'IOS template is not configured, Save without IOS template',
+  },
+  "goBackTemporaryChangesLost": {
+    id: 'creatives.containersV2.Line.Edit.goBackTemporaryChangesLost',
+    defaultMessage: 'Do you really want to go back? All your temporary changes will be lost!',
+  },
 });

package/v2Containers/Login/components/LoginForm/index.js

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Form, Icon } from 'antd';
 import { CapInput, CapButton } from '@capillarytech/cap-ui-library';
+import { injectIntl, intlShape } from 'react-intl';
+import messages from './messages';
 const FormItem = Form.Item;
 
 class NormalLoginForm extends React.Component {
@@ -20,21 +22,21 @@ class NormalLoginForm extends React.Component {
       <Form onSubmit={this.handleSubmit} className="login-form">
         <FormItem className="login-form-item">
           {getFieldDecorator('username', {
-            rules: [{ required: true, message: 'Please input your username!' }],
+            rules: [{ required: true, message: this.props.intl.formatMessage(messages.inputUsernameMandatory) }],
           })(
-            <CapInput prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
+            <CapInput prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder={this.props.intl.formatMessage(messages.username)} />
           )}
         </FormItem>
         <FormItem className="login-form-item">
           {getFieldDecorator('password', {
-            rules: [{ required: true, message: 'Please input your Password!' }],
+            rules: [{ required: true, message: this.props.intl.formatMessage(messages.inputPasswordMandatory) }],
           })(
-            <CapInput prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
+            <CapInput prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder={this.props.intl.formatMessage(messages.password)} />
           )}
         </FormItem>
         {this.props.isError
         ? <FormItem>
-          <span style={{color: "red"}}>{"Invalid or Incorrect credentials!"}</span>
+          <span style={{color: "red"}}>{this.props.intl.formatMessage(messages.invalidCredentials)}</span>
         </FormItem>
         : null
         }
@@ -53,7 +55,8 @@ NormalLoginForm.propTypes = {
   loginInProgress: PropTypes.bool,
   isError: PropTypes.bool,
   form: PropTypes.object,
+  intl: intlShape.isRequired,
 };
 
 const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
-export default WrappedNormalLoginForm;
+export default injectIntl(WrappedNormalLoginForm);

package/v2Containers/Login/components/LoginForm/messages.js

@@ -7,15 +7,27 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   username: {
-    id: 'reon.modules.Login.components.LoginForm.input.username',
+    id: 'reon.modules.Login.componentsv2.LoginForm.input.username',
     defaultMessage: 'Username or email',
   },
   password: {
-    id: 'reon.modules.Login.components.LoginForm.input.password',
+    id: 'reon.modules.Login.componentsv2.LoginForm.input.password',
     defaultMessage: 'Password',
   },
   loginButton: {
-    id: 'reon.modules.Login.components.LoginForm.input.loginButton',
+    id: 'reon.modules.Login.componentsv2.LoginForm.input.loginButton',
     defaultMessage: 'Login',
   },
+  invalidCredentials: {
+    id: 'reon.modules.Login.componentsv2.LoginForm.input.invalidCredentials',
+    defaultMessage: 'Invalid or Incorrect credentials!',
+  },
+  inputPasswordMandatory: {
+    id: 'reon.modules.Login.componentsv2.LoginForm.input.inputPasswordMandatory',
+    defaultMessage: 'Please input your Password!',
+  },
+  inputUsernameMandatory: {
+    id: 'reon.modules.Login.componentsv2.LoginForm.input.inputUsernameMandatory',
+    defaultMessage: 'Please input your username!',
+  },
 });

package/v2Containers/Login/index.js

@@ -58,7 +58,7 @@ export class Login extends React.Component { // eslint-disable-line react/prefer
           <Helmet
             title={message}
             meta={[
-              { name: 'description', content: 'Login Page' },
+              { name: 'description', content: <FormattedMessage {...messages.loginPage}/> },
             ]}
           />}
         </FormattedMessage>

package/v2Containers/Login/messages.js

@@ -7,15 +7,19 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   pageTitle: {
-    id: 'app.containers.Login.pageTitle',
+    id: 'creatives.containersV2.Login.pageTitle',
     defaultMessage: 'Login',
   },
   header: {
-    id: 'app.containers.Login.header',
+    id: 'creatives.containersV2.Login.header',
     defaultMessage: 'This is login container change !',
   },
   invalidCredential: {
-    id: 'app.containers.Login.invalidCredential',
+    id: 'creatives.containersV2.Login.invalidCredential',
     defaultMessage: 'Invalid username or password',
   },
+  loginPage: {
+    id: 'creatives.containersV2.Login.loginPage',
+    defaultMessage: 'Login Page',
+  },
 });

package/v2Containers/MobilePush/Create/index.js

@@ -46,7 +46,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         eventsMap,
         errorData: {},
         displayProps: {},
-        modalContent: {title: "Alert", body: "template not configured,", type: 'confirm'},
+        modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.templateNotConfigured), type: 'confirm'},
         injectedTags: {},
       };
     }
@@ -219,12 +219,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
                   {
                     id: inputId,
-                    placeholder: "Select DeepLink",
+                    placeholder: this.props.intl.formatMessage(messages.selectDeeplink),
                     type: "select",  //Resembles component to be used
                     options: deepLinkOptions,
                     metaType: "text",
                     datatype: "string",
-                    errorMessage: "Select a deeplink",
+                    errorMessage: this.props.intl.formatMessage(messages.selectADeeplink),
                     required: true,
                     fluid: true,
                     width: 18,
@@ -256,7 +256,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
                   {
                     id: inputId,
-                    placeholder: "External Link",
+                    placeholder: this.props.intl.formatMessage(messages.externalLink),
                     type: "input",  //Resembles component to be used
                     metaType: "text",
                     datatype: "string",
@@ -572,16 +572,16 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   setModalContent = (type) => {
     if (type === 'ios') {
       const modalContent = {
-        title: "Alert",
-        body: "Android template is not configured. Save without Android template",
+        title: this.props.intl.formatMessage(messages.alertMessage),
+        body: this.props.intl.formatMessage(messages.androidNotConfigured),
         type: 'confirm',
         id: 'ios',
       };
       this.setState({modalContent, showModal: true});
     } else if (type === 'android') {
       const modalContent = {
-        title: "Alert",
-        body: "IOS template is not configured, Save without IOS template",
+        title: this.props.intl.formatMessage(messages.alertMessage),
+        body: this.props.intl.formatMessage(messages.iosNotConfigured),
         type: 'confirm',
         id: 'android',
       };
@@ -643,8 +643,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
   moveToTemplates = () => {
     const modalContent = {
-      title: "Alert",
-      body: this.props.intl.formatMessage(messages["Do you really want to go back? All your temporary changes will be lost!"]),
+      title: this.props.intl.formatMessage(messages.alertMessage),
+      body: this.props.intl.formatMessage(messages.goBackTemporaryChangesLost),
       type: 'confirm',
       id: 'template-back-confirm-modal',
       show: true,
@@ -1032,7 +1032,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                   required: true,
                   width: 18,
                   offset: 1,
-                  errorMessage: "Please select link type",
+                  errorMessage: this.props.intl.formatMessage(messages.selectLinkType),
                   fluid: true,
 
                   styling: "semantic",
@@ -1049,12 +1049,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
                 {
                   id: `cta-deeplink-${inputId}-select2`,
-                  placeholder: "Select DeepLink",
+                  placeholder: this.props.intl.formatMessage(messages.selectDeeplink),
                   type: "select",  //Resembles component to be used
                   options: deepLinkOptions,
                   metaType: "text",
                   datatype: "string",
-                  errorMessage: "Select a deeplink",
+                  errorMessage: this.props.intl.formatMessage(messages.selectADeeplink),
                   required: true,
                   fluid: true,
                   width: 18,
@@ -1107,7 +1107,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                   required: true,
                   width: 18,
                   offset: 1,
-                  errorMessage: "Please select link type",
+                  errorMessage: this.props.intl.formatMessage(messages.selectLinkType),
                   fluid: true,
                   styling: "semantic",
                   order: 1,
@@ -1124,13 +1124,13 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
                 {
                   id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
-                  placeholder: "Select DeepLink",
+                  placeholder: this.props.intl.formatMessage(messages.selectDeeplink),
                   type: "select",  //Resembles component to be used
                   options: deepLinkOptions,
                   metaType: "text",
                   datatype: "string",
                   required: true,
-                  errorMessage: "Select a deeplink",
+                  errorMessage: this.props.intl.formatMessage(messages.selectADeeplink),
                   fluid: true,
                   width: 18,
                   offset: 1,
@@ -1188,12 +1188,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                   required: true,
                   width: 18,
                   offset: 1,
-                  placeholder: "Enter CTA Label here",
+                  placeholder: this.props.intl.formatMessage(messages.enterCTALabel),
                   fluid: true,
                   styling: "semantic",
                   order: 1,
                   customComponent: false,
-                  errorMessage: "CTA label cannot be empty.",
+                  errorMessage: this.props.intl.formatMessage(messages.ctaLabelCantEmpty),
                 },
 
               ],
@@ -1213,7 +1213,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                   required: true,
                   width: 18,
                   offset: 1,
-                  errorMessage: "Please select link type",
+                  errorMessage: this.props.intl.formatMessage(messages.selectLinkType),
                   fluid: true,
                   styling: "semantic",
                   order: 1,
@@ -1231,10 +1231,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
                 {
                   id: `cta-deeplink-${inputId}-select`,
-                  placeholder: "Select DeepLink",
+                  placeholder: this.props.intl.formatMessage(messages.selectDeeplink),
                   type: "select",  //Resembles component to be used
                   options: deepLinkOptions,
-                  errorMessage: "Select a deeplink",
+                  errorMessage: this.props.intl.formatMessage(messages.selectADeeplink),
                   metaType: "text",
                   datatype: "string",
                   required: true,
@@ -1292,7 +1292,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       formData[0]['message-editor'] = formData[1]['message-editor2'];
       this.setState({formData});
     } else {
-      this.openNotificationWithIcon('warning', "Cannot copy empty field values.");
+      this.openNotificationWithIcon('warning', this.props.intl.formatMessage(messages.cantCopyEmptyFieldValues));
     }
   };
   copyAndroidContent = () => {
@@ -1302,7 +1302,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       formData[1]['message-editor2'] = formData[0]['message-editor'];
       this.setState({formData});
     } else {
-      this.openNotificationWithIcon('warning', "Cannot copy empty field values.");
+      this.openNotificationWithIcon('warning', this.props.intl.formatMessage(messages.cantCopyEmptyFieldValues));
     }
   };
   uploadImage = (data) => {
@@ -1358,12 +1358,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                               required: true,
                               width: 18,
                               offset: 1,
-                              placeholder: `Please input ${key.replace('_', " ")} here .`,
+                              placeholder: `${this.props.intl.formatMessage(messages.pleaseInput)} ${key.replace('_', " ")} ${this.props.intl.formatMessage(messages.here)}`,
                               fluid: true,
                               styling: "semantic",
                               order: 1,
                               customComponent: false,
-                              errorMessage: "value cannot be empty.",
+                              errorMessage: this.props.intl.formatMessage(messages.valueCantEmpty),
                             },
                           ],
                         };
@@ -1464,7 +1464,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                             {
                               id: `${this.state.currentTab === 1 ? "add-pri-cta" : "add-pri-cta-ios"}`,
                               metaType: "label",
-                              value: "Add Primary CTA",
+                              value: this.props.intl.formatMessage(messages.addPrimaryCTA),
                               primitive: true,
                               dynamicTab: false,
                               type: "div",
@@ -1504,7 +1504,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (id === "secondary-cta-0-delete") {
       const secCta2 = document.getElementById("secondary-cta-1-delete");
       if (secCta2) {
-        const modalContent = {title: "Alert", body: this.props.intl.formatMessage(messages["Please delete second Secondary cta First"]), type: 'info', show: true, onCancel: this.onModalCancel};
+        const modalContent = {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.deleteSecondCTAFirst), type: 'info', show: true, onCancel: this.onModalCancel};
         this.setState({modalContent, showModal: true});
         return;
       }
@@ -1550,7 +1550,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                               {
                                 id: "add-sec-cta-ios",
                                 metaType: "label",
-                                value: "Add Secondary CTA",
+                                value: this.props.intl.formatMessage(messages.addSecondaryCTA),
                                 primitive: true,
                                 dynamicTab: false,
                                 type: "div",
@@ -1578,7 +1578,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                                 {
                                   id: "add-sec-cta",
                                   metaType: "label",
-                                  value: "Add Secondary CTA",
+                                  value: this.props.intl.formatMessage(messages.addSecondaryCTA),
                                   primitive: true,
                                   dynamicTab: false,
                                   type: "div",
@@ -1612,7 +1612,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                                 {
                                   id: "add-sec-cta",
                                   metaType: "label",
-                                  value: "Add Another CTA",
+                                  value: this.props.intl.formatMessage(messages.addAnotherCTA),
                                   primitive: true,
                                   dynamicTab: false,
                                   type: "div",
@@ -1728,7 +1728,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                   }}
                   dataSource={this.props.iosCtasData} columns={[
                     {
-                      title: "Name and Description",
+                      title: this.props.intl.formatMessage(messages.nameAndDescription),
                       dataIndex: "name",
                       key: "name",
                       width: 200,
@@ -1739,7 +1739,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                         </div>),
                     },
                     {
-                      title: "Button 1",
+                      title: this.props.intl.formatMessage(messages.button1),
                       dataIndex: "description",
                       key: "button1",
                       width: 100,
@@ -1749,7 +1749,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                         </div>),
                     },
                     {
-                      title: "Button 2",
+                      title: this.props.intl.formatMessage(messages.button2),
                       dataIndex: "description",
                       key: "button2",
                       width: 100,