@capillarytech/creatives-library 3.0.31 → 3.0.32

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,