@capillarytech/creatives-library 8.0.213 → 8.0.214-beta.0

package/v2Components/HtmlEditor/_index.lazy.scss

@@ -13,7 +13,7 @@
   align-items: center;
   min-height: 25rem; // 400px = 25rem
   background: $CAP_G11; // Light background similar to #fafbfc
-  border: 0.0625rem solid $CAP_G07; // 1px border similar to #dfe2e7
+  // border: 0.0625rem solid $CAP_G07; // 1px border similar to #dfe2e7
   border-radius: 0.5rem; // 8px = 0.5rem
   flex-direction: column;
   gap: 1rem; // 16px = 1rem

package/v2Components/HtmlEditor/components/CodeEditorPane/_codeEditorPane.scss

@@ -32,78 +32,78 @@
     align-items: center;
     gap: 0.5rem;
 
-    .cap-button,
-    .ant-btn,
-    button {
-      color: map-get($CAP_PRIMARY, base);
-      border: none;
-      background: $CAP_WHITE;
-      border-radius: 0.25rem;
-      padding: 0.375rem 0.5rem;
-      font-size: 0.875rem;
-      font-family: $FONT_FAMILY;
-      font-weight: 500;
-      height: auto;
-      min-width: 5.9375rem;
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-      box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
-      line-height: 1.25rem;
-      text-align: left;
-
-      &:hover {
-        background: $CAP_G09;
-        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.375rem 0.75rem -0.125rem rgba(9, 30, 66, 0.25);
-        color: map-get($CAP_PRIMARY, base);
-        border: none;
-      }
-
-      &:active,
-      &:focus {
-        background: $CAP_G08;
-        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.125rem 0.25rem -0.125rem rgba(9, 30, 66, 0.25);
-        color: map-get($CAP_PRIMARY, base);
-        border: none;
-      }
-
-      .anticon,
-      .cap-icon {
-        font-size: 1rem;
-        color: map-get($CAP_PRIMARY, base);
-      }
-
-      span {
-        font-size: 0.875rem;
-        font-weight: 500;
-        line-height: 1.25rem;
-        color: map-get($CAP_PRIMARY, base);
-        white-space: nowrap;
-      }
-
-      &:before,
-      &:after {
-        display: none;
-      }
-    }
-
-    .tooltip-add-label-container {
-
-      .cap-button,
-      .ant-btn {
-        color: map-get($CAP_PRIMARY, base);
-        background: $CAP_WHITE;
-        border: none;
-        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
-      }
-    }
-
-    .cap-button-flat,
-    .cap-button-add {
-      background: $CAP_WHITE;
-      color: map-get($CAP_PRIMARY, base);
-      border: none;
-    }
+    // .cap-button,
+    // .ant-btn,
+    // button {
+    //   color: map-get($CAP_PRIMARY, base);
+    //   border: none;
+    //   background: $CAP_WHITE;
+    //   border-radius: 0.25rem;
+    //   padding: 0.375rem 0.5rem;
+    //   font-size: 0.875rem;
+    //   font-family: $FONT_FAMILY;
+    //   font-weight: 500;
+    //   height: auto;
+    //   min-width: 5.9375rem;
+    //   display: flex;
+    //   align-items: center;
+    //   gap: 0.25rem;
+    //   box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+    //   line-height: 1.25rem;
+    //   text-align: left;
+
+    //   &:hover {
+    //     background: $CAP_G09;
+    //     box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.375rem 0.75rem -0.125rem rgba(9, 30, 66, 0.25);
+    //     color: map-get($CAP_PRIMARY, base);
+    //     border: none;
+    //   }
+
+    //   &:active,
+    //   &:focus {
+    //     background: $CAP_G08;
+    //     box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.125rem 0.25rem -0.125rem rgba(9, 30, 66, 0.25);
+    //     color: map-get($CAP_PRIMARY, base);
+    //     border: none;
+    //   }
+
+    //   .anticon,
+    //   .cap-icon {
+    //     font-size: 1rem;
+    //     color: map-get($CAP_PRIMARY, base);
+    //   }
+
+    //   span {
+    //     font-size: 0.875rem;
+    //     font-weight: 500;
+    //     line-height: 1.25rem;
+    //     color: map-get($CAP_PRIMARY, base);
+    //     white-space: nowrap;
+    //   }
+
+    //   &:before,
+    //   &:after {
+    //     display: none;
+    //   }
+    // }
+
+    // .tooltip-add-label-container {
+
+    //   .cap-button,
+    //   .ant-btn {
+    //     color: map-get($CAP_PRIMARY, base);
+    //     background: $CAP_WHITE;
+    //     border: none;
+    //     box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+    //   }
+    // }
+
+    // .cap-button-flat,
+    // .cap-button-add {
+    //   background: $CAP_WHITE;
+    //   color: map-get($CAP_PRIMARY, base);
+    //   border: none;
+    // }
   }
 
   &__content {
@@ -130,6 +130,17 @@
     }
   }
 
