@capillarytech/creatives-library 8.0.209 → 8.0.211

package/package.json

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

package/v2Components/HtmlEditor/components/InAppPreviewPane/__tests__/ContentOverlay.test.js

@@ -155,21 +155,35 @@ describe('ContentOverlay', () => {
     it('applies overlay positioning styles', () => {
       render(<ContentOverlay />);
       const overlay = document.querySelector('.content-overlay');
-      const styles = window.getComputedStyle(overlay);
-      expect(styles.position).toBe('absolute');
-      expect(styles.backgroundColor).toBeTruthy();
+      // Check that the overlay element exists and has the correct CSS class
+      expect(overlay).toBeInTheDocument();
+      expect(overlay).toHaveClass('content-overlay');
+      expect(overlay).toHaveClass('content-overlay--popup'); // default layout type is MODAL which maps to 'popup' class
+
+      // Check that inline styles from getOverlayStyles() are applied
+      const inlineStyles = overlay.style;
+      expect(inlineStyles.top).toBe('50%');
+      expect(inlineStyles.left).toBe('50%');
+      expect(inlineStyles.transform).toBe('translate(-50%, -50%)');
     });
 
-    it('applies iframe styles when content present', () => {
+    it('does not apply inline iframe styles (SCSS-managed)', () => {
       render(<ContentOverlay content="<p>Test</p>" />);
       const iframe = document.querySelector('iframe');
-      // Check inline styles directly as jsdom doesn't compute styles properly
-      expect(iframe.style.width).toBe('100%');
-      expect(iframe.style.height).toBe('100%');
-      // border: 'none' might be converted to empty string by React/jsdom
-      expect(['none', '']).toContain(iframe.style.border);
-      expect(iframe.style.display).toBe('block');
-      expect(iframe.style.backgroundColor).toBeTruthy();
+
+      // Verify iframe styling is managed by SCSS, not inline styles
+      // The iframe should have no inline style attribute since all styling
+      // (width: 100%, height: 100%, border: none, display: block, backgroundColor)
+      // is handled via the .content-overlay iframe CSS rule in _inAppPreviewPane.scss
+      expect(iframe.style.cssText).toBe('');
+      expect(iframe.hasAttribute('style')).toBe(false);
+
+      // Ensure no inline style properties are set
+      expect(iframe.style.width).toBe('');
+      expect(iframe.style.height).toBe('');
+      expect(iframe.style.border).toBe('');
+      expect(iframe.style.display).toBe('');
+      expect(iframe.style.backgroundColor).toBe('');
     });
   });
 

package/v2Containers/Rcs/index.js

@@ -513,17 +513,21 @@ export const Rcs = (props) => {
         case RCS_STATUSES.approved:
           setTemplateStatus(RCS_STATUSES.approved);
           break;
-        case RCS_STATUSES.rejected:
-          setTemplateStatus(RCS_STATUSES.rejected);
-          break;
         case RCS_STATUSES.pending:
           setTemplateStatus(RCS_STATUSES.pending);
           break;
         case RCS_STATUSES.awaitingApproval:
           setTemplateStatus(RCS_STATUSES.awaitingApproval);
           break;
-        default:
+        case RCS_STATUSES.unavailable:
           setTemplateStatus(RCS_STATUSES.unavailable);
+          break;
+        case RCS_STATUSES.rejected:
+          setTemplateStatus(RCS_STATUSES.rejected);
+          break;
+        default:
+          setTemplateStatus(status);
+          break;
       }
     };
   
@@ -1755,7 +1759,9 @@ const splitTemplateVarString = (str) => {
 
   const uploadRcsImage = useCallback((file, type, fileParams, index) => {
     setImageError(null);
+    const isRcsThumbnail = index === 1;
     actions.uploadRcsAsset(file, type, {
+      isRcsThumbnail,
       ...fileParams,
       dimensionType: selectedDimension,
       orientation: RCS_IMAGE_DIMENSIONS[selectedDimension].orientation,
@@ -2312,13 +2318,20 @@ const splitTemplateVarString = (str) => {
       case RCS_STATUSES.rejected:
         return (
           <>
-            <CapLabel type="label2" style={{ fontWeight: 500 }}>
+            <CapLabel type="label2" className="rcs-status-label">
               {formatMessage(messages.rejectedStatusMsg)}
             </CapLabel>
           </>
         );
-      default:
-        // all cases except approved and rejected, return awaiting approval
+      case RCS_STATUSES.unavailable:
+        return (
+          <>
+            <CapLabel type="label2" className="rcs-status-label">
+              {formatMessage(messages.unavailableStatusMsg)}
+            </CapLabel>
+          </>
+        );
+      case RCS_STATUSES.pending:
         return (
           <>
             <CapLabel type="label2" style={{ fontWeight: 500 }}>
@@ -2326,6 +2339,22 @@ const splitTemplateVarString = (str) => {
             </CapLabel>
           </>
         );
+      case RCS_STATUSES.rejected:
+        return (
+          <>
+            <CapLabel type="label2" style={{ fontWeight: 500 }}>
+              {formatMessage(messages.rejectedStatusMsg)}
+            </CapLabel>
+          </>
+        );
+      default:
+        return (
+          <>
+            <CapLabel type="label2" className="rcs-status-label">
+              {formatMessage(messages.templateStatusGeneric, { templateStatus })}
+            </CapLabel>
+          </>
+        );
     }
   };
 

package/v2Containers/Rcs/index.scss

@@ -141,4 +141,8 @@
     height: auto;
     border-radius: 4px;
   }
+}
+
+.rcs-status-label {
+  font-weight: 500;
 }

package/v2Containers/Rcs/messages.js

@@ -18,6 +18,14 @@ export default defineMessages({
     id: `${prefix}.awaitingStatusMsg`,
     defaultMessage: 'This template is awaiting approval',
   },
+  unavailableStatusMsg: {
+    id: `${prefix}.unavailableStatusMsg`,
+    defaultMessage: 'This template is unavailable',
+  },
+  templateStatusGeneric: {
+    id: `${prefix}.templateStatusGeneric`,
+    defaultMessage: 'This template has been - {templateStatus}',
+  },
   awaitingStatusDesc: {
     id: `${prefix}.awaitingStatusDesc`,
     defaultMessage:
@@ -391,6 +399,10 @@ export default defineMessages({
     id: `${prefix}.unavailable_STATUS`,
     defaultMessage: 'unavailable',
   },
+  unknown_STATUS: {
+    id: `${prefix}.unknown_STATUS`,
+    defaultMessage: 'unknown',
+  },
   templateTypeLabel: {
     id: `${prefix}.templateTypeLabel`,
     defaultMessage: 'Template Type',

package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap

@@ -137711,18 +137711,6 @@ new message content.",
                 "id": "creatives.containersV2.Rcs.carousel",
               },
             ],
-            Array [
-              Object {
-                "defaultMessage": "Template Status",
-                "id": "creatives.containersV2.Rcs.templateStatusLabel",
-              },
-            ],
-            Array [
-              Object {
-                "defaultMessage": "This template is awaiting approval",
-                "id": "creatives.containersV2.Rcs.awaitingStatusMsg",
-              },
-            ],
             Array [
               Object {
                 "defaultMessage": "Enter template name",
@@ -137855,18 +137843,6 @@ new message content.",
                 "id": "creatives.containersV2.Rcs.carousel",
               },
             ],
-            Array [
-              Object {
-                "defaultMessage": "Template Status",
-                "id": "creatives.containersV2.Rcs.templateStatusLabel",
-              },
-            ],
-            Array [
-              Object {
-                "defaultMessage": "This template is awaiting approval",
-                "id": "creatives.containersV2.Rcs.awaitingStatusMsg",
-              },
-            ],
             Array [
               Object {
                 "defaultMessage": "Enter template name",
@@ -138321,22 +138297,6 @@ new message content.",
               "type": "return",
               "value": undefined,
             },
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
           ],
         },
       }
@@ -138455,117 +138415,6 @@ new message content.",
             className="ant-spin-container ant-spin-blur"
             key="container"
           >
-            <CapRow
-              className="template-status-container"
-            >
-              <Row
-                className="cap-row-v2 template-status-container"
-                gutter={0}
-              >
-                <div
-                  className="ant-row cap-row-v2 template-status-container"
-                >
-                  <CapLabel
-                    key=".0"
-                    type="label2"
-                  >
-                    <div
-                      className="CapLabel-n7zsf5-0 jzfptu"
-                      type="label2"
-                    />
-                  </CapLabel>
-                  <CapAlert
-                    key=".1"
-                    message={
-                      <React.Fragment>
-                        <CapLabel
-                          style={
-                            Object {
-                              "fontWeight": 500,
-                            }
-                          }
-                          type="label2"
-                        />
-                      </React.Fragment>
-                    }
-                    type="warning"
-                  >
-                    <Alert
-                      className="cap-alert-v2"
-                      message={
-                        <React.Fragment>
-                          <CapLabel
-                            style={
-                              Object {
-                                "fontWeight": 500,
-                              }
-                            }
-                            type="label2"
-                          />
-                        </React.Fragment>
-                      }
-                      type="warning"
-                    >
-                      <Animate
-                        animation={Object {}}
-                        component=""
-                        componentProps={Object {}}
-                        onAppear={[Function]}
-                        onEnd={[Function]}
-                        onEnter={[Function]}
-                        onLeave={[Function]}
-                        showProp="data-show"
-                        transitionAppear={false}
-                        transitionEnter={true}
-                        transitionLeave={true}
-                        transitionName="ant-alert-slide-up"
-                      >
-                        <AnimateChild
-                          animation={Object {}}
-                          key="rc_animate_1612267539410"
-                          transitionAppear={false}
-                          transitionEnter={true}
-                          transitionLeave={true}
-                          transitionName="ant-alert-slide-up"
-                        >
-                          <div
-                            className="ant-alert ant-alert-warning ant-alert-no-icon cap-alert-v2"
-                            data-show={true}
-                            key="rc_animate_1612267539410"
-                          >
-                            <span
-                              className="ant-alert-message"
-                            >
-                              <CapLabel
-                                style={
-                                  Object {
-                                    "fontWeight": 500,
-                                  }
-                                }
-                                type="label2"
-                              >
-                                <div
-                                  className="CapLabel-n7zsf5-0 jzfptu"
-                                  style={
-                                    Object {
-                                      "fontWeight": 500,
-                                    }
-                                  }
-                                  type="label2"
-                                />
-                              </CapLabel>
-                            </span>
-                            <span
-                              className="ant-alert-description"
-                            />
-                          </div>
-                        </AnimateChild>
-                      </Animate>
-                    </Alert>
-                  </CapAlert>
-                </div>
-              </Row>
-            </CapRow>
             <CapRow
               className="cap-rcs-creatives"
             >

package/v2Containers/Rcs/tests/index.test.js

@@ -179,6 +179,18 @@ describe('Creatives rcs test/>', () => {
     expect(renderedComponent).toMatchSnapshot();
   });
 
+  it('shows generic template status message for custom status', () => {
+    const details = JSON.parse(JSON.stringify(mockData.editData1.templateDetails));
+    details.versions.base.content.RCS.rcsContent.cardContent[0].Status = 'created';
+    renderHelper({ rcsData: { templateDetails: details } });
+
+    const calledWithGeneric = formatMessage.mock.calls.some(([msg, values]) => {
+      return msg && msg.id && msg.id.indexOf('.templateStatusGeneric') !== -1 && values && values.templateStatus === 'created';
+    });
+
+    expect(calledWithGeneric).toBe(true);
+  });
+
   it('template title change', () => {
     renderHelper({});
     // Test that title field is NOT present for text_message template type (default)

package/v2Containers/Rcs/tests/utils.test.js

@@ -102,6 +102,9 @@ describe('RCS utils', () => {
     it('returns pending for awaitingApproval', () => {
       expect(getRcsStatusType(RCS_STATUSES.awaitingApproval)).toBe(RCS_STATUSES.pending);
     });
+    it('returns pending for pending', () => {
+      expect(getRcsStatusType(RCS_STATUSES.pending)).toBe(RCS_STATUSES.pending);
+    });
     it('returns rejected for rejected', () => {
       expect(getRcsStatusType(RCS_STATUSES.rejected)).toBe(RCS_STATUSES.rejected);
     });
@@ -111,8 +114,8 @@ describe('RCS utils', () => {
     it('returns approved for approved', () => {
       expect(getRcsStatusType(RCS_STATUSES.approved)).toBe(RCS_STATUSES.approved);
     });
-    it('returns approved for unknown status', () => {
-      expect(getRcsStatusType('some_unknown_status')).toBe(RCS_STATUSES.approved);
+    it('returns rejected for unknown status', () => {
+      expect(getRcsStatusType('some_unknown_status')).toBe(RCS_STATUSES.rejected);
     });
   });
 

package/v2Containers/Rcs/utils.js

@@ -11,12 +11,14 @@ export const getRcsStatusType = (status) => {
   switch (status) {
     case RCS_STATUSES.awaitingApproval:
       return RCS_STATUSES.pending;
-    case RCS_STATUSES.rejected:
-      return RCS_STATUSES.rejected;
     case RCS_STATUSES.unavailable:
       return RCS_STATUSES.unavailable;
-    default:
+    case RCS_STATUSES.approved:
       return RCS_STATUSES.approved;
+    case RCS_STATUSES.pending:
+      return RCS_STATUSES.pending;
+    default:
+      return RCS_STATUSES.rejected;
   }
 };
 

package/v2Containers/Templates/index.js

@@ -1660,13 +1660,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case RCS: {
           const status = get(template, "versions.base.content.RCS.rcsContent.cardContent[0].Status", "unavailable");
           const name = get(template, "name", "");
+          const statusDisplay=getRcsStatusType(status);
           templateData.title = (
             <CapRow>
               <CapLabel className="whatsapp-rcs-template-name">{name}</CapLabel>
               <CapRow type="flex" align="middle" className="rcs-status-container zalo-status-color">
                 <CapStatus
-                  type={getRcsStatusType(status)}
-                  text={status && this.props.intl.formatMessage(rcsMessages?.[`${status}_STATUS`])}
+                  type={statusDisplay}
+                  text={statusDisplay && this.props.intl.formatMessage(rcsMessages?.[`${statusDisplay}_STATUS`])}
                   labelType="label3"
                 />
               </CapRow>