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

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>
                 );
             }

package/v2Components/CapTagList/index.js

@@ -120,7 +120,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   };
 
   onExpand = (expandedKeys, info) => {
-    this.handleOnExpand(info.node.props.eventKey);
+    const node = info && info.node;
+    const eventKey = node && (node.eventKey ?? node.key ?? node.props?.eventKey);
+    this.handleOnExpand(eventKey);
   };
 
   getSearchedExpandedKeys(tags, value = '', parentPath = '') {
@@ -202,9 +204,14 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
 
   handleOnSelect = (selectedKeys, info) => {
     if (selectedKeys.length > 0) {
-      if (info && info.selectedNodes && info.selectedNodes.length > 0 && info.selectedNodes[0].props.isLeaf) {
-        const selectedNode = info.selectedNodes[0];
-        const selectedTagValue = selectedNode?.props?.tagKey || selectedKeys[0];
+      const selectedNode = info && info.selectedNodes && info.selectedNodes[0];
+      if (!selectedNode) {
+        return;
+      }
+      const isLeaf = selectedNode.isLeaf ?? selectedNode.props?.isLeaf;
+      if (isLeaf) {
+        const tagKey = selectedNode.tagKey ?? selectedNode.props?.tagKey;
+        const selectedTagValue = tagKey || selectedKeys[0];
         this.setState({
           tagValue: selectedTagValue,
           selectedNodeKey: selectedKeys[0],
@@ -216,7 +223,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           this.props.onSelect([selectedTagValue], info);
           this.setState({visible: false});
         }
-      } else if (info && info.selectedNodes && info.selectedNodes.length > 0 && !info.selectedNodes[0].props.isLeaf) {
+      } else {
         this.handleOnExpand(selectedKeys[0]);
       }
     }
@@ -409,7 +416,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       },
     ];
     const contentSection = (
-      <CapRow className="cap-tag-list-popover-inner">
+      <CapRow useLegacy className="cap-tag-list-popover-inner">
         <CapSpin tip={formatMessage(messages.gettingTags)} spinning={shouldShowLoading}>
           <Search
             style={{ marginBottom: 8, width: '250px'}}
@@ -419,7 +426,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             <CapSelect
               getPopupContainer={(triggerNode) => triggerNode.parentNode}
               style={{
-                width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit',
+                width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'flex',
               }}
               onChange={this.handleOnChange}
               value={selectedContext}
@@ -444,7 +451,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                 size="s"
               />
               <CapLink>
-                <CapButton id="translationtagfooter" type="flat" onClick={this.openTranslationLink}>
+                <CapButton id="translationtagfooter" type="link" onClick={this.openTranslationLink}>
                   <div className="tag-list-footer-icon">
                     <div>{JAPANESE_HELP_TEXT}</div>
                     <CapIcon
@@ -479,13 +486,18 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             content={contentSection}
             trigger="click"
             placement={this.props.popoverPlacement || (channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop")}
+            styles={{
+              container: {
+                backgroundColor: 'white'
+              }
+            }}
           >
             <CapTooltip
               title={
                 disableTooltipMsg && disabled ? (
                   disableTooltipMsg
                 ) : fetchingSchemaError ? (
-                  <CapRow className="tooltip-text-container">
+                  <CapRow useLegacy className="tooltip-text-container">
                     <CapLabel className="tooltip-text1">
                       {formatMessage(messages.somethingWentWrong)}
                     </CapLabel>
@@ -497,13 +509,13 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
               }
               placement="right"
             >
-              <CapRow className="tooltip-add-label-container">
+              <CapRow useLegacy className="tooltip-add-label-container">
                 <CapButton
                   disabled={
                     this?.props?.disabled || fetchingSchemaError
                   }
                   isAddBtn
-                  type="flat"
+                  type="link"
                 >
                   {label || ""}
                 </CapButton>

package/v2Components/CapVideoUpload/index.js

@@ -285,7 +285,7 @@ function CapVideoUpload(props) {
           <div style={{ overflow: 'hidden' }}>
             <CapButton
               className="dragger-button video-reupload"
-              type="flat"
+              type="link"
               onClick={onReUpload}
             >
               <FormattedMessage {...messages.imageReUpload} />

package/v2Components/CapWhatsappCTA/index.js

@@ -311,144 +311,148 @@ export const CapWhatsappCTA = (props) => {
             className="cap-whatsapp-cta margin-t-16"
             id={`cap-whatsapp-cta-${index}`}
           >
-            <CapRow>
-              <CapColumn span={12}>
-                {/* Type of action */}
-                <CapHeading type="h4" className="cta-label">
-                  {formatMessage(messages.ctaType)}
-                </CapHeading>
-                <CapSelect
-                  id="whatsapp-cta-type"
-                  options={ctaOptions || []}
-                  onChange={(value) => onCtaTypeChange(value, index)}
-                  value={ctaType}
-                />
-              </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="whatsapp-cta-button-text"
-                  onChange={onButtonTextChange}
-                  placeholder={formatMessage(messages.ctaButtonTextPlaceholder)}
-                  value={text}
-                  size="large"
-                  maxLength={BTN_MAX_LENGTH}
-                  errorMessage={buttonError}
-                />
-                {renderLength(text.length, BTN_MAX_LENGTH)}
-              </CapColumn>
-            </CapRow>
-            {ctaType === PHONE_NUMBER && (
-              <CapRow>
-                <CapColumn span={11}>
-                  {/* phone number */}
-                  <CapHeading type="h4" className="cta-label">
-                    {formatMessage(messages.ctaPhoneNo)}
-                  </CapHeading>
-                  <PhoneInput
-                    placeholder={formatMessage(messages.ctaPhoneNoPlaceholder)}
-                    autoFormat={false}
-                    countryCodeEditable={false}
-                    value={phone_number}
-                    onChange={(value) => onPhoneNoChange(value, index)}
-                    country="in"
-                    className="cta-phone-number"
-                  />
-                  {renderLength(phone_number.length, PHONE_NUMBER_MAX_LENGTH)}
-                </CapColumn>
-              </CapRow>
-            )}
-            {ctaType === WEBSITE && (
+            <CapColumn>
               <CapRow>
                 <CapColumn span={12}>
-                  {/* URL Type */}
+                  {/* Type of action */}
                   <CapHeading type="h4" className="cta-label">
-                    {formatMessage(messages.ctaWebsiteType)}
+                    {formatMessage(messages.ctaType)}
                   </CapHeading>
                   <CapSelect
-                    id="whatsapp-cta-url-type"
-                    options={
-                      hostName === HOST_TWILIO
-                        ? TWILIO_URL_OPTIONS
-                        : KARIX_GUPSHUP_URL_OPTIONS
-                    }
-                    onChange={(value) => onUrlTypeChange(value, index)}
-                    value={urlType}
+                    id="whatsapp-cta-type"
+                    options={ctaOptions || []}
+                    onChange={(value) => onCtaTypeChange(value, index)}
+                    value={ctaType}
                   />
                 </CapColumn>
                 <CapColumn span={12}>
-                  {/* cta url */}
+                  {/* Button text */}
                   <CapHeading type="h4" className="cta-label">
-                    {formatMessage(messages.ctaWebsiteUrl)}
-                    {urlType === DYNAMIC_URL && (
-                      <CapTooltipWithInfo
-                        infoIconProps={{
-                          style: { marginLeft: CAP_SPACE_04 },
-                        }}
-                        autoAdjustOverflow
-                        placement="right"
-                        title={formatMessage(messages.dynamicUrlTooltip, { one: '{{1}}' })}
-                      />
-                    )}
+                    {formatMessage(messages.ctaButtonText)}
+                    <CapTooltipWithInfo
+                      infoIconProps={{
+                        style: { marginLeft: CAP_SPACE_04 },
+                      }}
+                      autoAdjustOverflow
+                      placement="right"
+                      title={formatMessage(messages.ctaButtonTextTooltip)}
+                    />
                   </CapHeading>
                   <CapInput
                     id={index}
-                    addonAfter={urlType === DYNAMIC_URL && !url.includes(DYNAMIC_URL_SUFFIX) && DYNAMIC_URL_SUFFIX}
-                    className="whatsapp-cta-url"
-                    onChange={(event) => onUrlChange(event, urlType)}
-                    placeholder={
-                      urlType === DYNAMIC_URL
-                        ? formatMessage(messages.ctaDynamicPlaceholder)
-                        : formatMessage(messages.ctaStaticPlaceholder)
-                    }
-                    value={url}
+                    className="whatsapp-cta-button-text"
+                    onChange={onButtonTextChange}
+                    placeholder={formatMessage(messages.ctaButtonTextPlaceholder)}
+                    value={text}
                     size="large"
-                    maxLength={URL_MAX_LENGTH}
-                    errorMessage={urlError}
+                    maxLength={BTN_MAX_LENGTH}
+                    errorMessage={buttonError}
                   />
-                  {renderLength(url.length, URL_MAX_LENGTH)}
+                  {renderLength(text.length, BTN_MAX_LENGTH)}
                 </CapColumn>
               </CapRow>
-            )}
-            <CapRow className="whatsapp-cta-save-delete-btn">
-              <CapTooltip
-                title={
-                  ctaSaveDisabled(index)
-                    ? formatMessage(messages.ctaSaveDisabled)
-                    : ''
-                }
-                placement="bottom"
-              >
-                <div className="button-disabled-tooltip-wrapper">
-                  <CapButton
-                    onClick={() => saveCta(index)}
-                    disabled={ctaSaveDisabled(index)}
-                    className="whatsapp-cta-save-btn"
-                  >
-                    {formatMessage(globalMessages.save)}
-                  </CapButton>
-                </div>
-              </CapTooltip>
-              <CapButton
-                onClick={() => deleteHandler(index)}
-                className="whatsapp-cta-delete-btn"
-                type="secondary"
-              >
-                {formatMessage(globalMessages.delete)}
-              </CapButton>
-            </CapRow>
+              {ctaType === PHONE_NUMBER && (
+                <CapRow>
+                  <CapColumn span={11}>
+                    {/* phone number */}
+                    <CapHeading type="h4" className="cta-label">
+                      {formatMessage(messages.ctaPhoneNo)}
+                    </CapHeading>
+                    <PhoneInput
+                      placeholder={formatMessage(messages.ctaPhoneNoPlaceholder)}
+                      autoFormat={false}
+                      countryCodeEditable={false}
+                      value={phone_number}
+                      onChange={(value) => onPhoneNoChange(value, index)}
+                      country="in"
+                      className="cta-phone-number"
+                    />
+                    {renderLength(phone_number.length, PHONE_NUMBER_MAX_LENGTH)}
+                  </CapColumn>
+                </CapRow>
+              )}
+              {ctaType === WEBSITE && (
+                <CapRow>
+                  <CapColumn span={12}>
+                    {/* URL Type */}
+                    <CapHeading type="h4" className="cta-label">
+                      {formatMessage(messages.ctaWebsiteType)}
+                    </CapHeading>
+                    <CapSelect
+                      id="whatsapp-cta-url-type"
+                      options={
+                        hostName === HOST_TWILIO
+                          ? TWILIO_URL_OPTIONS
+                          : KARIX_GUPSHUP_URL_OPTIONS
+                      }
+                      onChange={(value) => onUrlTypeChange(value, index)}
+                      value={urlType}
+                    />
+                  </CapColumn>
+                  <CapColumn span={12}>
+                    {/* cta url */}
+                    <CapHeading type="h4" className="cta-label">
+                      {formatMessage(messages.ctaWebsiteUrl)}
+                      {urlType === DYNAMIC_URL && (
+                        <CapTooltipWithInfo
+                          infoIconProps={{
+                            style: { marginLeft: CAP_SPACE_04 },
+                          }}
+                          autoAdjustOverflow
+                          placement="right"
+                          title={formatMessage(messages.dynamicUrlTooltip, { one: '{{1}}' })}
+                        />
+                      )}
+                    </CapHeading>
+                    <CapInput
+                      id={index}
+                      addonAfter={urlType === DYNAMIC_URL && !url.includes(DYNAMIC_URL_SUFFIX) && DYNAMIC_URL_SUFFIX}
+                      className="whatsapp-cta-url"
+                      onChange={(event) => onUrlChange(event, urlType)}
+                      placeholder={
+                        urlType === DYNAMIC_URL
+                          ? formatMessage(messages.ctaDynamicPlaceholder)
+                          : formatMessage(messages.ctaStaticPlaceholder)
+                      }
+                      value={url}
+                      size="large"
+                      maxLength={URL_MAX_LENGTH}
+                      errorMessage={urlError}
+                    />
+                    {renderLength(url.length, URL_MAX_LENGTH)}
+                  </CapColumn>
+                </CapRow>
+              )}
+            </CapColumn>
+            <CapColumn>
+              <CapRow useLegacy className="whatsapp-cta-save-delete-btn">
+                <CapTooltip
+                  title={
+                    ctaSaveDisabled(index)
+                      ? formatMessage(messages.ctaSaveDisabled)
+                      : ''
+                  }
+                  placement="bottom"
+                >
+                  <div className="button-disabled-tooltip-wrapper">
+                    <CapButton
+                      onClick={() => saveCta(index)}
+                      disabled={ctaSaveDisabled(index)}
+                      className="whatsapp-cta-save-btn"
+                    >
+                      {formatMessage(globalMessages.save)}
+                    </CapButton>
+                  </div>
+                </CapTooltip>
+                <CapButton
+                  onClick={() => deleteHandler(index)}
+                  className="whatsapp-cta-delete-btn"
+                  type="secondary"
+                >
+                  {formatMessage(globalMessages.delete)}
+                </CapButton>
+              </CapRow>
+            </CapColumn>
           </CapRow>,
         );
       }
@@ -460,7 +464,7 @@ export const CapWhatsappCTA = (props) => {
       ctaData.length < 2
         && !isEditFlow
         && renderArray.push(
-          <CapRow>
+          <CapRow useLegacy>
             <CapTooltip
               title={
                 addBtnDisabled ? formatMessage(messages.ctaAddDisabled) : ''
@@ -469,7 +473,7 @@ export const CapWhatsappCTA = (props) => {
             >
               <div className="button-disabled-tooltip-wrapper">
                 <CapButton
-                  type="flat"
+                  type="link"
                   id="whatsapp-cta-add-button"
                   disabled={addBtnDisabled}
                   className="margin-t-12 margin-l-24"