+  .code-editor-pane__actions {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+  }
+  
+  .code-editor-pane__content:hover .code-editor-pane__actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  
   .cm-foldGutter {
     width: 1rem;
 
@@ -235,30 +246,30 @@
       right: 0.5rem;
       z-index: 20;
 
-      .cap-button,
-      .ant-btn,
-      button {
-        background: $CAP_WHITE;
-        color: map-get($CAP_PRIMARY, base);
-        border: none;
-        border-radius: 0.25rem;
-        padding: 0.375rem 0.5rem;
-        font-size: 0.875rem;
-        font-family: $FONT_FAMILY;
-        font-weight: 500;
-        min-width: 5.9375rem;
-        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
-
-        &:hover {
-          background: $CAP_G09;
-          color: map-get($CAP_PRIMARY, base);
-        }
-
-        &:active {
-          background: $CAP_G08;
-          color: map-get($CAP_PRIMARY, base);
-        }
-      }
+      // .cap-button,
+      // .ant-btn,
+      // button {
+      //   background: $CAP_WHITE;
+      //   color: map-get($CAP_PRIMARY, base);
+      //   border: none;
+      //   border-radius: 0.25rem;
+      //   padding: 0.375rem 0.5rem;
+      //   font-size: 0.875rem;
+      //   font-family: $FONT_FAMILY;
+      //   font-weight: 500;
+      //   min-width: 5.9375rem;
+      //   box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+
+      //   &:hover {
+      //     background: $CAP_G09;
+      //     color: map-get($CAP_PRIMARY, base);
+      //   }
+
+      //   &:active {
+      //     background: $CAP_G08;
+      //     color: map-get($CAP_PRIMARY, base);
+      //   }
+      // }
     }
 
     .codemirror-editor {

package/v2Components/HtmlEditor/components/CodeEditorPane/index.js

@@ -8,7 +8,7 @@
  * - Theme support with proper styling
  */
 
-import React, { forwardRef, useImperativeHandle, useRef, useEffect, useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 // CodeMirror 6 imports
@@ -30,6 +30,8 @@ import CapRow from '@capillarytech/cap-ui-library/CapRow';
 // Components
 import TagList from '../../../../v2Containers/TagList';
 
+// Constants - removed unused imports since tag fetching is handled by parent
+
 // Context
 import { useEditorContext } from '../common/EditorContext';
 
@@ -44,7 +46,17 @@ const CodeEditorPaneComponent = ({
   className = '',
   isFullscreenMode = false,
   onLabelInsert,
-  forwardedRef
+  forwardedRef,
+  // Tag-related props - tags are fetched and managed by parent component
+  tags = [],
+  injectedTags = {},
+  location,
+  eventContextTags = [],
+  selectedOfferDetails = [],
+  channel,
+  userLocale = 'en',
+  moduleFilterEnabled = true,
+  onTagContextChange
 }) => {
   const { content, validation } = useEditorContext();
   const { content: contentValue, updateContent } = content;
@@ -147,7 +159,7 @@ const CodeEditorPaneComponent = ({
       // For unified HTML editor, insert as template variable
       const formattedTag = `{{${tagText}}}`;
 
-      // Insert the tag at cursor position
+      // Insert the tag at cursor position directly
       view.dispatch({
         changes: { from: pos, insert: formattedTag },
         selection: { anchor: pos + formattedTag.length }
@@ -156,31 +168,43 @@ const CodeEditorPaneComponent = ({
       // Focus back to editor
       view.focus();
 
-      // Call the parent's handleLabelInsert if available
-      if (onLabelInsert) {
-        onLabelInsert(formattedTag, pos);
-      }
+      // Note: We don't call onLabelInsert here because:
+      // 1. The tag is already inserted directly into the editor
+      // 2. onLabelInsert (handleLabelInsert from HTMLEditor) would try to insert again
+      // 3. This causes "Editor method not available" error
+      // The direct insertion via view.dispatch is sufficient
     }
   };
 
+  // Handle tag context change - delegate to parent component
+  // Tags are fetched in parent components (EmailHTMLEditor, INAPP, etc.)
+  // This component just passes the context change event up
+  const handleTagContextChange = useCallback((data) => {
+    if (onTagContextChange) {
+      // Parent component handles tag fetching and updates
+      onTagContextChange(data);
+    }
+    // No fallback - tags must be managed by parent component
+  }, [onTagContextChange]);
+
   // Initialize CodeMirror effect
   useEffect(() => {
     if (editorRef.current && !viewRef.current) {
-            // Use the comprehensive extensions from properSyntaxHighlighting.js
-            // This includes: html(), syntaxHighlighting(comprehensiveVSCodeTheme), cleanEditorTheme
-            const robustExtensions = createRobustExtensions();
-
-            // Add additional extensions for line numbers, active line, and update listener
-            const extensions = [
-              lineNumbers(),
-              highlightActiveLine(),
-              ...robustExtensions, // Spread the robust extensions (html, syntax highlighting, theme)
-              EditorView.updateListener.of((update) => {
-                if (update.docChanged) {
-                  updateContentRef.current(update.state.doc.toString());
-                }
-              })
-            ];
+      // Use the comprehensive extensions from properSyntaxHighlighting.js
+      // This includes: html(), syntaxHighlighting(comprehensiveVSCodeTheme), cleanEditorTheme
+      const robustExtensions = createRobustExtensions();
+
+      // Add additional extensions for line numbers, active line, and update listener
+      const extensions = [
+        lineNumbers(),
+        highlightActiveLine(),
+        ...robustExtensions, // Spread the robust extensions (html, syntax highlighting, theme)
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            updateContentRef.current(update.state.doc.toString());
+          }
+        })
+      ];
 
       const state = EditorState.create({
         doc: contentValue || '',
@@ -233,75 +257,18 @@ const CodeEditorPaneComponent = ({
                 key="html-editor-taglist"
                 label={intl.formatMessage(messages.addLabel)}
                 onTagSelect={handleTagSelect}
-                onContextChange={(context) => {
-                }}
+                onContextChange={handleTagContextChange}
                 className="tag-list-trigger"
-                tags={[]} // Empty initially - TagList will fetch from API
-                injectedTags={{
-                  // Add common HTML/Email specific tags as fallback
-                  'Customer Info': {
-                    name: 'Customer Info',
-                    desc: 'Customer information tags',
-                    resolved: true,
-                    'tag-header': true,
-                    subtags: {
-                      'customer.firstName': {
-                        name: 'First Name',
-                        desc: 'Customer first name',
-                        resolved: true
-                      },
-                      'customer.lastName': {
-                        name: 'Last Name',
-                        desc: 'Customer last name',
-                        resolved: true
-                      },
-                      'customer.email': {
-                        name: 'Email',
-                        desc: 'Customer email address',
-                        resolved: true
-                      },
-                      'customer.phone': {
-                        name: 'Phone',
-                        desc: 'Customer phone number',
-                        resolved: true
-                      }
-                    }
-                  },
-                  'Common Tags': {
-                    name: 'Common Tags',
-                    desc: 'Commonly used template tags',
-                    resolved: true,
-                    'tag-header': true,
-                    subtags: {
-                      'organization.name': {
-                        name: 'Organization Name',
-                        desc: 'Organization name',
-                        resolved: true
-                      },
-                      'currentDate': {
-                        name: 'Current Date',
-                        desc: 'Current date',
-                        resolved: true
-                      },
-                      'unsubscribeLink': {
-                        name: 'Unsubscribe Link',
-                        desc: 'Unsubscribe link',
-                        resolved: true
-                      }
-                    }
-                  }
-                }}
-                moduleFilterEnabled={true}
-                userLocale="en"
-                channel="email"
+                tags={tags}
+                injectedTags={injectedTags}
+                moduleFilterEnabled={moduleFilterEnabled}
+                userLocale={userLocale}
+                channel={channel}
                 disabled={readOnly}
-                location={{
-                  query: {
-                    type: 'html-editor' // Identify the context
-                  }
-                }}
-                selectedOfferDetails={[]}
-                eventContextTags={[]}
+                location={location}
+                selectedOfferDetails={selectedOfferDetails}
+                eventContextTags={eventContextTags}
+                popoverPlacement="rightTop"
               />
             </CapRow>
           </div>
@@ -323,9 +290,18 @@ CodeEditorPane.propTypes = {
   readOnly: PropTypes.bool,
   className: PropTypes.string,
   isFullscreenMode: PropTypes.bool,
-  onLabelInsert: PropTypes.func
+  onLabelInsert: PropTypes.func,
+  // Tag-related props - tags are fetched and managed by parent component
+  tags: PropTypes.array,
+  injectedTags: PropTypes.object,
+  location: PropTypes.object,
+  eventContextTags: PropTypes.array,
+  selectedOfferDetails: PropTypes.array,
+  channel: PropTypes.string,
+  userLocale: PropTypes.string,
+  moduleFilterEnabled: PropTypes.bool,
+  onTagContextChange: PropTypes.func, // Required - parent must handle tag fetching
 };
 
 // Export with injectIntl - ref forwarding is handled by forwardRef wrapper
-export default injectIntl(CodeEditorPane);
-
+export default injectIntl(CodeEditorPane);

package/v2Components/HtmlEditor/components/SplitContainer/_splitContainer.scss

@@ -161,7 +161,7 @@
 
   // Dragging state styling
   &--dragging &__splitter {
-    background-color: map-get($CAP_PRIMARY, base);
+    background-color: map-get($CAP_SECONDARY, base);
   }
 
   &--dragging &__splitter-line {

package/v2Components/HtmlEditor/hooks/useEditorContent.js

@@ -69,7 +69,10 @@ export const useEditorContent = (
   } = options;
 
   // Unified content state
-  const [content, setContent] = useState(initialContent || DEFAULT_CONTENT);
+  // Use DEFAULT_CONTENT only if initialContent is null or undefined (not empty string)
+  // This allows explicitly passing empty string for empty content
+  const initialContentValue = initialContent == null ? DEFAULT_CONTENT : initialContent;
+  const [content, setContent] = useState(initialContentValue);
   const [isDirty, setIsDirty] = useState(false);
   const [lastSaved, setLastSaved] = useState(null);
   const [isAutoSaveEnabled, setIsAutoSaveEnabled] = useState(autoSave);
@@ -79,7 +82,7 @@ export const useEditorContent = (
   const validationDebounceRef = useRef(null);
   const autoSaveRef = useRef(null);
   const validationCallbackRef = useRef(null);
-  const lastContentRef = useRef(initialContent || DEFAULT_CONTENT);
+  const lastContentRef = useRef(initialContentValue);
 
   // Smart debouncing hooks
   const debouncedOnChange = useSmartDebounce(onChange || (() => {}), PERFORMANCE.PREVIEW_UPDATE_DEBOUNCE);

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import cloneDeep from 'lodash/cloneDeep';
+import { CapSpin } from '@capillarytech/cap-ui-library';
 import TemplatesV2 from '../TemplatesV2';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import SmsWrapper from '../SmsWrapper';
@@ -164,6 +165,7 @@ export function SlideBoxContent(props) {
       handleTestAndPreview,
       handleCloseTestAndPreview,
       isTestAndPreviewMode,
+      isLoadingContent = false,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -629,44 +631,92 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
+        location={location}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
-      <Email
-        key="cretives-container-email-edit"
-        setIsLoadingContent={setIsLoadingContent}
-        location={{
-          pathname: `/email/edit`,
-          query: { type: 'embedded', module: 'library'},
-        }}
-        route={{ name: 'email' }}
-        isGetFormData={isGetFormData}
-        getFormdata={getFormData}
-        params={{ id: templateData._id }}
-        templateData={templateData}
-        getFormSubscriptionData={getFormData}
-        getDefaultTags={type}
-        isFullMode={isFullMode}
-        editor={editor}
-        cap={cap}
-        showTemplateName={showTemplateName}
-        onValidationFail={onValidationFail}
-        forwardedTags={forwardedTags}
-        selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}
-        moduleType={moduleType}
-        showLiquidErrorInFooter={showLiquidErrorInFooter}
-        eventContextTags={eventContextTags}
-        isLoyaltyModule={isLoyaltyModule}
-        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
-        handleTestAndPreview={handleTestAndPreview}
-        handleCloseTestAndPreview={handleCloseTestAndPreview}
-        isTestAndPreviewMode={(() => {
-          return isTestAndPreviewMode;
-        })()}
-      />
-        )}
+        (() => {
+          const supportCKEditor = commonUtil.hasSupportCKEditor();
+          // When supportCKEditor is true: Always use Email component (legacy flow)
+          if (supportCKEditor || templateData?.is_drag_drop) {
+            return (
+              <Email
+                key="cretives-container-email-edit"
+                setIsLoadingContent={setIsLoadingContent}
+                location={{
+                  pathname: `/email/edit`,
+                  query: { type: 'embedded', module: 'library'},
+                }}
+                route={{ name: 'email' }}
+                isGetFormData={isGetFormData}
+                getFormdata={getFormData}
+                params={{ id: templateData._id }}
+                templateData={templateData}
+                getFormSubscriptionData={getFormData}
+                getDefaultTags={type}
+                isFullMode={isFullMode}
+                editor={editor}
+                cap={cap}
+                showTemplateName={showTemplateName}
+                onValidationFail={onValidationFail}
+                forwardedTags={forwardedTags}
+                selectedOfferDetails={selectedOfferDetails}
+                onPreviewContentClicked={onPreviewContentClicked}
+                onTestContentClicked={onTestContentClicked}
+                moduleType={moduleType}
+                showLiquidErrorInFooter={showLiquidErrorInFooter}
+                eventContextTags={eventContextTags}
+                isLoyaltyModule={isLoyaltyModule}
+                showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+                handleTestAndPreview={handleTestAndPreview}
+                handleCloseTestAndPreview={handleCloseTestAndPreview}
+                isTestAndPreviewMode={isTestAndPreviewMode}
+              />
+            );
+          }     
+          // HTML template: Use EmailWrapper component (which uses EmailWithoutSaga)
+          return (
+            <EmailWrapper
+              key="cretives-container-email-edit-wrapper"
+              setIsLoadingContent={setIsLoadingContent}
+              onEmailModeChange={onEmailModeChange}
+              emailCreateMode="editor"
+              isGetFormData={isGetFormData}
+              getFormdata={getFormData}
+              templateData={templateData}
+              type={type}
+              step="createTemplateContent"
+              showNextStep={onCreateNextStep}
+              isFullMode={isFullMode}
+              editor={editor}
+              cap={cap}
+              onResetStep={onResetStep}
+              showTemplateName={showTemplateName}
+              onEnterTemplateName={onEnterTemplateName}
+              onRemoveTemplateName={onRemoveTemplateName}
+              onValidationFail={onValidationFail}
+              forwardedTags={forwardedTags}
+              selectedOfferDetails={selectedOfferDetails}
+              onPreviewContentClicked={onPreviewContentClicked}
+              onTestContentClicked={onTestContentClicked}
+              getCmsTemplatesInProgress={getCmsTemplatesInProgress}
+              moduleType={moduleType}
+              showLiquidErrorInFooter={showLiquidErrorInFooter}
+              eventContextTags={eventContextTags}
+              isLoyaltyModule={isLoyaltyModule}
+              showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+              handleTestAndPreview={handleTestAndPreview}
+              handleCloseTestAndPreview={handleCloseTestAndPreview}
+              isTestAndPreviewMode={isTestAndPreviewMode}
+              location={{
+                pathname: `/email/edit/${templateData._id}`,
+                query: { type: 'embedded', module: 'library', id: templateData._id },
+              }}
+              params={{ id: templateData._id }}
+            />
+          );
+        })()
+      )}
       {isEditMPush && (
         (isFullMode && !commonUtil.hasNewMobilePushFeatureEnabled()) || 
         (!isFullMode && isLoyaltyModule) || 

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -31,8 +31,9 @@ function SlideBoxFooter(props) {
     showTestAndPreviewButton,
     shouldShowDoneFooter,
     shouldShowContinueFooter,
+    isContinueButtonDisabled,
+    continueButtonLabel,
   } = props;
-
   return (
     <div className='template-footer-width'>
       {isLiquidValidationError && (<ErrorInfoNote errorMessages={errorMessages} currentTab={currentTab?.toUpperCase()} />)}
@@ -70,8 +71,11 @@ function SlideBoxFooter(props) {
           </div>
         )}
         {shouldShowContinueFooter() && (
-          <CapButton onClick={onCreateNextStep}>
-            <FormattedMessage {...messages.continue} />
+          <CapButton
+            onClick={onCreateNextStep}
+            disabled={isContinueButtonDisabled || false}
+          >
+            <FormattedMessage {...(continueButtonLabel || messages.continue)} />
           </CapButton>
         )}
         {slidBoxContent === PREVIEW && (
@@ -99,5 +103,7 @@ SlideBoxFooter.propTypes = {
   onTestAndPreview: PropTypes.func,
   isEmptyContent: PropTypes.bool,
   showTestAndPreviewButton: PropTypes.bool,
+  isContinueButtonDisabled: PropTypes.bool,
+  continueButtonLabel: PropTypes.object,
 };
 export default SlideBoxFooter;