@capillarytech/creatives-library 8.0.318 → 8.0.320

package/v2Containers/SmsTrai/Edit/index.scss

@@ -0,0 +1,121 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+.sms-trai-segmented-editor {
+  .ant-input {
+    margin-bottom: 0.125rem;
+  }
+}
+
+/*
+ * DLT SMS fallback edit only: mirror RCS rich-card message box (`.cap-rcs-creatives` + default
+ * VarSegment `rcs-edit-template-message-input` / `rcs-edit-template-message-split`).
+ */
+.sms-trai-edit-rcs-fallback {
+  width: 100%;
+
+  .rcs_text_area_wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .rcs_text_area_wrapper .rcs-edit-template-message-input {
+    background-color: $CAP_G10;
+    padding: $CAP_SPACE_12 $CAP_SPACE_16;
+  }
+
+  .rcs_text_area_wrapper .rcs-edit-template-message-split {
+    margin-bottom: $CAP_SPACE_08;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $FONT_COLOR_03;
+    font-weight: 500;
+  }
+
+  .rcs_text_area_wrapper .rcs-edit-template-message-input .ant-input,
+  .rcs_text_area_wrapper .rcs-edit-template-message-input textarea.ant-input {
+    width: 100%;
+    box-sizing: border-box;
+    min-height: 2.5rem;
+    padding-top: $CAP_SPACE_08;
+    padding-bottom: $CAP_SPACE_08;
+    border-color: $CAP_G07;
+    box-shadow: none;
+    overflow: hidden;
+  }
+
+  .rcs_text_area_wrapper .rcs-edit-template-message-input .ant-input:focus,
+  .rcs_text_area_wrapper .rcs-edit-template-message-input .ant-input:active,
+  .rcs_text_area_wrapper .rcs-edit-template-message-input textarea.ant-input:focus,
+  .rcs_text_area_wrapper .rcs-edit-template-message-input textarea.ant-input:active {
+    border-color: $CAP_G07;
+    box-shadow: none;
+    outline: none;
+  }
+
+  /*
+   * DLT per-slot hint: long selector (under CapSpin + message row) for specificity without !important.
+   */
+  .rcs_text_area_wrapper .rcs-edit-template-message-input .var-segment-message-editor__var-slot {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .rcs_text_area_wrapper
+    .rcs-edit-template-message-input
+    .var-segment-message-editor__var-slot
+    span.sms-trai-rcs-fallback-var-hint {
+    display: block;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    margin-top: $CAP_SPACE_04;
+    margin-left: auto;
+    margin-right: 0;
+    width: fit-content;
+    max-width: 100%;
+    text-align: right;
+    color: $FONT_COLOR_02;
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    opacity: 0.92;
+  }
+
+  /* Footer “1 SMS (n characters)” — match RCS message typography, not muted gray */
+  .rcs-character-count,
+  .rcs-character-count--compact {
+    color: $FONT_COLOR_03;
+    font-weight: 500;
+  }
+}
+
+.rcs-character-count {
+  display: block;
+  margin-top: $CAP_SPACE_16;
+  margin-bottom: $CAP_SPACE_04;
+  text-align: right;
+  color: $FONT_COLOR_02;
+  width: 100%;
+}
+
+.rcs-character-count--compact {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+}
+
+/* Non–RCS fallback: segmented editor shell + character count row (was inline styles on CapRow) */
+.sms-trai-editor-segment-row {
+  background-color: $CAP_G10;
+  padding: $CAP_SPACE_16;
+}
+
+.sms-trai-length-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: $CAP_SPACE_04;
+}
+
+.sms-trai-edit-bottom-spacer {
+  margin-bottom: 6.25rem;
+}

package/v2Containers/SmsTrai/Edit/messages.js

@@ -11,10 +11,6 @@ export default defineMessages({
     id: `${prefix}.saveButtonLabel`,
     defaultMessage: 'Save',
   },
-  cancelButtonLabel: {
-    id: `${prefix}.cancelButtonLabel`,
-    defaultMessage: 'Cancel',
-  },
   traiEditTitle: {
     id: `${prefix}.traiEditTitle`,
     defaultMessage: 'Message',
@@ -35,6 +31,11 @@ export default defineMessages({
     id: `${prefix}.totalCharacters`,
     defaultMessage: '{smsCount} SMS ({number} characters)',
   },
+  /** Primary counter in edit UI (aligned with RCS / standard Edit SMS reference). */
+  charactersCountLabel: {
+    id: `${prefix}.charactersCountLabel`,
+    defaultMessage: 'Characters count {current}/{max}',
+  },
   smsEditNotification: {
     id: `${prefix}.smsEditNotification`,
     defaultMessage: 'Sms template updated successfully',
@@ -72,4 +73,8 @@ export default defineMessages({
     id: `${prefix}.testAndPreviewButtonLabel`,
     defaultMessage: 'Preview and Test',
   },
+  incompleteOrInvalidTagsError: {
+    id: `${prefix}.incompleteOrInvalidTagsError`,
+    defaultMessage: 'Incomplete or invalid tags. Please provide values for all variables (e.g. {{optout}}, {{fullname}}).',
+  },
 });