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

package/v2Components/CapWhatsappCTA/index.js

@@ -52,6 +52,7 @@ export const CapWhatsappCTA = (props) => {
     injectedTags = {},
     selectedOfferDetails = [],
     eventContextTags = [],
+    waitEventContextTags = {},
   } = props;
   const { formatMessage } = intl;
   const invalidVarRegex = /{{(.*?)}}/g;
@@ -283,6 +284,7 @@ export const CapWhatsappCTA = (props) => {
                   injectedTags={injectedTags}
                   selectedOfferDetails={selectedOfferDetails}
                   eventContextTags={eventContextTags}
+                  waitEventContextTags={waitEventContextTags}
                 />
               </CapColumn>
             )}
@@ -309,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>,
         );
       }
@@ -458,7 +464,7 @@ export const CapWhatsappCTA = (props) => {
       ctaData.length < 2
         && !isEditFlow
         && renderArray.push(
-          <CapRow>
+          <CapRow useLegacy>
             <CapTooltip
               title={
                 addBtnDisabled ? formatMessage(messages.ctaAddDisabled) : ''
@@ -467,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"

package/v2Components/CapWhatsappCarouselButton/index.js

@@ -281,7 +281,7 @@ export const CapWhatsappCarouselButton = (props) => {
       )
       }
       {/* it render save and delete button */}
-      <CapRow className="whatsapp-cta-save-delete-btn whatsapp-carousel-save-edit-btn">
+      <CapRow useLegacy className="whatsapp-cta-save-delete-btn whatsapp-carousel-save-edit-btn">
         <CapTooltip
           title={
             ctaSaveDisabled(buttonIndex)
@@ -379,7 +379,7 @@ export const CapWhatsappCarouselButton = (props) => {
                   </CapColumn>
                   {parseInt(carouselIndex, 10) === 0 && (
                     <CapColumn span={1}>
-                      <CapButton type="flat" className="whatsapp-carousel-delete-icon-btn" onClick={() => handleDeleteButton(index)} disabled={buttonData?.length === 1}>
+                      <CapButton type="link" className="whatsapp-carousel-delete-icon-btn" onClick={() => handleDeleteButton(index)} disabled={buttonData?.length === 1}>
                         <CapIcon size="s" type="delete" />
                       </CapButton>
                     </CapColumn>
@@ -415,7 +415,7 @@ export const CapWhatsappCarouselButton = (props) => {
             </CapRow>
           );
         } return (
-          <CapRow
+          <CapRow useLegacy
             key={`${button.buttonType}_${index}`}
             className="cap-whatsapp-carousel-button"
           >
@@ -431,32 +431,30 @@ export const CapWhatsappCarouselButton = (props) => {
           </CapRow>
         );
       })}
-      <CapRow>
-        {/* user can add only two button in the first carousel in other carousel user dont allow to add buttons */}
-        {buttonData?.length < 2 && !isEditFlow && parseInt(carouselIndex, 10) === 0 && (
-          <CapRow>
-            <CapTooltip
-              title={
-                isCarouselAddButtonDisable ? formatMessage(capWhatsappCTAMsg.ctaAddDisabled) : ""
-              }
-              placement="right"
-            >
-              <div className="button-disabled-tooltip-wrapper">
-                <CapButton
-                  type="flat"
-                  id="whatsapp-quick-reply-add-button"
-                  disabled={isCarouselAddButtonDisable}
-                  className="margin-t-12 margin-l-24"
-                  isAddBtn
-                  onClick={addCarouselButton}
-                >
-                  {formatMessage(capWhatsappCTAMsg.addButton)}
-                </CapButton>
-              </div>
-            </CapTooltip>
-          </CapRow>
-        )}
-      </CapRow>
+      {/* user can add only two button in the first carousel in other carousel user dont allow to add buttons */}
+      {buttonData?.length < 2 && !isEditFlow && parseInt(carouselIndex, 10) === 0 && (
+        <CapRow useLegacy>
+          <CapTooltip
+            title={
+              isCarouselAddButtonDisable ? formatMessage(capWhatsappCTAMsg.ctaAddDisabled) : ""
+            }
+            placement="right"
+          >
+            <div className="button-disabled-tooltip-wrapper">
+              <CapButton
+                type="link"
+                id="whatsapp-quick-reply-add-button"
+                disabled={isCarouselAddButtonDisable}
+                className="margin-t-12 margin-l-24"
+                isAddBtn
+                onClick={addCarouselButton}
+              >
+                {formatMessage(capWhatsappCTAMsg.addButton)}
+              </CapButton>
+            </div>
+          </CapTooltip>
+        </CapRow>
+      )}
     </CapRow>
   );
 };

package/v2Components/CapWhatsappQuickReply/index.js

@@ -121,13 +121,13 @@ export const CapWhatsappQuickReply = (props) => {
         </> :
         <>
       {quickReplyDataLength > 0 && !isEditFlow && (
-        <CapRow>
+        <CapRow useLegacy>
           {quickReplyData?.map(({ index, isSaved, text, error }) => {
             if (!isSaved) {
               //this section is render textfield when its not saved or in edit condition
               return (
-                <CapRow className="cap-whatsapp-quick-reply">
-                  <CapRow
+                <CapRow useLegacy className="cap-whatsapp-quick-reply">
+                  <CapRow useLegacy
                     className="whatsapp-button-text-container"
                     key={index}
                   >
@@ -147,7 +147,7 @@ export const CapWhatsappQuickReply = (props) => {
                         </CapHeading>
                       }
                     />
-                      <CapRow className="whatsapp-button-text-input">
+                      <CapRow useLegacy className="whatsapp-button-text-input">
                         <TextArea
                           autosize={{ minRows: 1, maxRows: 5 }}
                           placeholder={formatMessage(
@@ -166,7 +166,7 @@ export const CapWhatsappQuickReply = (props) => {
                       </CapRow>
                     {renderMessageLength(BUTTON_TEXT, text?.length || 0)}
                     {/* it render save and delete button */}
-                      <CapRow className="whatsapp-cta-save-delete-btn">
+                      <CapRow useLegacy className="whatsapp-cta-save-delete-btn">
                         <CapTooltip
                           title={
                           (text === "" || error)
@@ -217,7 +217,7 @@ export const CapWhatsappQuickReply = (props) => {
       }
       {/* this section render add button section with condition */}
       {quickReplyDataLength < 3 && !isEditFlow && (
-        <CapRow>
+        <CapRow useLegacy>
           <CapTooltip
             title={
               isQuickReplyDisable ? formatMessage(ctaMessages.ctaAddDisabled) : ""
@@ -226,7 +226,7 @@ export const CapWhatsappQuickReply = (props) => {
           >
             <div className="button-disabled-tooltip-wrapper">
               <CapButton
-                type="flat"
+                type="link"
                 id="whatsapp-quick-reply-add-button"
                 disabled={isQuickReplyDisable}
                 className="margin-t-12 margin-l-24"

package/v2Components/Carousel/index.js

@@ -26,7 +26,7 @@ const Arrow = (props) => {
     <CapButton
       className={className}
       onClick={onClick}
-      type="flat"
+      type="link"
       style={{
         ...style,
         ...arrowStyle,

package/v2Components/CommonTestAndPreview/AddTestCustomer.js

@@ -11,7 +11,7 @@ const AddTestCustomerButton = ({
 }) => (
   <CapButton
     onClick={handleAddTestCustomer}
-    type="flat"
+    type="link"
     size="small"
     className="test-customer-add-btn"
     prefix={

package/v2Components/CommonTestAndPreview/CustomValuesEditor.js

@@ -27,9 +27,9 @@ const CustomValuesEditor = ({
 }) => {
   if (isExtractingTags) {
     return (
-      <CapRow className="loading-container">
+      <CapRow useLegacy className="loading-container">
         <CapSpin size="large" />
-        <CapRow className="loading-text">
+        <CapRow useLegacy className="loading-text">
           <FormattedMessage {...messages.extractingTags} />
         </CapRow>
       </CapRow>
@@ -128,7 +128,7 @@ const CustomValuesEditor = ({
       <CapRow className="editor-actions">
         <CapButton
           className="discard-button"
-          type="flat"
+          type="link"
           size="small"
           onClick={handleDiscardCustomValues}
           icon="close"

package/v2Components/CommonTestAndPreview/CustomerCreationModal.js

@@ -45,7 +45,7 @@ const CustomerCreationModal = ({
       width={500}
       maskStyle={{ backgroundColor: 'rgba(244, 245, 247, 0.9)' }}
       footer={
-        <CapRow justify="start" gutter={8}>
+        <CapRow useLegacy justify="start" gap={8}>
             <CapButton
               type="primary"
               onClick={() => onSave(EMPTY_VALIDATION, setIsLoading)}

package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js

@@ -238,7 +238,7 @@ const ModifyDeliverySettings = (props) => {
     ({
       titleMessage, options, value, onChange, rowKey, disabled,
     }) => (
-      <CapRow className="modify-delivery-settings__field-row" key={rowKey}>
+      <CapRow useLegacy className="modify-delivery-settings__field-row" key={rowKey}>
         <CapHeader
           size="label"
           title={<FormattedMessage {...titleMessage} />}
@@ -367,20 +367,20 @@ const ModifyDeliverySettings = (props) => {
 
   if (isLoading) {
     return (
-      <CapRow className="modify-delivery-settings__loading-row">
+      <CapRow useLegacy className="modify-delivery-settings__loading-row">
         <CapSpin spinning />
       </CapRow>
     );
   }
 
   return (
-    <CapRow className="modify-delivery-settings">
+    <CapRow useLegacy className="modify-delivery-settings">
       {getChannelFields().map((field, idx) => renderSelectRow({
         ...field,
         rowKey: field.titleMessage?.id || `${ROW_KEY_PREFIX}${idx}`,
         disabled: field.disabled,
       }))}
-      <CapRow className="modify-delivery-settings__actions">
+      <CapRow useLegacy className="modify-delivery-settings__actions">
         <CapButton type="primary" onClick={handleDone}>
           <FormattedMessage {...messages.done} />
         </CapButton>

package/v2Components/CommonTestAndPreview/DeliverySettings/index.js

@@ -151,7 +151,7 @@ const DeliverySettings = (props) => {
   const summaryObject = getSummaryObject();
 
   return (
-    <CapRow className="delivery-settings">
+    <CapRow useLegacy className="delivery-settings">
       <CapRow className="delivery-settings__heading-row">
         <CapHeading type="h10">
           <FormattedMessage {...messages.deliverySettings} />

package/v2Components/CommonTestAndPreview/ExistingCustomerModal.js

@@ -19,7 +19,7 @@ const ExistingCustomerModal = ({ customerModal, onCloseCustomerModal, customerDa
       width={500}
       maskStyle={{ backgroundColor: 'rgba(244, 245, 247, 0.9)' }}
       footer={
-        <CapRow justify="start">
+        <CapRow useLegacy justify="start">
           <CapButton
             type="primary"
             onClick={() => onSave({}, setIsLoading)}
@@ -42,7 +42,7 @@ const ExistingCustomerModal = ({ customerModal, onCloseCustomerModal, customerDa
       className="common-test-preview-modal"
     >
       <div className="existing-customer-modal">
-        <CapRow className="existing-customer-modal-intro-row">
+        <CapRow useLegacy className="existing-customer-modal-intro-row">
           <FormattedMessage {...messages.existingCustomerModalDescription} />
         </CapRow>
         <CapCard className="existing-customer-modal-card">
@@ -51,17 +51,17 @@ const ExistingCustomerModal = ({ customerModal, onCloseCustomerModal, customerDa
               <CapIcon type="user-profile" className="existing-customer-modal-avatar-icon" />
             </CapColumn>
             <CapColumn className="existing-customer-modal-details">
-              <CapRow className="existing-customer-modal-name">
+              <CapRow useLegacy className="existing-customer-modal-name">
                 {customerData.name || "-"}
               </CapRow>
               <CapColumn className="existing-customer-modal-meta">
                 {channel === CHANNELS.EMAIL && customerData.email && (
-                  <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerEmail} />: </span> {customerData.email}</CapRow>
+                  <CapRow useLegacy><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerEmail} />: </span> {customerData.email}</CapRow>
                 )}
                 {channel === CHANNELS.SMS && customerData.mobile && (
-                  <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerMobile} />: </span>{customerData.mobile}</CapRow>
+                  <CapRow useLegacy><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerMobile} />: </span>{customerData.mobile}</CapRow>
                 )}
-                <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerID} />: </span>{customerData.customerId}</CapRow>
+                <CapRow useLegacy><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerID} />: </span>{customerData.customerId}</CapRow>
               </CapColumn>
             </CapColumn>
           </CapRow>

package/v2Components/CommonTestAndPreview/LeftPanelContent.js

@@ -28,9 +28,9 @@ const LeftPanelContent = ({
 }) => {
   if (isExtractingTags) {
     return (
-      <CapRow className="loading-container">
+      <CapRow useLegacy className="loading-container">
         <CapSpin size="large" />
-        <CapRow className="loading-text">
+        <CapRow useLegacy className="loading-text">
           <FormattedMessage {...messages.extractingTags} />
         </CapRow>
       </CapRow>
@@ -41,7 +41,7 @@ const LeftPanelContent = ({
       <>
         {/* Customer Search Section - Only show if enabled */}
         {enableCustomerSearch && (
-          <CapRow className="panel-section customer-section">
+          <CapRow useLegacy className="panel-section customer-section">
             <CapHeader size="label1" title={<FormattedMessage {...messages.customerSearchTitle} />} />
             <CustomerSearchSection
               selectedCustomer={selectedCustomer}
@@ -66,8 +66,8 @@ const LeftPanelContent = ({
         )}
         {/* Tags Section - Only show if tag extraction enabled */}
         {enableTagExtraction && !tagsExtracted && (
-          <CapRow className="panel-section">
-            <CapButton type="flat" className="extract-tags-button" onClick={handleExtractTags}>
+          <CapRow useLegacy className="panel-section">
+            <CapButton type="link" className="extract-tags-button" onClick={handleExtractTags}>
               <CapLabel type="label33">
                 <FormattedMessage {...messages.enterCustomValuesForTags} />
               </CapLabel>

package/v2Components/CommonTestAndPreview/PreviewSection.js

@@ -10,7 +10,7 @@ import UnifiedPreview from './UnifiedPreview';
 const PreviewSection = ({
   unifiedPreviewProps,
 }) => (
-  <CapRow className="test-and-preview-section panel-section">
+  <CapRow useLegacy className="test-and-preview-section panel-section">
     <UnifiedPreview {...unifiedPreviewProps} />
   </CapRow>
 );

package/v2Components/CommonTestAndPreview/UnifiedPreview/DeviceFrame.js

@@ -24,7 +24,7 @@ const DeviceFrame = ({ device, children, className }) => {
   };
 
   return (
-    <CapRow className={`unified-preview-frame ${className || ''}`}>
+    <CapRow useLegacy className={`unified-preview-frame ${className || ''}`}>
       <div className={getFrameClass()}>
         {/* Device chrome/decorations */}
         {device === DESKTOP && (