@capillarytech/creatives-library 3.2.4 → 3.3.0

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -60,6 +60,8 @@ function SlideBoxContent(props) {
       onValidationFail,
       channelsToHide,
       forwardedTags,
+      selectedOfferDetails,
+      channelsToDisable,
       weChatTemplateType,
       onWechatTemplateChange,
       selectedWeChatAccount,
@@ -113,6 +115,7 @@ function SlideBoxContent(props) {
         cap={cap}
         channelsToHide={channelsToHide}
         forwardedTags={forwardedTags}
+        channelsToDisable={channelsToDisable}
         />
         )}
       {isPreview && (
@@ -174,6 +177,7 @@ function SlideBoxContent(props) {
           getDefaultTags={type}
           templateData={templateData}
           forwardedTags={forwardedTags}
+          selectedOfferDetails={selectedOfferDetails}
         />
       )}
       {
@@ -183,6 +187,7 @@ function SlideBoxContent(props) {
             templateData={templateData}
             onCallTaskSubmit={onCallTaskSubmit}
             forwardedTags={forwardedTags}
+            selectedOfferDetails={selectedOfferDetails}
           />
       }
       {
@@ -191,6 +196,7 @@ function SlideBoxContent(props) {
            mode={'create'}
            onCallTaskSubmit={onCallTaskSubmit}
            forwardedTags={forwardedTags}
+           selectedOfferDetails={selectedOfferDetails}
         />
        }
       {isCreateSms && (
@@ -204,6 +210,7 @@ function SlideBoxContent(props) {
         getDefaultTags={type}
         isFullMode={isFullMode}
         forwardedTags={forwardedTags}
+        selectedOfferDetails={selectedOfferDetails}
       />
         )}
       {isEmailCreate && (
@@ -225,6 +232,7 @@ function SlideBoxContent(props) {
         showTemplateName={showTemplateName}
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
+        selectedOfferDetails={selectedOfferDetails}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -247,6 +255,7 @@ function SlideBoxContent(props) {
         showTemplateName={showTemplateName}
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
+        selectedOfferDetails={selectedOfferDetails}
       />
         )}
       {isEditMPush &&
@@ -266,6 +275,7 @@ function SlideBoxContent(props) {
           getDefaultTags={type}
           onValidationFail={onValidationFail}
           forwardedTags={forwardedTags}
+          selectedOfferDetails={selectedOfferDetails}
         />
         }
       {isCreateMPush &&
@@ -289,7 +299,8 @@ function SlideBoxContent(props) {
         showTemplateName={showTemplateName}
         query={query}
         forwardedTags={forwardedTags}
-        onValidationFail={onValidationFail}/>
+        onValidationFail={onValidationFail}
+        selectedOfferDetails={selectedOfferDetails}/>
         }
     </CreativesWrapper>
   );
@@ -323,6 +334,8 @@ SlideBoxContent.propTypes = {
   onValidationFail: PropTypes.func,
   channelsToHide: PropTypes.array,
   forwardedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
+  channelsToDisable: PropTypes.array,
   weChatTemplateType: PropTypes.string,
   onWechatTemplateChange: PropTypes.func,
   selectedWeChatAccount: PropTypes.object,

package/v2Containers/CreativesContainer/index.js

@@ -465,8 +465,9 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
+    /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
       <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`)}>
         <CapSlideBox
@@ -522,6 +523,8 @@ class Creatives extends React.Component {
               onValidationFail={this.onValidationFail}
               channelsToHide={channelsToHide}
               forwardedTags={forwardedTags}
+              selectedOfferDetails={selectedOfferDetails}
+              channelsToDisable={channelsToDisable}
               weChatTemplateType={weChatTemplateType}
               onWechatTemplateChange={this.onWechatTemplateChange}
               weChatMaptemplateStep={weChatMaptemplateStep}
@@ -573,6 +576,8 @@ Creatives.propTypes = {
   EmailLayout: PropTypes.string,
   channelsToHide: PropTypes.array,
   forwardedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
+  channelsToDisable: PropTypes.array,
   selectedWeChatAccount: PropTypes.object,
 };
 const mapStatesToProps = () => createStructuredSelector({

package/v2Containers/Email/index.js

@@ -58,7 +58,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       showImageSelectionBox: false,
       isDragDrop: false,
       showConfirmationModal: false,
-      modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
+      modalContent: {title: this.props.intl.formatMessage(messages.alert), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
       showModal: false,
       page: 1,
       perPageLimit: 25,
@@ -906,14 +906,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     let modalContent = {};
     if (type === 'delete-version') {
       modalContent = {
-        title: this.props.intl.formatMessage(messages.alertMessage),
+        title: this.props.intl.formatMessage(messages.alert),
         body: this.props.intl.formatMessage(messages.deleteVersionConfirmation),
         type: 'confirm',
         id: 'email-version-delete-modal',
       };
     } else if (type === 'delete-language') {
       modalContent = {
-        title: this.props.intl.formatMessage(messages.alertMessage),
+        title: this.props.intl.formatMessage(messages.alert),
         body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation),
         type: 'confirm',
         id: 'email-language-delete-modal',
@@ -1001,7 +1001,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       showImageSelectionBox: false,
       isDragDrop: false,
       showConfirmationModal: false,
-      modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
+      modalContent: {title: this.props.intl.formatMessage(messages.alert), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
       showModal: false,
       page: 1,
       perPageLimit: 25,
@@ -1823,7 +1823,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   moveToTemplates = () => {
     const modalContent = {
-      title: this.props.intl.formatMessage(messages.alertMessage),
+      title: this.props.intl.formatMessage(messages.alert),
       body: this.props.intl.formatMessage(messages.goBackTemporaryChangesLost),
       type: 'confirm',
       id: 'template-back-confirm-modal',
@@ -2559,9 +2559,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // const actionComponents = '';
     const schema = this.state.schema;
     const isLoading = this.isEmailLoading();
-    const previewHeader = (<h3>Email Preview</h3>);
-    const imagePreviewHeader = (<h3>Image Selection</h3>);
+    const previewHeader = (<h3>{this.props.intl.formatMessage(messages.h3emailPreview)}</h3>);
+    const imagePreviewHeader = (<h3>{this.props.intl.formatMessage(messages.h3imageSelection)}</h3>);
     const imagePreviewContent = this.getImagePreviewContent();
+    const { selectedOfferDetails } = this.props;
     if (!this.props.currentOrgDetails || !this.props.currentOrgDetails.basic_details) {
       return (<div>Loading...</div>);
     }
@@ -2617,6 +2618,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   getValidationData={this.saveValidationData}
                   saveForm={this.state.saveForm}
                   stopValidation={this.stopValidation}
+                  selectedOfferDetails={selectedOfferDetails}
               /> : ''}
             </Col>
           </Row>
@@ -2669,6 +2671,7 @@ Email.propTypes = {
   defaultData: PropTypes.object,
   showTemplateName: PropTypes.func,
   onValidationFail: PropTypes.func,
+  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({

package/v2Containers/Email/messages.js

@@ -278,4 +278,12 @@ export default defineMessages({
     id: 'creatives.containersV2.Email.alertMessage',
     defaultMessage: 'Alert',
   },
+  "h3emailPreview": {
+    id: 'creatives.containersV2.Email.h3emailPreview',
+    defaultMessage: 'Email preview',
+  },
+  "h3imageSelection": {
+    id: 'creatives.containersV2.Email.h3imageSelection',
+    defaultMessage: 'Image selection',
+  },
 });

package/v2Containers/EmailWrapper/index.js

@@ -173,6 +173,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       setIsLoadingContent,
       onValidationFail,
       forwardedTags,
+      selectedOfferDetails,
     } = this.props;
     const {
       templateName,
@@ -203,15 +204,15 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
               </CardContainer>
               <div>
                 {emailCreateMode === "upload" &&
-                <div style={{ marginLeft: '8px'}}>
-                  <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
-                    <CapButton>{this.props.intl.formatMessage(messages.upload)}</CapButton>
-                  </CapUploader>
-                  {!_.isEmpty(EmailLayout) &&
-                    <div>{_.get(modeContent, "file.name")}</div>
-                  }
-                </div>
-              }
+                  <div style={{ marginLeft: '8px' }}>
+                    <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
+                      <CapButton>{this.props.intl.formatMessage(messages.upload)}</CapButton>
+                    </CapUploader>
+                    {!_.isEmpty(EmailLayout) &&
+                      <div>{_.get(modeContent, "file.name")}</div>
+                    }
+                  </div>
+                }
               </div>
             </div>
             :
@@ -232,6 +233,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 showTemplateName={showTemplateName}
                 onValidationFail={onValidationFail}
                 forwardedTags={forwardedTags}
+                selectedOfferDetails={selectedOfferDetails}
               />}
               {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor} />}
             </div>
@@ -263,6 +265,7 @@ EmailWrapper.propTypes = {
   showTemplateName: PropTypes.func,
   onValidationFail: PropTypes.func,
   forwardedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/LanguageProvider/actions.js

@@ -4,14 +4,19 @@
  *
  */
 
-import {
-  CHANGE_LOCALE,
-} from './constants';
+import * as types from './constants';
 
 export function changeLocale(languageLocale) {
   console.log('trying to change locale', languageLocale);
   return {
-    type: CHANGE_LOCALE,
+    type: types.CHANGE_LOCALE,
     locale: languageLocale,
   };
 }
+
+export function getLocizMessage(locale) {
+  return {
+    type: types.GET_LOCIZ_MESSAGE_REQUEST,
+    locale,
+  };
+}

package/v2Containers/LanguageProvider/constants.js

@@ -4,5 +4,11 @@
  *
  */
 
-export const CHANGE_LOCALE = 'app/LanguageToggle/CHANGE_LOCALE';
 export const DEFAULT_LOCALE = 'en';
+
+export const GET_LOCIZ_MESSAGE_REQUEST =
+  'app/LanguageProvider/GET_LOCIZ_MESSAGE_REQUEST';
+export const GET_LOCIZ_MESSAGE_SUCCESS =
+  'app/LanguageProvider/GET_LOCIZ_MESSAGE_SUCCESS';
+export const GET_LOCIZ_MESSAGE_FAILURE =
+  'app/LanguageProvider/GET_LOCIZ_MESSAGE_FAILURE';

package/v2Containers/LanguageProvider/index.js

@@ -9,37 +9,74 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
+import { ConfigProvider } from 'antd';
+import enUS from 'antd/es/locale-provider/en_US';
+import zhCN from 'antd/es/locale-provider/zh_CN';
 import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
+import { createStructuredSelector } from 'reselect';
 import { IntlProvider } from 'react-intl';
-
+import moment from 'moment';
+import { bindActionCreators } from 'redux';
+import * as actions from './actions';
 import { makeSelectLocale } from './selectors';
 
+
 export class LanguageProvider extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  componentDidMount() {
+    const user = localStorage.getItem('user');
+    let locale = localStorage.getItem('jlocale') || 'en';
+    moment.locale(locale);
+    if (user) {
+      locale = JSON.parse(user).lang;
+    }
+    locale = this.getMappedLocale(locale);
+    this.props.actions.getLocizMessage(locale);
+  }
+  /*global getMappedLocale */
+  getMappedLocale = (locale) => {
+    const map = {
+      'en': 'en-US',
+      'zh-cn': 'zh',
+      'zh': 'zh',
+      'en-US': 'en-US',
+    };
+    return map[locale];
+  };
+
   render() {
+    const { locale, messages} = this.props.language;
+    const mappedLocale = {
+      'en': enUS,
+      'zh-cn': zhCN,
+      'en-US': enUS,
+      'zh': zhCN,
+    };
+    const jLocale = localStorage.getItem('jlocale') || 'en';
+    const file = mappedLocale[jLocale];
     return (
-      <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>
-        {React.Children.only(this.props.children)}
-      </IntlProvider>
+      <ConfigProvider locale={file}>
+        <IntlProvider locale={locale} key={locale} messages={messages}>
+          {React.Children.only(this.props.children)}
+        </IntlProvider>
+      </ConfigProvider>
     );
   }
 }
 
 LanguageProvider.propTypes = {
-  locale: PropTypes.string,
-  messages: PropTypes.object,
+  language: PropTypes.object,
+  actions: PropTypes.object,
   children: PropTypes.element.isRequired,
 };
 
 
-const mapStateToProps = createSelector(
-  makeSelectLocale(),
-  (locale) => ({ locale })
-);
+const mapStateToProps = createStructuredSelector({
+  language: makeSelectLocale(),
+});
 
 function mapDispatchToProps(dispatch) {
   return {
-    dispatch,
+    actions: bindActionCreators(actions, dispatch),
   };
 }
 

package/v2Containers/LanguageProvider/reducer.js

@@ -6,22 +6,24 @@
 
 import { fromJS } from 'immutable';
 
-import {
-  CHANGE_LOCALE,
-} from './constants';
-import {
-  DEFAULT_LOCALE,
-} from '../Cap/constants'; // eslint-disable-line
+import * as types from './constants';
 
 const initialState = fromJS({
-  locale: DEFAULT_LOCALE,
+  locale: types.DEFAULT_LOCALE,
+  messages: {},
+  localeLoading: false,
 });
 
 function languageProviderReducer(state = initialState, action) {
   switch (action.type) {
-    case CHANGE_LOCALE:
+    case types.GET_LOCIZ_MESSAGE_REQUEST:
+      return state.set('localeLoading', true);
+    case types.GET_LOCIZ_MESSAGE_SUCCESS:
       return state
-        .set('locale', action.locale);
+        .set('localeLoading', false)
+        .set('messages', fromJS(action.data));
+    case types.GET_LOCIZ_MESSAGE_FAILURE:
+      return state.set('localeLoading', false);
     default:
       return state;
   }

package/v2Containers/LanguageProvider/selectors.js

@@ -11,7 +11,7 @@ const selectLanguage = (state) => state.get('language');
 
 const makeSelectLocale = () => createSelector(
   selectLanguage,
-  (languageState) => languageState.get('locale')
+  (languageState) => languageState.toJS()
 );
 
 export {

package/v2Containers/MobilePush/Create/index.js

@@ -978,7 +978,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                       size={"label"}/>
                   </CapColumn>
                   <CapColumn span={6}>
-                    <CapLink title="change" onClick={() => this.addSecondoryCtaIos(true, this.state.formData, {id: "add-sec-cta-ios"})}/>
+                    <CapLink title={this.props.intl.formatMessage(messages.change)} onClick={() => this.addSecondoryCtaIos(true, this.state.formData, {id: "add-sec-cta-ios"})}/>
                   </CapColumn>
                 </CapRow>,
                 primitive: true,
@@ -1705,6 +1705,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 setModalContent={this.setModalContent}
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
+                selectedOfferDetails={this.props.selectedOfferDetails}
               />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&

package/v2Containers/MobilePush/Create/messages.js

@@ -290,4 +290,8 @@ export default defineMessages({
     id: 'creatives.containersV2.MobilePush.Create.here',
     defaultMessage: 'here .',
   },
+  "change": {
+    id: 'creatives.containersV2.MobilePush.Create.change',
+    defaultMessage: 'change',
+  },
 });

package/v2Containers/MobilePush/Edit/index.js

@@ -967,7 +967,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                       size={"label"}/>
                   </CapColumn>
                   <CapColumn span={6}>
-                    <CapLink title="change" onClick={() => this.addSecondoryCtaIos(true, this.state.formData, {id: "add-sec-cta-ios"})}/>
+                    <CapLink title={this.props.intl.formatMessage(messages.change)} onClick={() => this.addSecondoryCtaIos(true, this.state.formData, {id: "add-sec-cta-ios"})}/>
                   </CapColumn>
                 </CapRow>,
                 primitive: true,
@@ -1792,6 +1792,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 setModalContent={this.setModalContent}
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
+                selectedOfferDetails={this.props.selectedOfferDetails}
               />}
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&

package/v2Containers/MobilePush/Edit/messages.js

@@ -282,4 +282,8 @@ export default defineMessages({
     id: 'creatives.containersV2.MobilePush.Edit.pleaseInput',
     defaultMessage: "Please input",
   },
+  "change": {
+    id: 'creatives.containersV2.MobilePush.Edit.change',
+    defaultMessage: "change",
+  },
 });

package/v2Containers/Sms/Create/index.js

@@ -176,7 +176,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const unicodeEnabled = _.get(this.state, `formData[0]['unicode-validity']`);
     const smsDetails = updateCharCount(content || "", unicodeEnabled || false);
     if (this.smsCount.current) {
-      this.smsCount.current.innerText = `${smsDetails.parts}SMS (${smsDetails.chars_used} characters)`;
+      this.smsCount.current.innerText = `${smsDetails.parts}${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`;
     }
   }
 
@@ -970,6 +970,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 router={this.props.router}
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
+                selectedOfferDetails={this.props.selectedOfferDetails}
               />
             </CapColumn>
           </CapRow>
@@ -995,6 +996,7 @@ Create.propTypes = {
   isFullMode: PropTypes.bool,
   getFormSubscriptionData: PropTypes.func,
   isLoadingMetaEntities: PropTypes.bool,
+  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Sms/Create/messages.js

@@ -110,4 +110,20 @@ export default defineMessages({
     id: 'creatives.containersV2.Create.templateNotValid',
     defaultMessage: 'Template data is not valid',
   },
+  "Creative name": {
+    id: 'creatives.containersV2.Create.creativeName',
+    defaultMessage: 'Creative name',
+  },
+  "Add label": {
+    id: 'creatives.containersV2.Create.addLabel',
+    defaultMessage: 'Add label',
+  },
+  "sms": {
+    id: 'creatives.containersV2.Create.sms',
+    defaultMessage: 'SMS',
+  },
+  "characters" : {
+    id: 'creatives.containersV2.Create.characters',
+    defaultMessage: 'characters',
+  },
 });

package/v2Containers/Sms/Edit/index.js

@@ -194,7 +194,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const unicodeEnabled = _.get(this.state, `formData[0]['unicode-validity']`);
     const smsDetails = updateCharCount(content || "", unicodeEnabled || false);
     if (this.smsCount.current) {
-      this.smsCount.current.innerText = `${smsDetails.parts}SMS (${smsDetails.chars_used} characters)`;
+      this.smsCount.current.innerText = `${smsDetails.parts}${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`;
     }
   }
 
@@ -966,6 +966,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 router={this.props.router}
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
+                selectedOfferDetails={this.props.selectedOfferDetails}
               />
             </CapColumn>
           </CapRow>
@@ -994,6 +995,7 @@ Edit.propTypes = {
   setIsLoadingContent: PropTypes.func,
   // route: PropTypes.object,
   injectedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Sms/Edit/messages.js

@@ -102,4 +102,20 @@ export default defineMessages({
     id: 'creatives.containersV2.Edit.templateMarkedSuccessfully',
     defaultMessage: "Template Marked as Final Successfully",
   },
+  "Creative name": {
+    id: 'creatives.containersV2.Edit.creativeName',
+    defaultMessage: 'Creative name',
+  },
+  "Add label": {
+    id: 'creatives.containersV2.Edit.addLabel',
+    defaultMessage: 'Add label',
+  },
+  "sms": {
+    id: 'creatives.containersV2.Edit.sms',
+    defaultMessage: 'SMS',
+  },
+  "characters" : {
+    id: 'creatives.containersV2.Edit.characters',
+    defaultMessage: 'characters',
+  },
 });

package/v2Containers/TagList/index.js

@@ -31,6 +31,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     this.populateTags = this.populateTags.bind(this);
     this.populateTagForChildren = this.populateTagForChildren.bind(this);
     this.transformInjectedTags = this.transformInjectedTags.bind(this);
+    this.transformCouponTags = this.transformCouponTags.bind(this);
   }
 
   componentDidMount() {
@@ -138,6 +139,44 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     return tagsObject[tagValue];
   }
 
+  transformCouponTags(offerDetails, allTags) {
+    const couponTags = {};
+    const couponTagsKeys = Object.keys(_.get(allTags, 'coupon.subtags', []));
+    const withCouponId = (obj, id) => {
+      const tempObj = {};
+      if (obj.subtags) {
+        tempObj.subtags = _.mapValues(obj.subtags, (tag) => ({
+          ...withCouponId(tag, id),
+        }));
+      }
+      return {
+        ...obj,
+        ...tempObj,
+        couponSeriesId: id,
+      };
+    };
+    offerDetails.forEach((offer) => {
+      const { id, couponName } = offer;
+      const couponSubTags = {};
+      couponTagsKeys.forEach((couponTagKey) => {
+        const couponSubTagsObj = withCouponId(allTags.coupon.subtags[couponTagKey], id);
+        couponSubTags[couponTagKey] = couponSubTagsObj;
+      });
+      const key = couponName || id;
+      couponTags[key] = {
+        'tag-header': true,
+        'name': couponName || id,
+        'desc': couponName || id,
+        'couponSeriesId': id,
+        'subtags': couponSubTags,
+        'resolved': true,
+        'couponTags': true,
+      };
+    });
+    // eslint-disable-next-line no-param-reassign
+    allTags.coupon.subtags = couponTags;
+  }
+
   transformInjectedTags(tags) {
     _.forEach(tags, (tag) => {
       const temp = tag;
@@ -189,6 +228,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       tags = this.populateTags(this.props.tags);
       console.log('populating tags', tags);
     }
+    if (this.props.selectedOfferDetails && !_.isEmpty(this.props.selectedOfferDetails) && (tags && tags.coupon)) {
+      this.transformCouponTags(this.props.selectedOfferDetails, tags);
+    }
     tags = _.merge( {}, tags, injectedTags);
     console.log('merged tags', tags);
     return (
@@ -220,6 +262,7 @@ TagList.propTypes = {
   moduleFilterEnabled: PropTypes.bool,
   className: PropTypes.string,
   userLocale: PropTypes.string,
+  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Templates/_templates.scss

@@ -1,4 +1,6 @@
-  .ant-tabs-content{
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.ant-tabs-content{
     margin-top: 16px;
     .ant-tabs-tabpane-active{
       padding: unset;
@@ -16,6 +18,12 @@
   }
 }
 
+.ant-radio-group.#{cap-radioCard-v2} {
+  .ant-radio-button-wrapper {
+    border: 1px solid $CAP_G07;
+  }
+}
+
 .card-title {
   line-height: 24px;
   font-size: 14px;