@capillarytech/creatives-library 9.0.60 → 9.0.61-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.60",
+  "version": "9.0.61-alpha.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/TagList/index.js

@@ -110,9 +110,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     } = prevProps;
 
     if (
-      tags !== prevTags
-      || injectedTags !== prevInjectedTags
-      || selectedOfferDetails !== prevSelectedOfferDetails
+      !_.isEqual(tags, prevTags)
+      || !_.isEqual(injectedTags, prevInjectedTags)
+      || !_.isEqual(selectedOfferDetails, prevSelectedOfferDetails)
       || !_.isEqual(eventContextTags, prevEventContextTags)
       || !_.isEqual(waitEventContextTags, prevWaitEventContextTags)
     ) {

package/v2Containers/TagList/tests/TagList.test.js

@@ -134,6 +134,22 @@ describe("TagList test :  UNIT", () => {
     expect(() => unmount()).not.toThrow();
   });
 
+  it('does not regenerate tags when selectedOfferDetails gets a new [] reference with same content', () => {
+    const spy = jest.spyOn(TagList.prototype, 'populateTags');
+    const { rerender, Component, store } = initializeTagList({
+      selectedOfferDetails: [],
+      tags: TagListData.tags,
+    });
+    spy.mockClear();
+    rerender(
+      <Provider store={store}>
+        <Component {...buildProps({ selectedOfferDetails: [], tags: TagListData.tags })} />
+      </Provider>
+    );
+    expect(spy).not.toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
   it('regenerates tags when props.tags change (componentDidUpdate)', () => {
     const { rerender, Component, store } = initializeTagList({ tags: TagListData.tags });
     const extra = [

package/v2Containers/Viber/constants.js

@@ -13,6 +13,12 @@ export const VIBER_IMG_SIZE = 10000000;
 export const VIBER_VIDEO_SIZE = 209715200;
 export const charLimit = 1000;
 
+/** Stable fallbacks for TagList props — inline `= []` / `|| {}` allocate new refs every render. */
+export const EMPTY_OFFER_DETAILS = [];
+export const EMPTY_INJECTED_TAGS = {};
+export const EMPTY_TAGS = [];
+export const EMPTY_TEMPLATE_DATA = {};
+
 export const UPLOAD_VIBER_ASSET_REQUEST = 'app/v2Containers/Viber/UPLOAD_ASSET_REQUEST';
 export const UPLOAD_VIBER_ASSET_SUCCESS = 'app/v2Containers/Viber/UPLOAD_ASSET_SUCCESS';
 export const UPLOAD_VIBER_ASSET_FAILURE = 'app/v2Containers/Viber/UPLOAD_ASSET_FAILURE';

package/v2Containers/Viber/index.js

@@ -63,6 +63,10 @@ import {
   VIBER_CAROUSEL_IMG_SIZE,
   STATIC_URL,
   DYNAMIC_URL,
+  EMPTY_OFFER_DETAILS,
+  EMPTY_INJECTED_TAGS,
+  EMPTY_TAGS,
+  EMPTY_TEMPLATE_DATA,
 } from './constants';
 import withCreatives from '../../hoc/withCreatives';
 import {
@@ -129,12 +133,12 @@ export const Viber = (props) => {
     handleClose,
     onCreateComplete,
     params,
-    templateData = {},
+    templateData = EMPTY_TEMPLATE_DATA,
     actions,
     viber = {},
     getFormSubscriptionData,
     viberData = {},
-    selectedOfferDetails = [],
+    selectedOfferDetails = EMPTY_OFFER_DETAILS,
     eventContextTags,
     waitEventContextTags,
     // TestAndPreviewSlidebox props
@@ -258,7 +262,7 @@ export const Viber = (props) => {
         setTemplateMediaType(VIBER_MEDIA_TYPES.TEXT);
       }
     }
-  }, [viber.templateDetails || templateData]);
+  }, [params?.id, viber.templateDetails, templateData]);
 
   // Reports live message-content validity to a parent (e.g. CreativesContainer's
   // slidebox) so it can disable its own Done/Preview-and-test buttons whenever the
@@ -332,7 +336,8 @@ export const Viber = (props) => {
     globalActionsProps.fetchSchemaForEntity(query);
   };
 
-  const tags = metaEntities?.tags?.standard || [];
+  const tags = metaEntities?.tags?.standard ?? EMPTY_TAGS;
+  const resolvedInjectedTags = injectedTags ?? EMPTY_INJECTED_TAGS;
   // tags Code end here
 
   // validation on Text area and tags validation
@@ -393,7 +398,7 @@ export const Viber = (props) => {
           onContextChange={handleOnTagsContextChange}
           location={location}
           tags={tags}
-          injectedTags={injectedTags || {}}
+          injectedTags={resolvedInjectedTags}
           id="viber_tags"
           userLocale={localStorage.getItem("jlocale") || "en"}
           selectedOfferDetails={selectedOfferDetails}
@@ -882,7 +887,7 @@ export const Viber = (props) => {
               onContextChange={handleOnTagsContextChange}
               location={location}
               tags={tags}
-              injectedTags={injectedTags || {}}
+              injectedTags={resolvedInjectedTags}
               id={`viber_carousel_card_tags_${cardIndex}`}
               userLocale={localStorage.getItem("jlocale") || "en"}
               selectedOfferDetails={selectedOfferDetails}
@@ -1260,7 +1265,7 @@ export const Viber = (props) => {
         onContextChange={handleOnTagsContextChange}
         location={location}
         tags={tags}
-        injectedTags={injectedTags || {}}
+        injectedTags={resolvedInjectedTags}
         userLocale={localStorage.getItem("jlocale") || "en"}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
@@ -1578,15 +1583,16 @@ export const Viber = (props) => {
           </CapButton>
         </ViberFooter>
       </CapSpin>
-      {/* Test and Preview Slidebox */}
-      <TestAndPreviewSlidebox
-        show={showTestAndPreviewSlidebox || propsShowTestAndPreviewSlidebox}
-        onClose={handleCloseTestAndPreview}
-        channel={VIBER}
-        formData={getTemplateContent()} // Pass templateContent as formData (contains all payload fields)
-        content={getTemplateContent()} // Also pass as content for preview (contains viberPreviewContent)
-        formatMessage={formatMessage}
-      />
+      {(showTestAndPreviewSlidebox || propsShowTestAndPreviewSlidebox) && (
+        <TestAndPreviewSlidebox
+          show={showTestAndPreviewSlidebox || propsShowTestAndPreviewSlidebox}
+          onClose={handleCloseTestAndPreview}
+          channel={VIBER}
+          formData={getTemplateContent()}
+          content={getTemplateContent()}
+          formatMessage={formatMessage}
+        />
+      )}
     </>
   );
 };