@capillarytech/creatives-library 8.0.340-0 → 8.0.340-beta.0

package/app.js

@@ -1,4 +1,5 @@
 import 'babel-polyfill';
+import 'whatwg-fetch';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
@@ -26,6 +27,10 @@ import './styles/main.scss';
 import pathConfig from './config/path';
 import ignoredErrorMessages from './utils/ignoredErrorMessages';
 import App from './containers/App';
+import ConfigProvider from 'antd/lib/config-provider';
+import { getCapThemeConfig, loadCapUI } from '@capillarytech/cap-ui-library/utils';
+
+loadCapUI();
 
 try {
   const { setupNewrelicWebVitals } = require('./newRelic/utils'); 
@@ -114,7 +119,9 @@ const render = (messages) => {
     <Provider store={store}>
         <LanguageProvider messages={messages}>
           <ErrorBoundary FallbackComponent={ErrorScreen}>
-            <App />
+            <ConfigProvider theme={getCapThemeConfig()}>
+              <App />
+            </ConfigProvider>
           </ErrorBoundary>
         </LanguageProvider>
     </Provider>,

package/global-styles.js

@@ -17,4 +17,8 @@ export default createGlobalStyle`
   .text-align-center {
     text-align: center;
   }
+
+  .ant-spin-nested-loading {
+    width: 100%;
+  }
 `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.340-0",
+  "version": "8.0.340-beta.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -17,7 +17,7 @@
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "7.2.1",
     "@capillarytech/cap-ui-utils": "3.0.4",
-    "@capillarytech/vulcan-react-sdk": "^2.3.5",
+    "@capillarytech/vulcan-react-sdk": "3.0.1",
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.11",

package/styles/components/navigation/_leftnav.scss

@@ -221,6 +221,6 @@
   width: 11.25rem;  
 }
 
-.l1-enabled-popover-container .ant-popover-inner-content .l2-quick-link-container {
+.l1-enabled-popover-container .l2-quick-link-container {
   padding: 0.571rem 0.471rem;
 }

package/v2Components/AccessForbidden/index.js

@@ -4,7 +4,7 @@ import { CapRow, CapHeading } from '@capillarytech/cap-ui-library';
 import messages from './messages';
 
 const AccessForbidden = () => (
-  <CapRow className="margin-t-32 text-align-center">
+  <CapRow useLegacy className="margin-t-32 text-align-center">
     <CapHeading type="h2">
       <FormattedMessage {...messages.forbiddenHeader} />
     </CapHeading>

package/v2Components/CapActionButton/index.js

@@ -245,7 +245,7 @@ export const CapActionButton = (props) => {
                     {renderLength(phoneNumber.length, PHONE_NUMBER_MAX_LENGTH)}
                   </CapColumn>
                 </CapRow>
-                <CapRow className="rcs-cta-save-delete-btn">
+                <CapRow useLegacy className="rcs-cta-save-delete-btn">
                   <CapTooltip
                     title={ctaSaveDisabled(index) && formatMessage(messages.ctaSaveDisabled)}
                     placement="bottom"
@@ -290,7 +290,7 @@ export const CapActionButton = (props) => {
                     {renderLength(url.length, URL_MAX_LENGTH)}
                   </CapColumn>
                 </CapRow>
-                <CapRow className="rcs-cta-save-delete-btn">
+                <CapRow useLegacy className="rcs-cta-save-delete-btn">
                   <CapTooltip
                     title={
                       ctaSaveDisabled(index) && formatMessage(messages.ctaSaveDisabled)
@@ -318,7 +318,7 @@ export const CapActionButton = (props) => {
               </>
             )}
             {type === RCS_BUTTON_TYPES.QUICK_REPLY && (
-              <CapRow className="rcs-cta-save-delete-btn">
+              <CapRow useLegacy className="rcs-cta-save-delete-btn">
                 <CapTooltip
                   title={ctaSaveDisabled(index) && formatMessage(messages.ctaSaveDisabled)}
                   placement="bottom"
@@ -413,7 +413,7 @@ export const CapActionButton = (props) => {
       suggestions.length < maxButtons &&
         (isFullMode && !isEditFlow)
         && renderArray.push(
-          <CapRow>
+          <CapRow useLegacy>
             <CapTooltip
               title={
                 addBtnDisabled ? formatMessage(messages.ctaAddDisabled) : ''
@@ -422,7 +422,7 @@ export const CapActionButton = (props) => {
             >
               <div className="button-disabled-tooltip-wrapper">
                 <CapButton
-                  type="flat"
+                  type="link"
                   id="rcs-cta-add-button"
                   disabled={addBtnDisabled}
                   className="margin-t-12 margin-l-24"

package/v2Components/CapCustomSkeleton/index.js

@@ -21,7 +21,7 @@ export default function CapCustomSkeleton(props) {
             paragraph={false}
           />
           {
-            <CapRow gutter={16}>
+            <CapRow gap={16}>
               {Array.from({ length: 12 }).map((_, index) => (
                 <CapColumn
                   key={index}

package/v2Components/CapDeviceContent/index.js

@@ -201,8 +201,8 @@ const CapDeviceContent = (props) => {
             )}
           />
         </CapRow>
-        <CapRow className="creatives-inapp-media">
-          <CapRow className="inapp-content-media">
+        <CapRow useLegacy className="creatives-inapp-media">
+          <CapRow useLegacy className="inapp-content-media">
             <CapHeading type="h5" className="inapp-media-header">
               {formatMessage(messages.mediaLabel)}
             </CapHeading>
@@ -282,7 +282,7 @@ const CapDeviceContent = (props) => {
           )}
         </CapRow>
       </CapRow>
-      <CapRow className="inapp-action-link">
+      <CapRow useLegacy className="inapp-action-link">
         <CapCheckbox onChange={onActionLinkCheckBoxChange} checked={addActionLink} />
         <CapRow className="inapp-render-heading">
           <CapHeader
@@ -296,7 +296,7 @@ const CapDeviceContent = (props) => {
             description={<CapLabel type="label3">{formatMessage(messages.addActionLinkDesc)}</CapLabel>}
           />
           {addActionLink && (
-            <CapRow className="inapp-action-deep-link">
+            <CapRow useLegacy className="inapp-action-deep-link">
               <CapHeading type="h4">
                 {formatMessage(messages.actionDeepLink)}
               </CapHeading>
@@ -313,7 +313,7 @@ const CapDeviceContent = (props) => {
           )}
         </CapRow>
       </CapRow>
-      <CapRow className="inapp-cta-button">
+      <CapRow useLegacy className="inapp-cta-button">
         <CapHeader
           className="inapp-render-heading-cta-button"
           title={(

package/v2Components/CapDocumentUpload/index.js

@@ -151,7 +151,7 @@ function CapDocumentUpload(props) {
     return (
       <CapButton
         className="dragger-button re-upload"
-        type="flat"
+        type="link"
         onClick={onReUpload}
       >
         <FormattedMessage {...messages.docReUpload} />

package/v2Components/CapImageUpload/index.js

@@ -287,7 +287,7 @@ function CapImageUpload(props) {
       return (
         <CapButton
           className="dragger-button re-upload"
-          type="flat"
+          type="link"
           onClick={onReUpload}
           style={channelSpecificStyle ? { marginTop: `-${CAP_SPACE_16}` } : {}}
           disabled={disabled}

package/v2Components/CapInAppCTA/index.js

@@ -140,16 +140,18 @@ export const CapInAppCTA = (props) => {
             align="middle"
             type="flex"
           >
-            <CapRow className="inapp-cta-row">
-              <CapColumn>
-                <CapIcon size="s" type={'launch'} className="btn-icon" />
-              </CapColumn>
-              <CapColumn className="btn-text">
-                <CapLabel type="label2" className="inapp-saved-cta-button-text">
-                  {text}
-                </CapLabel>
-              </CapColumn>
-            </CapRow>
+            <CapColumn>
+              <CapRow className="inapp-cta-row">
+                <CapColumn>
+                  <CapIcon size="s" type={'launch'} className="btn-icon" />
+                </CapColumn>
+                <CapColumn className="btn-text">
+                  <CapLabel type="label2" className="inapp-saved-cta-button-text">
+                    {text}
+                  </CapLabel>
+                </CapColumn>
+              </CapRow>
+            </CapColumn>
             <CapColumn >
               {urlType === DEEP_LINK ?
                 <CapTag className="cta-type-label">{formatMessage(messages.urlDeepLink)}</CapTag>
@@ -158,7 +160,7 @@ export const CapInAppCTA = (props) => {
             <CapColumn>
               {urlType === DEEP_LINK ? selectedDeepLink?.label : ''}
             </CapColumn>
-            {(
+            <CapColumn>
               <CapRow className="cta-action-grp">
                 <CapColumn
                   className="inapp-saved-cta-edit-icon"
@@ -170,7 +172,7 @@ export const CapInAppCTA = (props) => {
                   <CapIcon size="s" type="delete" className="cta-action" ariaLabel="delete-cta-icon" />
                 </CapColumn>
               </CapRow>
-            )}
+            </CapColumn>
           </CapRow>
         );
       } else {
@@ -180,108 +182,112 @@ export const CapInAppCTA = (props) => {
             className="cap-inapp-cta"
             id={`cap-inapp-cta-${index}`}
           >
-            <CapRow className="inapp-cta-buttons">
-              <CapColumn span={12} >
-                {/* Type of link */}
-                <CapHeading type="h4" className="cta-label">
-                  {formatMessage(messages.ctaType)}
-                </CapHeading>
-                <CapSelect
-                  id="inapp-cta-type"
-                  options={CTA_OPTIONS || []}
-                  onChange={(value) => onUrlTypeChange(value, index)}
-                  value={urlType}
-                />
-              </CapColumn>
-              <CapColumn span={12}>
-                {/* Button text */}
-                <CapHeading type="h4" className="cta-label">
-                  {formatMessage(messages.ctaButtonText)}
-                  <CapTooltipWithInfo
-                    infoIconProps={{
-                      style: { marginLeft: CAP_SPACE_04 },
-                    }}
-                    autoAdjustOverflow
-                    placement="right"
-                    title={formatMessage(messages.ctaButtonTextTooltip)}
+            <CapColumn>
+              <CapRow className="inapp-cta-buttons">
+                <CapColumn span={12} >
+                  {/* Type of link */}
+                  <CapHeading type="h4" className="cta-label">
+                    {formatMessage(messages.ctaType)}
+                  </CapHeading>
+                  <CapSelect
+                    id="inapp-cta-type"
+                    options={CTA_OPTIONS || []}
+                    onChange={(value) => onUrlTypeChange(value, index)}
+                    value={urlType}
+                  />
+                </CapColumn>
+                <CapColumn span={12}>
+                  {/* Button text */}
+                  <CapHeading type="h4" className="cta-label">
+                    {formatMessage(messages.ctaButtonText)}
+                    <CapTooltipWithInfo
+                      infoIconProps={{
+                        style: { marginLeft: CAP_SPACE_04 },
+                      }}
+                      autoAdjustOverflow
+                      placement="right"
+                      title={formatMessage(messages.ctaButtonTextTooltip)}
+                    />
+                  </CapHeading>
+                  <CapInput
+                    id={index}
+                    className="inapp-cta-button-text"
+                    onChange={onButtonTextChange}
+                    placeholder={formatMessage(messages.ctaButtonTextPlaceholder)}
+                    value={text}
+                    maxLength={BTN_MAX_LENGTH}
+                    errorMessage={buttonError}
                   />
-                </CapHeading>
-                <CapInput
-                  id={index}
-                  className="inapp-cta-button-text"
-                  onChange={onButtonTextChange}
-                  placeholder={formatMessage(messages.ctaButtonTextPlaceholder)}
-                  value={text}
-                  maxLength={BTN_MAX_LENGTH}
-                  errorMessage={buttonError}
-                />
-                {renderLength(text.length, BTN_MAX_LENGTH)}
-              </CapColumn>
-            </CapRow>
-            {urlType === DEEP_LINK && (
-              <>
-                <CapHeading type="h4">
-                  {formatMessage(messages.urlDeepLink)}
-                </CapHeading>
-                <CapSelect
-                  id="inapp-deep-link-type"
-                  placeholder={formatMessage(messages.ctaDeepLinkOptionsPlaceholder)}
-                  options={deepLink || []}
-                  onChange={onDeepLinkSelect}
-                  value={ctaDeepLinkValue}
-                />
-              </>
+                  {renderLength(text.length, BTN_MAX_LENGTH)}
+                </CapColumn>
+              </CapRow>
+              {urlType === DEEP_LINK && (
+                <>
+                  <CapHeading type="h4">
+                    {formatMessage(messages.urlDeepLink)}
+                  </CapHeading>
+                  <CapSelect
+                    id="inapp-deep-link-type"
+                    placeholder={formatMessage(messages.ctaDeepLinkOptionsPlaceholder)}
+                    options={deepLink || []}
+                    onChange={onDeepLinkSelect}
+                    value={ctaDeepLinkValue}
+                  />
+                </>
 
-            )}
-            {urlType === EXTERNAL_URL && (
-              <>
-                <CapTagListWithInput
-                  inputId="inapp-cta-external-link"
-                  inputValue={url}
-                  inputOnChange={onUrlChange}
-                  inputPlaceholder={formatMessage(messages.ctaExternalLinkPlaceholder)}
-                  inputSize="large"
-                  inputMaxLength={URL_MAX_LENGTH}
-                  inputErrorMessage={urlError}
-                  headingText={formatMessage(messages.urlExternalLink)}
-                  headingStyle={{ marginTop: '3%',marginRight: '65%'}}
-                  moduleFilterEnabled={location?.query?.type !== "embedded"}
-                  onTagSelect={onButtonTagSelect}
-                  onContextChange={onContextChange}
-                  location={location}
-                  tags={tags || []}
-                  injectedTags={injectedTags || {}}
-                  selectedOfferDetails={selectedOfferDetails}
-                />
-              </>
-            )}
-            <CapRow className="inapp-cta-save-delete-btn">
-              <CapTooltip
-                title={
-                  ctaSaveDisabled(index)
-                    ? formatMessage(messages.ctaSaveDisabled)
-                    : ""
-                }
-                placement={"bottom"}
-              >
-                <div className="button-disabled-tooltip-wrapper">
-                  <CapButton
-                    onClick={() => isSavedCta(index, true)}
-                    disabled={ctaSaveDisabled(index)}
-                    className="inapp-cta-save-btn"
-                  >
-                    {formatMessage(globalMessages.save)}
-                  </CapButton>
-                </div>
-              </CapTooltip>
-              <CapButton
-                onClick={() => deleteHandler(index)}
-                className="inapp-cta-delete-btn"
-                type="secondary"
-              >
-                {formatMessage(globalMessages.delete)}
-              </CapButton>
-            </CapRow>
+              )}
+              {urlType === EXTERNAL_URL && (
+                <>
+                  <CapTagListWithInput
+                    inputId="inapp-cta-external-link"
+                    inputValue={url}
+                    inputOnChange={onUrlChange}
+                    inputPlaceholder={formatMessage(messages.ctaExternalLinkPlaceholder)}
+                    inputSize="large"
+                    inputMaxLength={URL_MAX_LENGTH}
+                    inputErrorMessage={urlError}
+                    headingText={formatMessage(messages.urlExternalLink)}
+                    headingStyle={{ marginTop: '3%',marginRight: '65%'}}
+                    moduleFilterEnabled={location?.query?.type !== "embedded"}
+                    onTagSelect={onButtonTagSelect}
+                    onContextChange={onContextChange}
+                    location={location}
+                    tags={tags || []}
+                    injectedTags={injectedTags || {}}
+                    selectedOfferDetails={selectedOfferDetails}
+                  />
+                </>
+              )}
+            </CapColumn>
+            <CapColumn>
+              <CapRow useLegacy className="inapp-cta-save-delete-btn">
+                <CapTooltip
+                  title={
+                    ctaSaveDisabled(index)
+                      ? formatMessage(messages.ctaSaveDisabled)
+                      : ""
+                  }
+                  placement={"bottom"}
+                >
+                  <div className="button-disabled-tooltip-wrapper">
+                    <CapButton
+                      onClick={() => isSavedCta(index, true)}
+                      disabled={ctaSaveDisabled(index)}
+                      className="inapp-cta-save-btn"
+                    >
+                      {formatMessage(globalMessages.save)}
+                    </CapButton>
+                  </div>
+                </CapTooltip>
+                <CapButton
+                  onClick={() => deleteHandler(index)}
+                  className="inapp-cta-delete-btn"
+                  type="secondary"
+                >
+                  {formatMessage(globalMessages.delete)}
+                </CapButton>
+              </CapRow>
+            </CapColumn>
           </CapRow>
         );
       }

package/v2Components/CapMpushCTA/index.js

@@ -234,16 +234,18 @@ export const CapMpushCTA = (props) => {
                         align="middle"
                         type="flex"
                     >
-                        <CapRow className="mpush-cta-row">
-                            <CapColumn>
-                                <CapIcon size="s" type={'launch'} />
-                            </CapColumn>
-                            <CapColumn className="btn-text">
-                                <CapLabel type="label2" className="mpush-saved-cta-button-text">
-                                    {text}
-                                </CapLabel>
-                            </CapColumn>
-                        </CapRow>
+                        <CapColumn>
+                            <CapRow className="mpush-cta-row">
+                                <CapColumn>
+                                    <CapIcon size="s" type={'launch'} />
+                                </CapColumn>
+                                <CapColumn className="btn-text">
+                                    <CapLabel type="label2" className="mpush-saved-cta-button-text">
+                                        {text}
+                                    </CapLabel>
+                                </CapColumn>
+                            </CapRow>
+                        </CapColumn>
                         <CapColumn >
                             {urlType === DEEP_LINK ?
                                 <CapTag className="cta-type-label">{formatMessage(messages.urlDeepLink)}</CapTag>
@@ -254,7 +256,7 @@ export const CapMpushCTA = (props) => {
                         </CapColumn>
                         <CapColumn>
                         </CapColumn>
-                        {(
+                        <CapColumn>
                             <CapRow className="cta-action-grp">
                                 <CapColumn
                                     className="mpush-saved-cta-edit-icon"
@@ -266,7 +268,7 @@ export const CapMpushCTA = (props) => {
                                     <CapIcon size="s" type="delete" className="cta-action" ariaLabel="delete-cta-icon" />
                                 </CapColumn>
                             </CapRow>
-                        )}
+                        </CapColumn>
                     </CapRow>
                 );
             } else {
@@ -290,7 +292,7 @@ export const CapMpushCTA = (props) => {
                             {renderLength(text.length, BTN_MAX_LENGTH)}
                         </CapColumn>
                         <CapColumn className="mpush-cta-buttons">
-                            <CapRow style={{ width: '30%', marginRight: '10px' }}>
+                            <CapRow useLegacy style={{ width: '30%', marginRight: '10px' }}>
                                 <CapHeading type="h4" className="cta-label">
                                     {formatMessage(messages.ctaType)}
                                 </CapHeading>
@@ -303,7 +305,7 @@ export const CapMpushCTA = (props) => {
                                 />
                             </CapRow>
                             {urlType === DEEP_LINK && (
-                                <CapRow style={{ width: '70%' }}>
+                                <CapRow useLegacy style={{ width: '70%' }}>
                                     <CapHeading type="h4" className="cta-deep-link-label">
                                         {formatMessage(messages.urlDeepLink)}
                                     </CapHeading>
@@ -341,59 +343,63 @@ export const CapMpushCTA = (props) => {
                             )}
                         </CapColumn>
                         {urlType === DEEP_LINK && ctaDeepLinkValue && deepLinkKeysFromSelectionArray.length > 0 && (
-                            <CapRow style={{ marginTop: '10px' }}>
-                                <CapHeading type="h4">
-                                    {formatMessage(messages.deepLinkKeys)}
-                                </CapHeading>
-                                <CapLabel type="label2" className="cta-deep-link-keys-value">
-                                    {(() => {
-                                        if (deepLinkKeysFromSelectionArray.length > 0) {
-                                            return deepLinkKeysFromSelectionArray.join(', ');
-                                        }
-                                        if (deepLinkKeysArray.length > 0) {
-                                            return deepLinkKeysArray.join(', ');
-                                        }
-                                    })()}
-                                </CapLabel>
-                                <CapInput
-                                    id="mpush-deep-link-keys"
-                                    className="mpush-deep-link-keys"
-                                    onChange={onDeepLinkKeysChange}
-                                    placeholder={formatMessage(messages.deepLinkKeysPlaceholder, { key: deepLinkKeysFromSelectionArray.join(', ') })}
-                                    value={Array.isArray(ctaDeepLinkKeysValue) ? ctaDeepLinkKeysValue.join(', ') : (ctaDeepLinkKeysValue || '')}
-                                    size="large"
-                                    data-index={index}
-                                    errorMessage={deepLinkKeysError ? formatMessage(messages.deepLinkKeysRequired) : ""}
-                                />
-                            </CapRow>
+                            <CapColumn>
+                                <CapRow useLegacy style={{ marginTop: '10px' }}>
+                                    <CapHeading type="h4">
+                                        {formatMessage(messages.deepLinkKeys)}
+                                    </CapHeading>
+                                    <CapLabel type="label2" className="cta-deep-link-keys-value">
+                                        {(() => {
+                                            if (deepLinkKeysFromSelectionArray.length > 0) {
+                                                return deepLinkKeysFromSelectionArray.join(', ');
+                                            }
+                                            if (deepLinkKeysArray.length > 0) {
+                                                return deepLinkKeysArray.join(', ');
+                                            }
+                                        })()}
+                                    </CapLabel>
+                                    <CapInput
+                                        id="mpush-deep-link-keys"
+                                        className="mpush-deep-link-keys"
+                                        onChange={onDeepLinkKeysChange}
+                                        placeholder={formatMessage(messages.deepLinkKeysPlaceholder, { key: deepLinkKeysFromSelectionArray.join(', ') })}
+                                        value={Array.isArray(ctaDeepLinkKeysValue) ? ctaDeepLinkKeysValue.join(', ') : (ctaDeepLinkKeysValue || '')}
+                                        size="large"
+                                        data-index={index}
+                                        errorMessage={deepLinkKeysError ? formatMessage(messages.deepLinkKeysRequired) : ""}
+                                    />
+                                </CapRow>
+                            </CapColumn>
                         )}
-                        <CapRow className="mpush-cta-save-delete-btn">
-                            <CapTooltip
-                                title={
-                                    ctaSaveDisabled(index)
-                                        ? formatMessage(messages.ctaSaveDisabled)
-                                        : ""
-                                }
-                                placement={"bottom"}
-                            >
-                                <div className="button-disabled-tooltip-wrapper">
-                                    <CapButton
-                                        onClick={() => isSavedCta(index, true)}
-                                        disabled={ctaSaveDisabled(index)}
-                                        className="mpush-cta-save-btn"
-                                    >
-                                        {formatMessage(globalMessages.save)}
-                                    </CapButton>
-                                </div>
-                            </CapTooltip>
-                            <CapButton
-                                onClick={() => deleteHandler(index)}
-                                className="mpush-cta-delete-btn"
-                                type="secondary"
-                            >
-                                {formatMessage(globalMessages.delete)}
-                            </CapButton>
-                        </CapRow>
+                        <CapColumn>
+                            <CapRow useLegacy className="mpush-cta-save-delete-btn">
+                                <CapTooltip
+                                    title={
+                                        ctaSaveDisabled(index)
+                                            ? formatMessage(messages.ctaSaveDisabled)
+                                            : ""
+                                    }
+                                    placement={"bottom"}
+                                >
+                                    <div className="button-disabled-tooltip-wrapper">
+                                        <CapButton
+                                            onClick={() => isSavedCta(index, true)}
+                                            disabled={ctaSaveDisabled(index)}
+                                            className="mpush-cta-save-btn"
+                                        >
+                                            {formatMessage(globalMessages.save)}
+                                        </CapButton>
+                                    </div>
+                                </CapTooltip>
+                                <CapButton
+                                    onClick={() => deleteHandler(index)}
+                                    className="mpush-cta-delete-btn"
+                                    type="secondary"
+                                >
+                                    {formatMessage(globalMessages.delete)}
+                                </CapButton>
+                            </CapRow>
+                        </CapColumn>
                     </CapRow>
                 );
             }