@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Containers/Templates/messages.js

@@ -46,6 +46,10 @@ export default defineMessages({
     id: `${scope}.mobilepushHeader`,
     defaultMessage: `Mobile Push`,
   },
+  "webpushHeader": {
+    id: `${scope}.webpushHeader`,
+    defaultMessage: `Web Push`,
+  },
   "ebillHeader": {
     id: `${scope}.ebillHeader`,
     defaultMessage: `Ebill`,
@@ -342,6 +346,10 @@ export default defineMessages({
     id: `${scope}.newWhatsappTemplate`,
     defaultMessage: 'Add new Whatsapp {template}',
   },
+  "newWebPushTemplate": {
+    id: `${scope}.newWebPushTemplate`,
+    defaultMessage: 'Add new Web push {template}',
+  },
   "newInAppMessageTemplate": {
     id: `${scope}.newInAppMessageTemplate`,
     defaultMessage: 'Add new In app message {template}',
@@ -378,6 +386,14 @@ export default defineMessages({
     id: `${scope}.whatsappDescIllustration`,
     defaultMessage: 'These templates can be reused when creating a\nnew message content.',
   },
+  "webPushTitleIllustration": {
+    id: `${scope}.webPushTitleIllustration`,
+    defaultMessage: 'Add a new Web push creative {template}',
+  },
+  "webPushDescIllustration": {
+    id: `${scope}.webPushDescIllustration`,
+    defaultMessage: 'These templates can be reused when creating a new message content.',
+  },
   "whatsappAccountNotConfiguredTitle": {
     id: `${scope}.whatsappAccountNotConfiguredTitle`,
     defaultMessage: 'Whatsapp account is not configured',
@@ -462,6 +478,10 @@ export default defineMessages({
     id: `${scope}.zaloAccount`,
     defaultMessage: 'Zalo account',
   },
+  "webpushAccount": {
+    id: `${scope}.webpushAccount`,
+    defaultMessage: 'Web push account',
+  },
   "rcsAccount": {
     id: `${scope}.rcsAccount`,
     defaultMessage: 'RCS account',
@@ -498,6 +518,10 @@ export default defineMessages({
     id: `${scope}.noAccountsPresentZalo`,
     defaultMessage: "Zalo accounts are not setup for your brand",
   },
+  "noAccountsPresentWebpush": {
+    id: `${scope}.noAccountsPresentWebpush`,
+    defaultMessage: "Web push accounts are not setup for your brand",
+  },
   "noAccountsPresentRcs": {
     id: `${scope}.noAccountsPresentRcs`,
     defaultMessage: "RCS accounts are not setup for your brand",
@@ -534,10 +558,6 @@ export default defineMessages({
     id: `${scope}.rcsOnlyApprovedTemplates`,
     defaultMessage: 'Only "Approved" templates are available here, as you can use those templates to create a message.',
   },
-  "layout": {
-    id: `${scope}.layout`,
-    defaultMessage: `Layout`,
-  },
   "status": {
     id: `${scope}.status`,
     defaultMessage: 'Status',

package/v2Containers/Templates/reducer.js

@@ -124,6 +124,8 @@ function templatesReducer(state = initialState, action) {
       return state
         .set('selectedFacebookAccount', fromJS(action.faceBookAccount))
         .set('templates', []);
+    case types.SET_WEBPUSH_ACCOUNT:
+      return state.set('selectedWebPushAccount', fromJS(action.account));
     case types.RESET_ACCOUNT:
       return state
         .remove('selectedWeChatAccount')

package/v2Containers/Templates/tests/index.test.js

@@ -22,6 +22,7 @@ describe('Test Templates container', () => {
   const getAllTemplates = jest.fn();
   const getUserList = jest.fn();
   const getSenderDetails = jest.fn();
+  const resetTemplate = jest.fn();
   let renderedComponent;
 
   beforeEach(() => {
@@ -54,6 +55,7 @@ describe('Test Templates container', () => {
           getAllTemplates,
           getUserList,
           getSenderDetails,
+          resetTemplate,
         }}
         location={{
           pathname: `/${channel}`,
@@ -79,6 +81,8 @@ describe('Test Templates container', () => {
       channel: 'WHATSAPP',
       orgUnitId: -1,
     });
+    // resetTemplate should be called when entering account selection mode
+    expect(resetTemplate).toHaveBeenCalled();
   });
 
   it('Should render temlates when whatsapp templates are passed', () => {
@@ -103,6 +107,8 @@ describe('Test Templates container', () => {
       Templates: {},
     });
     expect(renderedComponent).toMatchSnapshot();
+    // SMS doesn't enter account selection mode, so resetTemplate shouldn't be called on mount
+    expect(resetTemplate).not.toHaveBeenCalled();
   });
 
   it('Should render temlates when whatsapp templates are passed in full mode', () => {
@@ -123,6 +129,8 @@ describe('Test Templates container', () => {
   it('Should render correct component for zalo channel', () => {
     RenderFunctionFor('zalo');
     expect(renderedComponent).toMatchSnapshot();
+    // resetTemplate should be called when entering account selection mode
+    expect(resetTemplate).toHaveBeenCalled();
   });
   it('Should render temlates when zalo templates are passed', () => {
     RenderFunctionFor('zalo');
@@ -201,6 +209,8 @@ describe('Test Templates container', () => {
       channel: 'RCS',
       orgUnitId: -1,
     });
+    // resetTemplate should be called when entering account selection mode
+    expect(resetTemplate).toHaveBeenCalled();
   });
 
   it('Should render templates when RCS templates are passed', () => {

package/v2Containers/TemplatesV2/index.js

@@ -30,7 +30,7 @@ import FTP from '../FTP';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
-import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCALE_HIDE_FEATURE, ZALO, INAPP } from '../App/constants';
+import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCALE_HIDE_FEATURE, ZALO, INAPP, WEBPUSH } from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
 import { getObjFromQueryParams } from '../../utils/v2common';
 import { makeSelectAuthenticated, selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
@@ -65,6 +65,13 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       email: {content: <></>, tab: intl.formatMessage(messages.email), key: 'email'},
       //'wechat': {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
       mPush: {content: <></>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
+      ...(commonUtil.hasWebPushFeatureEnabled() ? {
+        webPush: {
+          content: <div></div>,
+          tab: intl.formatMessage(messages.webPush),
+          key: WEBPUSH,
+        }
+      } : {}),
       viber: {content: <></>, tab: intl.formatMessage(messages.viber), key: 'viber'},
       whatsapp: { content: <></>, tab: intl.formatMessage(messages.whatsapp), key: WHATSAPP },
       zalo: { content: <div></div>, tab: intl.formatMessage(messages.zalo), key: ZALO },

package/v2Containers/TemplatesV2/messages.js

@@ -86,4 +86,8 @@ export default defineMessages({
     id: `creatives.containersV2.TemplatesV2.inapp`,
     defaultMessage: 'In app message',
   },
+  webPush: {
+    id: `creatives.containersV2.TemplatesV2.webPush`,
+    defaultMessage: 'Web Push',
+  },
 });

package/v2Containers/WebPush/Create/components/BrandIconSection.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import CapImageUpload from '../../../../v2Components/CapImageUpload';
+import { WEBPUSH_BRAND_ICON } from '../../../CreativesContainer/constants';
+import {
+  BRAND_ICON_OPTIONS,
+  ALLOWED_IMAGE_EXTENSIONS_REGEX,
+  WEBPUSH_BRAND_ICON_SIZE,
+  WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS,
+} from '../../constants';
+
+/**
+ * BrandIconSection component - Brand icon/logo upload options
+ */
+export const BrandIconSection = ({
+  brandIconOption,
+  onBrandIconChange,
+  brandIconUpload,
+  isLocked,
+  isAnyUploadActive,
+  formatMessage,
+  messages,
+  webPush,
+  isFullMode,
+}) => {
+  const {
+    imageSrc: brandIconSrc,
+    uploadAsset: uploadBrandIconAsset,
+    setUpdateImageSrc: setUpdateBrandIconSrc,
+    updateOnReUpload: updateOnBrandIconReUpload,
+  } = brandIconUpload;
+
+  const brandIconOptions = [
+    { value: BRAND_ICON_OPTIONS.DONT_SHOW, label: formatMessage(messages.dontShow) },
+    { value: BRAND_ICON_OPTIONS.UPLOAD_IMAGE, label: formatMessage(messages.uploadImage) },
+    // NOTE: Commented out due to technical blocker - "Add image URL" option for Brand icon/logo
+    // { value: BRAND_ICON_OPTIONS.ADD_IMAGE_URL, label: formatMessage(messages.addImageUrl) },
+  ];
+
+  return (
+    <>
+      <CapRow className="creatives-webpush-brand-icon">
+        <CapHeading type="h4" className="webpush-brand-icon">
+          <FormattedMessage {...messages.brandIconLogo} />
+        </CapHeading>
+        <CapRadioGroup
+          options={brandIconOptions}
+          value={brandIconOption}
+          onChange={onBrandIconChange}
+          disabled={isAnyUploadActive}
+        />
+      </CapRow>
+      {brandIconOption === BRAND_ICON_OPTIONS.UPLOAD_IMAGE && (
+        <CapRow
+          className="webpush-brand-icon-upload-section"
+          style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
+          aria-disabled={isLocked}
+        >
+          <CapImageUpload
+            allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
+            imgSize={WEBPUSH_BRAND_ICON_SIZE}
+            uploadAsset={uploadBrandIconAsset}
+            isFullMode={isFullMode}
+            imageSrc={brandIconSrc}
+            updateImageSrc={setUpdateBrandIconSrc}
+            updateOnReUpload={updateOnBrandIconReUpload}
+            index={1}
+            className="cap-custom-image-upload"
+            key="webpush-brand-icon-uploaded-image"
+            imageData={webPush}
+            channel={WEBPUSH_BRAND_ICON}
+            showReUploadButton
+            recommendedDimensions={WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS}
+            disabled={isLocked}
+          />
+        </CapRow>
+      )}
+      <CapDivider />
+    </>
+  );
+};
+
+BrandIconSection.propTypes = {
+  brandIconOption: PropTypes.string.isRequired,
+  onBrandIconChange: PropTypes.func.isRequired,
+  brandIconUpload: PropTypes.object.isRequired,
+  isLocked: PropTypes.bool,
+  isAnyUploadActive: PropTypes.bool,
+  formatMessage: PropTypes.func.isRequired,
+  messages: PropTypes.object.isRequired,
+  webPush: PropTypes.object,
+  isFullMode: PropTypes.bool,
+};
+
+BrandIconSection.defaultProps = {
+  isLocked: false,
+  isAnyUploadActive: false,
+  webPush: {},
+  isFullMode: true,
+};
+
+export default BrandIconSection;
+

package/v2Containers/WebPush/Create/components/ButtonForm.js

@@ -0,0 +1,172 @@
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import messages from '../messages';
+import { isValidHttpUrl } from '../utils/urlValidation';
+import { WEBPUSH_BUTTON_TYPES, BUTTON_TEXT_MAX_LENGTH } from '../../constants';
+
+const ButtonForm = ({
+  buttonType, // 'primary' or 'secondary'
+  formatMessage,
+  onSave,
+  onCancel,
+  initialData,
+  isEditMode,
+}) => {
+  const [buttonText, setButtonText] = useState(initialData?.text || '');
+  const [buttonUrl, setButtonUrl] = useState(initialData?.url || '');
+  const [buttonTextError, setButtonTextError] = useState('');
+  const [buttonUrlError, setButtonUrlError] = useState('');
+
+  const validateButtonText = useCallback((value) => {
+    if (!value || value.trim() === '') {
+      return formatMessage(messages.buttonTextRequired);
+    }
+    return '';
+  }, [formatMessage]);
+
+  const validateButtonUrl = useCallback((value) => {
+    if (!value || value.trim() === '') {
+      return formatMessage(messages.buttonUrlRequired);
+    }
+
+    if (!isValidHttpUrl(value)) {
+      return formatMessage(messages.buttonUrlInvalid);
+    }
+
+    return '';
+  }, [formatMessage]);
+
+  const handleButtonTextChange = useCallback((e) => {
+    const { value } = e.target;
+    setButtonText(value);
+    const nextError = validateButtonText(value);
+    setButtonTextError((prev) => (prev === nextError ? prev : nextError));
+  }, [validateButtonText]);
+
+  const handleButtonUrlChange = useCallback((e) => {
+    const { value } = e.target;
+    setButtonUrl(value);
+    const nextError = validateButtonUrl(value);
+    setButtonUrlError((prev) => (prev === nextError ? prev : nextError));
+  }, [validateButtonUrl]);
+
+  const handleSave = useCallback(() => {
+    const textError = validateButtonText(buttonText);
+    const urlError = validateButtonUrl(buttonUrl);
+
+    if (textError || urlError) {
+      setButtonTextError(textError);
+      setButtonUrlError(urlError);
+      return;
+    }
+
+    onSave({
+      text: buttonText.trim(),
+      url: buttonUrl.trim(),
+      type: buttonType,
+    });
+  }, [buttonText, buttonUrl, buttonType, onSave, validateButtonText, validateButtonUrl]);
+
+  const handleCancel = useCallback(() => {
+    onCancel();
+  }, [onCancel]);
+
+  const isSaveDisabled = !buttonText.trim() || !buttonUrl.trim() || buttonTextError || buttonUrlError;
+
+  const renderCharacterCountSuffix = () => {
+    const currentLength = buttonText.length;
+    const maxLength = BUTTON_TEXT_MAX_LENGTH;
+
+    return (
+      <span className="button-character-count-suffix">
+        {`${currentLength}/${maxLength}`}
+      </span>
+    );
+  };
+
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === 'Enter' && !isSaveDisabled) {
+      e.preventDefault();
+      handleSave();
+    }
+  }, [handleSave, isSaveDisabled]);
+
+  return (
+    <div className="webpush-button-form" onKeyDown={handleKeyDown}>
+      <CapRow className="button-form-row">
+        <CapHeading type="h4" className="button-form-heading">
+          <FormattedMessage {...messages.buttonText} />
+        </CapHeading>
+        <div className="button-form-field">
+          <CapInput
+            id={`webpush-button-text-input-${buttonType}`}
+            placeholder={formatMessage(messages.buttonTextPlaceholder)}
+            value={buttonText}
+            onChange={handleButtonTextChange}
+            maxLength={BUTTON_TEXT_MAX_LENGTH}
+            size="default"
+            status={buttonTextError ? 'error' : ''}
+            help={buttonTextError || ''}
+            suffix={renderCharacterCountSuffix()}
+          />
+        </div>
+      </CapRow>
+      <CapRow className="button-form-row">
+        <CapHeading type="h4" className="button-form-heading">
+          <FormattedMessage {...messages.buttonUrlLabel} />
+        </CapHeading>
+        <CapInput
+          id={`webpush-button-url-input-${buttonType}`}
+          placeholder={formatMessage(messages.buttonUrlPlaceholder)}
+          value={buttonUrl}
+          onChange={handleButtonUrlChange}
+          size="default"
+          status={buttonUrlError ? 'error' : ''}
+          help={buttonUrlError || ''}
+        />
+      </CapRow>
+      <CapRow className="button-form-actions">
+        <CapButton
+          type="primary"
+          onClick={handleSave}
+          disabled={isSaveDisabled}
+          className="button-form-save"
+        >
+          <FormattedMessage {...messages.saveButton} />
+        </CapButton>
+        <CapButton
+          type="secondary"
+          onClick={handleCancel}
+          className="button-form-cancel"
+        >
+          <FormattedMessage {...(isEditMode ? messages.cancelButton : messages.deleteButton)} />
+        </CapButton>
+      </CapRow>
+    </div>
+  );
+};
+
+ButtonForm.propTypes = {
+  buttonType: PropTypes.oneOf([WEBPUSH_BUTTON_TYPES.PRIMARY, WEBPUSH_BUTTON_TYPES.SECONDARY]).isRequired,
+  formatMessage: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  initialData: PropTypes.shape({
+    text: PropTypes.string,
+    url: PropTypes.string,
+  }),
+  isEditMode: PropTypes.bool,
+};
+
+ButtonForm.defaultProps = {
+  initialData: null,
+  isEditMode: false,
+};
+
+export default ButtonForm;
+

package/v2Containers/WebPush/Create/components/ButtonItem.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+
+const ButtonItem = ({
+  button,
+  index,
+  onEdit,
+  onDelete,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  disabled,
+}) => {
+  const handleDragStart = (e) => {
+    if (disabled) return;
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/html', e.currentTarget);
+    onDragStart(index);
+  };
+
+  const handleDragOver = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    onDragOver(index);
+  };
+
+  const handleDrop = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onDrop(index);
+  };
+
+  return (
+    <div 
+      className={`webpush-button-item ${disabled ? 'disabled' : ''}`}
+      draggable={!disabled}
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      onDragEnd={onDragEnd}
+    >
+      <CapRow align="middle" className="button-item-content">
+        <CapColumn span={1} className="button-item-drag-handle">
+          <CapIcon type="drag" className="drag-icon" />
+        </CapColumn>
+        <CapColumn span={1} className="button-item-icon">
+          <CapIcon type="link" className="link-icon" />
+        </CapColumn>
+        <CapColumn span={14} className="button-item-info">
+          <div className="button-item-text-row">
+            <span className="button-item-text">{button.text}</span>
+          </div>
+        </CapColumn>
+        <CapColumn span={8} className="button-item-actions">
+          <div className="button-item-url">{button.url}</div>
+          <div className="action-icons">
+            <CapIcon
+              type="edit"
+              className="action-icon"
+              onClick={() => !disabled && onEdit(index)}
+            />
+            <CapIcon
+              type="delete"
+              className="action-icon delete-icon"
+              onClick={() => !disabled && onDelete(index)}
+            />
+          </div>
+        </CapColumn>
+      </CapRow>
+    </div>
+  );
+};
+
+ButtonItem.propTypes = {
+  button: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+  }).isRequired,
+  index: PropTypes.number.isRequired,
+  onEdit: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onDragStart: PropTypes.func.isRequired,
+  onDragOver: PropTypes.func.isRequired,
+  onDrop: PropTypes.func.isRequired,
+  onDragEnd: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};
+
+ButtonItem.defaultProps = {
+  disabled: false,
+};
+
+export default ButtonItem;
+

package/v2Containers/WebPush/Create/components/ButtonList.js

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import ButtonItem from './ButtonItem';
+import messages from '../messages';
+
+const ButtonList = ({
+  buttons,
+  onEdit,
+  onDelete,
+  onReorder,
+  onAddPrimary,
+  onAddSecondary,
+  showAddPrimary,
+  showAddSecondary,
+  disabled,
+  disableSecondaryButton,
+  isInlineFormVisible,
+  inlineFormIndex,
+  renderInlineForm,
+}) => {
+  const [draggedIndex, setDraggedIndex] = useState(null);
+
+  const handleDragStart = (index) => {
+    if (disabled) return;
+    setDraggedIndex(index);
+  };
+
+  const handleDragOver = (index) => {
+    if (disabled) return;
+    if (draggedIndex === null || draggedIndex === index) return;
+    
+    // Reorder buttons
+    onReorder(draggedIndex, index);
+    setDraggedIndex(index);
+  };
+
+  const handleDrop = () => {
+    if (disabled) return;
+  };
+
+  const handleDragEnd = () => {
+    if (disabled) return;
+    setDraggedIndex(null);
+  };
+
+  const shouldRenderInlineForm = isInlineFormVisible
+    && typeof inlineFormIndex === 'number'
+    && inlineFormIndex >= 0;
+
+  // Don't render the container if there are no buttons
+  if (buttons.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="webpush-button-list">
+      {buttons.map((button, index) => {
+        if (shouldRenderInlineForm && inlineFormIndex === index && typeof renderInlineForm === 'function') {
+          return (
+            <div key={`button-inline-form-${button.id}`} className="button-inline-form">
+              {renderInlineForm()}
+            </div>
+          );
+        }
+        // Only disable items that are not being edited
+        const isItemDisabled = disabled || (isInlineFormVisible && inlineFormIndex !== null && inlineFormIndex !== index);
+        return (
+          <ButtonItem
+            key={button.id}
+            button={button}
+            index={index}
+            onEdit={onEdit}
+            onDelete={onDelete}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+            onDragEnd={handleDragEnd}
+            disabled={isItemDisabled}
+          />
+        );
+      })}
+      {showAddPrimary && (
+        <CapRow className="button-list-add-button">
+          <CapButton
+            type="flat"
+            onClick={onAddPrimary}
+            className="add-primary-button button-add-trigger"
+            icon="plus"
+            disabled={disabled}
+          >
+            <FormattedMessage {...messages.addPrimaryButton} />
+          </CapButton>
+        </CapRow>
+      )}
+      {showAddSecondary && (
+        <CapRow className="button-list-add-button">
+          <CapButton
+            type="flat"
+            onClick={onAddSecondary}
+            className="add-secondary-button button-add-trigger"
+            icon="plus"
+            disabled={disableSecondaryButton || disabled}
+          >
+            <FormattedMessage {...messages.addSecondaryButton} />
+          </CapButton>
+        </CapRow>
+      )}
+    </div>
+  );
+};
+
+ButtonList.propTypes = {
+  buttons: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+  })).isRequired,
+  onEdit: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onReorder: PropTypes.func.isRequired,
+  onAddPrimary: PropTypes.func.isRequired,
+  onAddSecondary: PropTypes.func.isRequired,
+  showAddPrimary: PropTypes.bool.isRequired,
+  showAddSecondary: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
+  disableSecondaryButton: PropTypes.bool,
+  isInlineFormVisible: PropTypes.bool,
+  inlineFormIndex: PropTypes.number,
+  renderInlineForm: PropTypes.func,
+};
+
+ButtonList.defaultProps = {
+  disabled: false,
+  disableSecondaryButton: false,
+  isInlineFormVisible: false,
+  inlineFormIndex: null,
+  renderInlineForm: null,
+};
+
+export default ButtonList;
+