@capillarytech/creatives-library 8.0.345-alpha.14 → 8.0.345-alpha.15

package/v2Components/SmsFallback/useLocalTemplateList.js

@@ -0,0 +1,92 @@
+import { useState, useCallback, useRef } from 'react';
+
+/**
+ * @param {Object} options
+ * @param {(params: { page: number, search: string, reset: boolean }) => Promise<{ templates: Array, totalCount: number }>} options.fetchTemplates
+ * @param {number} [options.perPage=25]
+ */
+export function useLocalTemplateList({ fetchTemplates, perPage = 25 }) {
+  const [listData, setListData] = useState({ templates: [], totalCount: 0 });
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [search, setSearchState] = useState('');
+  const searchRef = useRef('');
+  /** Drops stale responses when a newer fetch starts (search / reset while a request is in flight). */
+  const fetchGenerationRef = useRef(0);
+  const setSearch = useCallback((value) => {
+    const term = typeof value === 'string' ? value : '';
+    searchRef.current = term;
+    setSearchState(term);
+  }, []);
+  const lastFetchFullPageRef = useRef(false);
+
+  const { templates = [], totalCount = 0 } = listData ?? {};
+  const hasKnownTotal = (totalCount ?? 0) > 0;
+  const hasMoreByTotal = (totalCount ?? 0) > (templates?.length ?? 0);
+  const hasMoreByFullPage =
+    !hasKnownTotal && lastFetchFullPageRef.current && (templates?.length ?? 0) > 0;
+  const canLoadMore = (hasMoreByTotal || hasMoreByFullPage) && !loading;
+
+  const runFetch = useCallback(
+    async ({ page: p = 1, reset = true, search: searchTerm } = {}) => {
+      const term = searchTerm !== undefined ? searchTerm : searchRef.current;
+      const gen = ++fetchGenerationRef.current;
+      setLoading(true);
+      try {
+        const result = await fetchTemplates({ page: p, search: term, reset });
+        if (gen !== fetchGenerationRef.current) {
+          return;
+        }
+        const nextTemplates = result?.templates ?? [];
+        const nextTotalCount = result?.totalCount ?? 0;
+        lastFetchFullPageRef.current = nextTemplates.length >= perPage;
+        setListData((prev) => ({
+          templates: reset ? nextTemplates : [...(prev.templates || []), ...nextTemplates],
+          totalCount: nextTotalCount > 0 ? nextTotalCount : (reset ? 0 : prev.totalCount),
+        }));
+        setPage(p);
+      } catch (e) {
+        if (gen !== fetchGenerationRef.current) {
+          return;
+        }
+        lastFetchFullPageRef.current = false;
+        if (reset) {
+          setListData({ templates: [], totalCount: 0 });
+          setPage(1);
+        }
+      } finally {
+        if (gen === fetchGenerationRef.current) {
+          setLoading(false);
+        }
+      }
+    },
+    [fetchTemplates, perPage]
+  );
+
+  const loadMore = useCallback(() => {
+    if (!canLoadMore) return;
+    runFetch({ page: page + 1, reset: false, search: searchRef.current });
+  }, [canLoadMore, page, runFetch]);
+
+  const reset = useCallback(
+    (searchTerm) => {
+      const term = searchTerm !== undefined ? searchTerm : searchRef.current;
+      setSearch(term);
+      lastFetchFullPageRef.current = false;
+      runFetch({ page: 1, reset: true, search: term });
+    },
+    [runFetch, setSearch]
+  );
+
+  return {
+    templates,
+    totalCount,
+    loading,
+    page,
+    search,
+    setSearch,
+    loadMore,
+    reset,
+    canLoadMore,
+  };
+}

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -537,20 +537,21 @@
       .unicode-disabled{
         font-size: 16px;
       }
