@capillarytech/creatives-library 6.8.7 → 6.8.8

package/v2Containers/Templates/index.js

@@ -81,7 +81,8 @@ const LINE_FILTERS = {
   ALL: 'all',
   TEXT: 'text',
   IMAGE_VIDEO: 'image',
-  IMAGE_MAP: 'imagemap'
+  IMAGE_MAP: 'imagemap',
+  IMAGE_CAROUSEL: 'template',
 };
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -640,11 +641,34 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 stickerUrl = '',
                 animatedStickerUrl = '',
                 baseUrl = '',
+                template: carouselTemplate,
               }] = [{}],
             } = {},
           } = template.versions.base;
           templateData.content = text;
           templateData.url = originalContentUrl || animatedStickerUrl || stickerUrl || (baseUrl ? `${baseUrl}/1040` : '');
+          if (carouselTemplate) {
+            const carouselContent = get(carouselTemplate, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) );
+            templateData.content = (
+              <div style={{ display: 'flex'}}>
+                {
+                  carouselContent.map(({
+                    imageUrl,
+                    actionLabel
+                  }) => (
+                    <img
+                      width={208}
+                      height={279}
+                      src={imageUrl}
+                      alt={actionLabel}
+                      key={`${imageUrl}_${actionLabel}`}
+                    />
+                  ))
+                }
+              </div>
+            );
+            templateData.className = 'carousel-img-section';
+          }
           break;
         }
         default:
@@ -1783,7 +1807,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <CapRadio.CapRadioGroup className="line-filters" defaultValue={lineFilter} onChange={this.setLineFilter}>
               {
                 (() => {
-                  const { ALL, TEXT, IMAGE_VIDEO, STICKER, IMAGE_MAP } = LINE_FILTERS;
+                  const { ALL, TEXT, IMAGE_VIDEO, IMAGE_CAROUSEL, IMAGE_MAP } = LINE_FILTERS;
                   return (
                     <>
                       <CapRadio.Button value={ALL}><CapLabel type="label2">
@@ -1798,6 +1822,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       <CapRadio.Button value={IMAGE_MAP}><CapLabel type="label2">
                         <FormattedMessage {...messages.imageMapTemplate} />
                       </CapLabel></CapRadio.Button>
+                      <CapRadio.Button value={IMAGE_CAROUSEL}><CapLabel type="label2">
+                        <FormattedMessage {...messages.imageCarouselTemplate} />
+                      </CapLabel></CapRadio.Button>
                     </>
                   );
                 })()

package/v2Containers/Templates/messages.js

@@ -242,6 +242,10 @@ export default defineMessages({
     id: `${scope}.imageMapTemplate`,
     defaultMessage: `Rich message`,
   },
+  "imageCarouselTemplate": {
+    id: `${scope}.imageCarouselTemplate`,
+    defaultMessage: `Card message`,
+  },
   "selectDefaultButton": {
     id: `${scope}.selectDefaultButton`,
     defaultMessage: `Select`,