+      position: absolute;
+      overflow: auto;
+      top: 0;
+      left: 17%;
+      white-space: pre-wrap;
+      word-break: break-word;
+      max-height: 100%;
+      line-height: 14px;
+      font-size: 10px;
+      font-family: 'open-sans';
+
       &.sms {
-        max-height: 100%;
-        position: absolute;
         // width: initial;
-        overflow: auto;
-        top: 0;
-        left: 17%;
-        white-space: pre-wrap;
-        word-break: break-word;
-        line-height: 14px;
         padding: 0 8px 8px 8px;
-        font-size: 10px;
         width: 100%;
-        font-family: 'open-sans';
         .rcs-image{
           width: 100%;
           height: 123px;
@@ -582,22 +583,12 @@
       &:not(.sms){
         padding: 4px;
         background: #3F51B5;
-        position: absolute;
         // width: initial;
-        overflow: auto;
-        top: 0;
-        left: 17%;
-        white-space: pre-wrap;
-        word-break: break-word;
         border-radius: 4px;
-        max-height: 100%;
         color: #FFFFFF;
         width: 70%;
         min-height: 26px;
-        line-height: 14px;
         padding: 8px;
-        font-size: 10px;
-        font-family: 'open-sans';
       }
       &.message-pop-carousel {
         position: relative; 
@@ -842,6 +833,27 @@
   }
 }
 
+.shell-v2.rcs-preview {
+  // Override `.message-pop:not(.sms)` (blue background) for RCS carousel cards.
+  .msg-container.sms {
+    .message-pop.sms {
+      .rcs-carousel-card {
+        background: $CAP_WHITE;
+        color: $CAP_G01;
+        width: 10.4rem;
+        left: 0;
+        flex-shrink: 0;
+        padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
+        border-radius: 0.428rem;
+
+        .carousel-title {
+          font-weight: 700 !important;
+        }
+      }
+    }
+  }
+}
+
 .align-center {
   text-align: center;
 }
@@ -1012,9 +1024,7 @@
   top: 0;
 }
 .video-icon {
-  position: absolute;
-  right: -17px;
-  bottom: -17px;
+  position: sticky;
 }
 
 .zalo-preview-container {

package/v2Components/TemplatePreview/constants.js

@@ -0,0 +1,2 @@
+/** Matches {{ varName }} placeholders (alphanumeric + underscore) */
+export const TEMPLATE_VAR_REGEX = /\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g;

package/v2Components/TemplatePreview/index.js

@@ -52,6 +52,7 @@ import { QUICK_REPLY, WHATSAPP_CATEGORIES, PHONE_NUMBER } from '../../v2Containe
 import { RCS_BUTTON_TYPES, LEFT, HORIZONTAL, VERTICAL, RIGHT} from '../../v2Containers/Rcs/constants';
 import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
 import { CAROUSEL } from '../../v2Containers/MobilePushNew/constants';
+import { TEMPLATE_VAR_REGEX } from './constants';
 
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
@@ -234,7 +235,23 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
     const { formatMessage } = intl;
     const { rcsPreviewContent, inAppPreviewContent, viberPreviewContent, isBeeFreeTemplate } = content || {};
-    const { rcsImageSrc, rcsVideoSrc, rcsTitle, rcsDesc, rcsSuggestions } = rcsPreviewContent || {};
+    const normalizedRcsPreviewContent = Array.isArray(rcsPreviewContent)
+      ? { carouselData: rcsPreviewContent }
+      : (rcsPreviewContent || {});
+    const {
+      rcsImageSrc,
+      rcsVideoSrc,
+      rcsTitle,
+      rcsDesc,
+      rcsSuggestions,
+      carouselData: rcsCarouselData,
+      rcsCarouselData: rcsCarouselDataAlt,
+      cardVarMapped: rcsCardVarMapped,
+    } = normalizedRcsPreviewContent;
+    const resolvedRcsCarouselData =
+      Array.isArray(rcsCarouselData) && rcsCarouselData.length > 0
+        ? rcsCarouselData
+        : rcsCarouselDataAlt;
     const {
       videoParams,
       imageURL,
@@ -315,6 +332,18 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       'flex-shrink': 0,
       'left': 0,
     };
+
+    const resolveVarsWithMap = (input, varMap) => {
+      if (input === null || input === undefined) return '';
+      const str = typeof input === 'string' ? input : String(input);
+      return str.replace(TEMPLATE_VAR_REGEX, (token, varName) => {
+        const mappedValue = varMap?.[varName];
+        if (mappedValue === null || mappedValue === undefined || String(mappedValue) === '') {
+          return token;
+        }
+        return String(mappedValue);
+      });
+    };
     const getVideoContent = ({
       video,
       actionUrl,
@@ -471,13 +500,15 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
     const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
 
-    const renderRcsSuggestionsPreview = () => {
+    const renderRcsSuggestionsPreview = (suggestionsArg) => {
       const renderArray = [];
-      (rcsSuggestions || []).forEach((suggestion) => {
-        renderArray.push(<CapDivider className="whatsapp-divider" />);
+      const suggestions = Array.isArray(suggestionsArg) ? suggestionsArg : (rcsSuggestions || []);
+      (suggestions || []).forEach((suggestion, idx) => {
+        const suggestionKey = `${suggestion?.type || 'unknown'}-${suggestion?.text || ''}-${idx}`;
+        renderArray.push(<CapDivider key={`rcs-divider-${suggestionKey}`} className="whatsapp-divider" />);
         if (suggestion.type === RCS_BUTTON_TYPES.QUICK_REPLY) {
           renderArray.push(
-            <CapLabel type="label21" className="rcs-cta-preview">
+            <CapLabel key={`rcs-suggestion-${suggestionKey}`} type="label21" className="rcs-cta-preview">
               <CapIcon
                 type='small-link'
                 size="xs"
@@ -487,14 +518,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
           );
         } else if (suggestion.type === RCS_BUTTON_TYPES.CTA) {
           renderArray.push(
-            <CapLabel type="label21" className="rcs-cta-preview">
+            <CapLabel key={`rcs-suggestion-${suggestionKey}`} type="label21" className="rcs-cta-preview">
               <CapIcon type="launch" size="xs" />
               {suggestion.text}
             </CapLabel>,
           );
         } else if (suggestion.type === RCS_BUTTON_TYPES.PHONE_NUMBER) {
           renderArray.push(
-            <CapLabel type="label21" className="rcs-cta-preview">
+            <CapLabel key={`rcs-suggestion-${suggestionKey}`} type="label21" className="rcs-cta-preview">
               <CapIcon type="call" size="xs" />
               {suggestion.text}
             </CapLabel>,
@@ -513,7 +544,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
           className="message-pop-item align-left rcs-content"
           fontWeight="bold"
         >
-          {rcsTitle}
+          {resolveVarsWithMap(rcsTitle, rcsCardVarMapped)}
         </CapLabel>
         <CapDivider className="whatsapp-divider" />
       </>
@@ -523,7 +554,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             type="label5"
             className="message-pop-item align-left rcs-desc rcs-content"
           >
-            {rcsDesc}
+            {resolveVarsWithMap(rcsDesc, rcsCardVarMapped)}
           </CapLabel>
         )}
         {renderRcsSuggestionsPreview()}
@@ -540,50 +571,134 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
           />
         )}
         {rcsVideoSrc && (
-          <div className="video-preview">
+          <CapRow className="video-preview">
             <CapImage
               src={rcsVideoSrc}
               className="rcs-image"
               alt={formatMessage(messages.previewGenerated)}
             />
-            <div className="icon-position">
+            <CapRow className="icon-position">
               <CapImage
                 className="video-icon"
                 src={videoPlay}
               />
-            </div>
-          </div>
+            </CapRow>
+          </CapRow>
         )}   
       </>
     );
 
     const renderRcsPreviewContent = () => {
+      const carouselCards = Array.isArray(resolvedRcsCarouselData) ? resolvedRcsCarouselData : [];
+      if (carouselCards.length > 0) {
+        return (
+          <CapRow className="msg-container sms">
+            <CapRow className="message-pop sms">
+              <CapRow className="msg-container-carousel">
+                <CapRow className="scroll-container">
+                  {carouselCards.map((card, idx) => {
+                    const key = `rcs-carousel-${idx}-${card?.bodyText || card?.imageSrc || card?.videoPreviewImg || ''}`;
+                    const isVideo = (card?.mediaType || '').toLowerCase() === 'video';
+                    const cardSuggestions = Array.isArray(card?.suggestions) ? card.suggestions : [];
+                    const effectiveCardVarMap = card?.cardVarMapped || rcsCardVarMapped;
+                    const suggestionsNode = cardSuggestions.length > 0
+                      ? renderRcsSuggestionsPreview(cardSuggestions)
+                      : null;
+
+                    const resolvedCardTitle = resolveVarsWithMap(card?.title, effectiveCardVarMap);
+                    const resolvedCardBodyText = resolveVarsWithMap(card?.bodyText, effectiveCardVarMap);
+
+                    return (
+                      <CapRow
+                        key={key}
+                        className="message-pop align-left message-pop-carousel rcs-carousel-card"
+                      >
+                        <CapRow className="whatsapp-content">
+                          {!isVideo && (
+                            <CapImage
+                              src={card?.imageSrc ? card.imageSrc : whatsappImageEmptyPreview}
+                              className="whatsapp-image"
+                              alt={formatMessage(messages.previewGenerated)}
+                            />
+                          )}
+                          {isVideo && (
+                            <CapTooltip title={formatMessage(messages.videoPreviewTooltip)}>
+                              <CapRow className="video-preview">
+                                <CapImage
+                                  src={card?.videoPreviewImg ? card.videoPreviewImg : whatsappVideoEmptyPreview}
+                                  className="whatsapp-image"
+                                  alt={formatMessage(messages.previewGenerated)}
+                                />
+                                <CapRow className="icon-position">
+                                  <CapImage className="video-icon" src={videoPlay} alt="Play" />
+                                </CapRow>
+                              </CapRow>
+                            </CapTooltip>
+                          )}
+
+                          {(resolvedCardTitle || resolvedCardBodyText) && (
+                            <CapRow className="carousel-content">
+                              {!!resolvedCardTitle && (
+                                <CapLabel
+                                  type={card?.titleLabelType || 'label1'}
+                                  className="carousel-title"
+                                >
+                                  {resolvedCardTitle}
+                                </CapLabel>
+                              )}
+                              {!!resolvedCardBodyText && (
+                                <CapLabel
+                                  type={card?.bodyLabelType || 'label2'}
+                                  className="carousel-message"
+                                >
+                                  {resolvedCardBodyText}
+                                </CapLabel>
+                              )}
+                            </CapRow>
+                          )}
+
+                          {!!suggestionsNode && (
+                            <>
+                              {suggestionsNode}
+                            </>
+                          )}
+                        </CapRow>
+                      </CapRow>
+                    );
+                  })}
+                </CapRow>
+              </CapRow>
+            </CapRow>
+          </CapRow>
+        );
+      }
+
       if (rcsOrientation === HORIZONTAL) {
         return rcsType === RIGHT ? (
-          <div className="msg-container sms">
-            <div className="message-pop sms horizontal">
+          <CapRow className="msg-container sms">
+            <CapRow className="message-pop sms horizontal">
               <CapColumn className="rcs-preview-text" span={12}>{renderTextPreviewContent()}</CapColumn>
               <CapColumn span={12}>{renderMediaPreviewContent()}</CapColumn>
-            </div>
-          </div>
+            </CapRow>
+          </CapRow>
 
         ) : (
-          <div className="msg-container sms">
-            <div className="message-pop sms horizontal">
+          <CapRow className="msg-container sms">
+            <CapRow className="message-pop sms horizontal">
               <CapColumn span={12}>{renderMediaPreviewContent()}</CapColumn>
               <CapColumn className="rcs-preview-text" span={12}>{renderTextPreviewContent()}</CapColumn>
-            </div>
-          </div>
+            </CapRow>
+          </CapRow>
         );
       }
     
       return (
-        <div className="msg-container sms">
-          <div className="message-pop sms">
+        <CapRow className="msg-container sms">
+          <CapRow className="message-pop sms">
             {renderMediaPreviewContent()}
             {renderTextPreviewContent()}
-          </div>
-        </div>
+          </CapRow>
+        </CapRow>
       );
     };
 
@@ -1291,14 +1406,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
               ""
             )}
             {channel?.toUpperCase() === RCS && (
-              <div className="shell-v2 align-center rcs-preview">
+              <CapRow className="shell-v2 align-center rcs-preview">
                 <CapImage
                   className="preview-image"
                   src={rcsIosPreview ? smsMobileIos : smsMobileAndroid}
                   alt={formatMessage(messages.previewGenerated)}
                 />
                 {renderRcsPreviewContent()}
-              </div>
+              </CapRow>
                 
             )}
             {channel?.toUpperCase() === ZALO && (
@@ -1499,4 +1614,4 @@ TemplatePreview.propTypes = {
   rcsOrientation: PropTypes.string,
 };
 
-export default (injectIntl(TemplatePreview));
+export default (injectIntl(TemplatePreview));

package/v2Components/TemplatePreview/tests/index.test.js

@@ -2,6 +2,9 @@ import React from 'react';
 import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 
 import { TemplatePreview } from '../index';
+import { RCS } from '../../../v2Containers/CreativesContainer/constants';
+import whatsappImageEmptyPreview from '../assets/images/empty_image_preview.svg';
+import whatsappVideoEmptyPreview from '../assets/images/empty_video_preview.svg';
 
 describe('Test Templates container', () => {
   let renderedComponent;
@@ -69,4 +72,143 @@ describe('Test Templates container', () => {
     });
     expect(renderedComponent).toMatchSnapshot();
   });
+
+  describe('RCS carousel preview branches', () => {
+    const buildRcsContent = (cards) => ({
+      rcsPreviewContent: {
+        carouselData: cards,
+      },
+    });
+
+    const getNodesByClassName = (className) =>
+      renderedComponent.findWhere((node) => node.prop('className') === className);
+
+    it('renders image and video cards with proper media-specific markup', () => {
+      renderFunction(
+        RCS,
+        buildRcsContent([
+          {
+            mediaType: 'image',
+            imageSrc: 'https://example.com/image-card.jpg',
+            bodyText: 'image body',
+            suggestions: [],
+          },
+          {
+            mediaType: 'video',
+            videoPreviewImg: 'https://example.com/video-thumb.jpg',
+            bodyText: 'video body',
+            suggestions: [],
+          },
+        ]),
+        '',
+        0,
+      );
+
+      // Video card should render tooltip/video icon path; image-only card should not.
+      expect(renderedComponent.find('CapTooltip')).toHaveLength(1);
+      expect(
+        renderedComponent.findWhere((node) => node.prop('className') === 'video-icon')
+      ).toHaveLength(1);
+
+      // Both cards render media containers.
+      expect(
+        renderedComponent.findWhere((node) => node.prop('className') === 'whatsapp-image')
+      ).toHaveLength(2);
+    });
+
+    it('renders per-card suggestions only for cards that provide suggestions', () => {
+      renderFunction(
+        RCS,
+        buildRcsContent([
+          {
+            mediaType: 'image',
+            imageSrc: 'https://example.com/with-suggestions.jpg',
+            bodyText: 'has suggestions',
+            suggestions: [
+              { type: 'QUICK_REPLY', text: 'Reply 1' },
+              { type: 'CTA', text: 'Visit' },
+            ],
+          },
+          {
+            mediaType: 'image',
+            imageSrc: 'https://example.com/no-suggestions.jpg',
+            bodyText: 'no suggestions',
+            suggestions: [],
+          },
+        ]),
+        '',
+        0,
+      );
+
+      // Suggestion labels/icons should be rendered only from first card.
+      expect(getNodesByClassName('rcs-cta-preview')).toHaveLength(2);
+      expect(getNodesByClassName('whatsapp-divider')).not.toHaveLength(0);
+    });
+
+    it('falls back to empty preview assets when image/video media src is missing', () => {
+      renderFunction(
+        RCS,
+        buildRcsContent([
+          {
+            mediaType: 'image',
+            bodyText: 'fallback image',
+            suggestions: [],
+          },
+          {
+            mediaType: 'video',
+            bodyText: 'fallback video',
+            suggestions: [],
+          },
+        ]),
+        '',
+        0,
+      );
+
+      const mediaImageNodes = renderedComponent.findWhere(
+        (node) => node.name() === 'CapImage' && node.prop('className') === 'whatsapp-image'
+      );
+      const mediaSrcs = mediaImageNodes.map((node) => node.prop('src'));
+
+      expect(mediaSrcs).toContain(whatsappImageEmptyPreview);
+      expect(mediaSrcs).toContain(whatsappVideoEmptyPreview);
+    });
+
+    it('generates unique carousel keys using rcs-carousel-<idx>-<bodyText|imageSrc|videoPreviewImg>', () => {
+      renderFunction(
+        RCS,
+        buildRcsContent([
+          {
+            mediaType: 'image',
+            imageSrc: 'https://example.com/one.jpg',
+            bodyText: 'same body',
+            suggestions: [],
+          },
+          {
+            mediaType: 'image',
+            imageSrc: 'https://example.com/two.jpg',
+            bodyText: 'same body',
+            suggestions: [],
+          },
+          {
+            mediaType: 'video',
+            videoPreviewImg: 'https://example.com/three-thumb.jpg',
+            bodyText: 'same body',
+            suggestions: [],
+          },
+        ]),
+        '',
+        0,
+      );
+
+      const cardNodes = getNodesByClassName('message-pop align-left message-pop-carousel rcs-carousel-card');
+      const keys = cardNodes.map((node) => node.key());
+
+      expect(keys).toEqual([
+        'rcs-carousel-0-same body',
+        'rcs-carousel-1-same body',
+        'rcs-carousel-2-same body',
+      ]);
+      expect(new Set(keys).size).toBe(keys.length);
+    });
+  });
 });

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -18,7 +18,7 @@ import injectReducer from '../../utils/injectReducer';
 import injectSaga from '../../utils/injectSaga';
 
 import CommonTestAndPreview from '../CommonTestAndPreview';
-import { CHANNELS } from '../CommonTestAndPreview/constants';
+import { CHANNELS, RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../CommonTestAndPreview/constants';
 import * as commonTestAndPreviewActions from '../CommonTestAndPreview/actions';
 import { commonTestAndPreviewSaga } from '../CommonTestAndPreview/sagas';
 import commonTestAndPreviewReducer from '../CommonTestAndPreview/reducer';
@@ -78,6 +78,16 @@ TestAndPreviewSlidebox.propTypes = {
   content: PropTypes.string,
   beeInstance: PropTypes.object,
   currentTab: PropTypes.number,
+  smsFallbackContent: PropTypes.shape({
+    templateContent: PropTypes.string,
+    senderId: PropTypes.string,
+    templateName: PropTypes.string,
+    [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: PropTypes.object,
+  }),
+  /** Passed to CommonTestAndPreview for RCS test-meta resolution (slot semantics vs full-mode). */
+  rcsTestPreviewOptions: PropTypes.shape({
+    isLibraryMode: PropTypes.bool,
+  }),
   // Redux props are passed through
   actions: PropTypes.object.isRequired,
   extractedTags: PropTypes.array.isRequired,
@@ -109,10 +119,12 @@ TestAndPreviewSlidebox.defaultProps = {
   currentTab: 1,
   messageMetaConfigId: null,
   prefilledValues: {},
+  rcsTestPreviewOptions: undefined,
   senderDetailsByChannel: {},
   wecrmAccounts: [],
   isLoadingSenderDetails: false,
   orgUnitId: -1,
+  smsFallbackContent: null,
 };
 
 const mapStateToProps = createStructuredSelector({