web-push-notifications 3.40.3 → 3.44.1

package/src/widgets/SubscriptionButton/index.ts

@@ -0,0 +1,377 @@
+import {
+  PERMISSION_GRANTED,
+  PERMISSION_DENIED,
+  PERMISSION_PROMPT,
+} from '../../core/constants';
+import mainCss from './assets/css/main.css';
+import bellSVG from './bell';
+import {
+  SUBSCRIBE_WIDGET_DEFAULT_CONFIG,
+  WIDGET_CONTAINER_ID,
+} from './constants';
+import Positioning from './positioning';
+import { type TBellConfig, type TCSSStylesObject, type TStyleKeys } from './subscribe_widget.types';
+import { type Pushwoosh } from '../../core/Pushwoosh';
+import {
+  type TPlatformChrome,
+  type TPlatformEdge,
+  type TPlatformFirefox,
+  type TPlatformSafari,
+} from '../../modules/PlatformChecker/PlatformChecker.types';
+
+export class PWSubscriptionButtonWidget {
+  widget: HTMLElement;
+  tooltip: HTMLElement;
+  popover: HTMLElement;
+  style: HTMLElement;
+  pw: Pushwoosh;
+  config: TBellConfig;
+
+  constructor(pw: Pushwoosh) {
+    // Set Pushwoosh object
+    this.pw = pw;
+    if (!pw.platformChecker.isAvailableNotifications) {
+      console.warn('Browser does not support push notifications');
+      return;
+    }
+
+    // Bindings
+    this.clickBell = this.clickBell.bind(this);
+    this.onSubscribeEvent = this.onSubscribeEvent.bind(this);
+    this.onUnsubscribeEvent = this.onUnsubscribeEvent.bind(this);
+    this.onPermissionDeniedEvent = this.onPermissionDeniedEvent.bind(this);
+    this.clickOutOfPopover = this.clickOutOfPopover.bind(this);
+
+    // Config
+    const tooltipText = Object.assign(SUBSCRIBE_WIDGET_DEFAULT_CONFIG.tooltipText, pw.initParams.subscribeWidget!.tooltipText);
+    this.config = Object.assign({}, SUBSCRIBE_WIDGET_DEFAULT_CONFIG, pw.initParams.subscribeWidget);
+    this.config.tooltipText = tooltipText;
+
+    // Render if not subscribed
+    pw.isSubscribed().then((isSubscribed) => {
+      if (!isSubscribed) {
+        this.render();
+      }
+    });
+  }
+
+  /**
+   * Apply styles to element
+   * @param styles
+   * @param {HTMLElement} element
+   */
+  private addStylesToElement(styles: TCSSStylesObject, element: HTMLElement) {
+    Object.keys(styles).forEach((st: TStyleKeys) => {
+      element.style[st] = styles[st];
+    });
+  }
+
+  /**
+   * Create container element
+   * @returns {HTMLElement}
+   */
+  private createContainer(): HTMLElement {
+    const container = document.createElement('div');
+    container.id = WIDGET_CONTAINER_ID;
+    container.className = 'pushwoosh-subscribe-widget';
+    const position = Positioning.getBellPosition(this.config.position, this.config.indent);
+    const styles = Object.assign({
+      zIndex: this.config.zIndex,
+    }, position);
+    this.addStylesToElement(styles, container);
+    return container;
+  }
+
+  /**
+   * Create styles element
+   * @returns {HTMLElement}
+   */
+  private createStyle(): HTMLElement {
+    const styleNode = document.createElement('style');
+    styleNode.innerHTML = mainCss;
+    return styleNode;
+  }
+
+  /**
+   * Create cell button element
+   * @returns {HTMLElement}
+   */
+  private createBell(): HTMLElement {
+    const { config } = this;
+    let bell;
+    if (config.buttonImage) {
+      bell = document.createElement('img') as HTMLImageElement;
+      bell.src = config.buttonImage;
+    } else {
+      bell = document.createElement('div');
+      this.addStylesToElement({
+        backgroundColor: config.bgColor,
+        boxShadow: config.shadow,
+        lineHeight: config.size,
+        border: config.bellButtonBorder,
+      }, bell);
+
+      bell.innerHTML = bellSVG(config.bellColor, config.bellStrokeColor);
+    }
+    this.addStylesToElement({
+      width: config.size,
+      height: config.size,
+    }, bell);
+    bell.className = 'pushwoosh-subscribe-widget__bell-button';
+    return bell;
+  }
+
+  /**
+   * Create tooltip element
+   * @returns {Promise<HTMLElement>}
+   */
+  private async createTooltip(): Promise<HTMLElement> {
+    const tooltip = document.createElement('div');
+    const [position, modification] = Positioning.getTooltipPosition(this.config.position, this.config.size);
+    tooltip.className = `pushwoosh-subscribe-widget__tooltip pushwoosh-subscribe-widget__tooltip__${modification}`;
+    this.addStylesToElement(position, tooltip);
+
+    tooltip.appendChild(await this.createTooltipContent());
+    return tooltip;
+  }
+
+  /**
+   * Create tooltip content element
+   * @returns {Promise<HTMLElement>}
+   */
+  private async createTooltipContent(): Promise<HTMLElement> {
+    const tooltipContent = document.createElement('div');
+    tooltipContent.innerText = await this.tooltipTextFactory();
+    tooltipContent.className = 'pushwoosh-subscribe-widget__tooltip-content';
+    return tooltipContent;
+  }
+
+  /**
+   * Tooltip text content depending of the permissions
+   * @returns {Promise<string>}
+   */
+  private async tooltipTextFactory(): Promise<string> {
+    const permission = this.pw.driver.getPermission();
+    const { tooltipText } = this.config;
+    const isManuallyUnsubscribed = await this.pw.data.getStatusManualUnsubscribed();
+
+    switch (permission) {
+      case PERMISSION_GRANTED:
+        return isManuallyUnsubscribed ? tooltipText.needSubscribe : tooltipText.alreadySubscribed;
+      case PERMISSION_PROMPT:
+        return tooltipText.needSubscribe;
+      case PERMISSION_DENIED:
+        return tooltipText.blockSubscribe;
+      default:
+        return tooltipText.needSubscribe;
+    }
+  }
+
+  /**
+   * Create permission denied popover element
+   * @returns {HTMLElement}
+   */
+  private createPopover(): HTMLElement {
+    const popoverContentWrapper = document.createElement('div');
+    const popover = document.createElement('div');
+    const [position, modification] = Positioning.getPopoverPosition(this.config.position, this.config.size);
+    popover.className = `pushwoosh-subscribe-widget__popover pushwoosh-subscribe-widget__popover__${modification}`;
+    popoverContentWrapper.className = 'pushwoosh-subscribe-widget__popover-content-wrapper';
+
+    this.style.innerHTML += Positioning.getPopoverArrowPosition(this.config.position, this.config.size);
+
+    const styles = Object.assign({
+      maxWidth: `calc(100vw - ${this.config.indent} - ${this.config.indent})`,
+    }, position);
+    this.addStylesToElement(styles, popover);
+
+    popoverContentWrapper.appendChild(this.createPopoverContent());
+    popover.appendChild(popoverContentWrapper);
+    return popover;
+  }
+
+  private getBrowserName() {
+    const platformChecker = this.pw.platformChecker;
+    let browser;
+    if (platformChecker.isOpera) {
+      browser = 'opera';
+    } else if (<TPlatformChrome>platformChecker.platform === 11 && navigator.userAgent.match(/Android/i)) {
+      browser = 'mobileChrome';
+    } else if (<TPlatformFirefox>platformChecker.platform === 12) {
+      browser = 'firefox';
+    } else if (<TPlatformSafari>platformChecker.platform === 10) {
+      browser = 'safari';
+    } else if (<TPlatformEdge>platformChecker.platform === 150) {
+      browser = 'edge';
+    } else {
+      browser = 'chrome';
+    }
+    return browser;
+  }
+
+  /**
+   * Create permission denied popover content element
+   * @returns {HTMLElement}
+   */
+  private createPopoverContent(): HTMLElement {
+    const { config } = this;
+    const popoverContent = document.createElement('div');
+    popoverContent.className = 'pushwoosh-subscribe-widget__popover-content';
+
+    const browser = this.getBrowserName();
+
+    const userImageSrc = config.contentImages && config.contentImages[browser];
+    if (userImageSrc) {
+      const image = document.createElement('img') as HTMLImageElement;
+      image.src = userImageSrc;
+      popoverContent.appendChild(image);
+    } else {
+      const standardImagesMap: Record<string, string> = {
+        opera: 'opera',
+        mobileChrome: 'mobile_chrome',
+        firefox: 'FF',
+        safari: 'safari',
+      };
+      const standardImage = standardImagesMap[browser] || 'chrome';
+      [{
+        src: this.getImageSrc(standardImage),
+        width: 500,
+        height: 130,
+      }, {
+        src: this.getImageSrc(`${standardImage}_unlock`),
+        width: 500,
+        height: 230,
+      }].forEach((imageAttrs) => {
+        const image = document.createElement('img');
+        Object.assign(image, imageAttrs);
+        popoverContent.appendChild(image);
+      });
+    }
+
+    return popoverContent;
+  }
+
+  /**
+   * Return source of help images depending of the browser
+   * @returns {string}
+   */
+  getImageSrc(img: string): string {
+    return `https://cdn.pushwoosh.com/webpush/img/${img}.jpg`;
+  }
+
+  private async render() {
+    this.widget = this.createContainer();
+    this.style = this.createStyle();
+    const bell = this.createBell();
+    this.tooltip = await this.createTooltip();
+    this.popover = await this.createPopover();
+
+    this.widget.appendChild(this.style);
+    this.widget.appendChild(bell);
+    this.widget.appendChild(this.tooltip);
+    this.widget.appendChild(this.popover);
+
+    document.body.appendChild(this.widget);
+
+    this.pw.push(['onSubscribe', this.onSubscribeEvent]);
+    this.pw.push(['onUnsubscribe', this.onUnsubscribeEvent]);
+    this.pw.push(['onPermissionDenied', this.onPermissionDeniedEvent]);
+
+    this.addEventListeners();
+  }
+
+  addEventListeners() {
+    this.widget.addEventListener('click', this.clickBell);
+    window.addEventListener('click', this.clickOutOfPopover);
+  }
+
+  /**
+   * Toggle visibility of popover
+   */
+  toggleHelpPopover() {
+    this.popover.classList.toggle('pushwoosh-subscribe-widget__popover__visible');
+  }
+
+  /**
+   * Click bell button event callback
+   * @returns {Promise<void>}
+   */
+  private async clickBell() {
+    const permission = this.pw.driver.getPermission();
+
+    switch (permission) {
+      case PERMISSION_GRANTED:
+        await this.pw.subscribe();
+
+        break;
+      case PERMISSION_PROMPT:
+        await this.pw.subscribe();
+
+        break;
+      case PERMISSION_DENIED:
+        this.toggleHelpPopover();
+
+        break;
+      default:
+        console.warn('Unknown browser notification permission');
+    }
+  }
+
+  /**
+   * On subscribe event callback
+   * @returns {Promise<void>}
+   */
+  private async onSubscribeEvent() {
+    const tooltipContent = this.tooltip.querySelector('div');
+
+    if (tooltipContent === null) {
+      return;
+    }
+
+    tooltipContent.innerText = this.config.tooltipText.successSubscribe;
+    this.tooltip.classList.add('pushwoosh-subscribe-widget__tooltip__visible');
+
+    setTimeout(async () => {
+      this.tooltip.classList.remove('pushwoosh-subscribe-widget__tooltip__visible');
+      tooltipContent.innerText = await this.tooltipTextFactory();
+
+      this.widget.classList.add('pushwoosh-subscribe-widget__subscribed');
+    }, 2000);
+  }
+
+  /**
+   * On permission denied event
+   * @returns {Promise<void>}
+   */
+  private async onPermissionDeniedEvent(): Promise<void> {
+    this.addEventListeners();
+
+    const tooltipContent = this.tooltip.querySelector('div');
+    if (tooltipContent === null) return;
+    tooltipContent.innerText = await this.tooltipTextFactory();
+  }
+
+  /**
+   * Out of popover click event
+   * @param {MessageEvent} ev
+   */
+  clickOutOfPopover(ev: MessageEvent) {
+    const closeRule = this.popover.classList.contains('pushwoosh-subscribe-widget__popover__visible')
+      && !(ev.target as any).classList.contains('pushwoosh-subscribe-widget__popover')
+      && (ev.target as any).closest('.pushwoosh-subscribe-widget__popover') === null
+      && !(ev.target as any).classList.contains('pushwoosh-subscribe-widget__bell-button')
+      && (ev.target as any).closest('.pushwoosh-subscribe-widget__bell-button') === null;
+
+    if (closeRule) this.popover.classList.remove('pushwoosh-subscribe-widget__popover__visible');
+  }
+
+  private async onUnsubscribeEvent() {
+    const tooltipContent = this.tooltip.querySelector('div');
+
+    if (tooltipContent === null) {
+      return;
+    }
+
+    tooltipContent.innerText = await this.tooltipTextFactory();
+  }
+}

package/src/widgets/SubscriptionButton/positioning.ts

@@ -0,0 +1,165 @@
+import {
+  BELL_POSITION_TOP_RIGHT,
+  BELL_POSITION_TOP_LEFT,
+  BELL_POSITION_BOTTOM_LEFT,
+  BELL_POSITION_BOTTOM_RIGHT,
+} from './constants';
+import { type TBellPosition, type TPositionStyles } from './subscribe_widget.types';
+
+export default class Positioning {
+  public static getBellPosition(position: TBellPosition, indent: string): TPositionStyles {
+    let positionStyles: TPositionStyles;
+
+    switch (position) {
+      case BELL_POSITION_BOTTOM_RIGHT:
+        positionStyles = {
+          top: 'auto',
+          left: 'auto',
+          bottom: indent,
+          right: indent,
+        };
+        break;
+      case BELL_POSITION_BOTTOM_LEFT:
+        positionStyles = {
+          top: 'auto',
+          left: indent,
+          bottom: indent,
+          right: 'auto',
+        };
+        break;
+      case BELL_POSITION_TOP_LEFT:
+        positionStyles = {
+          top: indent,
+          left: indent,
+          bottom: 'auto',
+          right: 'auto',
+        };
+        break;
+      case BELL_POSITION_TOP_RIGHT:
+        positionStyles = {
+          top: indent,
+          left: 'auto',
+          bottom: 'auto',
+          right: indent,
+        };
+        break;
+      default:
+        positionStyles = {
+          top: 'auto',
+          left: 'auto',
+          bottom: indent,
+          right: indent,
+        };
+    }
+
+    return positionStyles;
+  }
+
+  public static getTooltipPosition(bellPosition: TBellPosition, bellSize: string): [{ left: string } | { right: string }, string] {
+    let positionStyles;
+    let tooltipModification;
+    const increaseIndent = (parseInt(bellSize) + 12) + 'px';
+
+    switch (bellPosition) {
+      case BELL_POSITION_BOTTOM_RIGHT:
+        positionStyles = { right: increaseIndent };
+        tooltipModification = 'right';
+        break;
+      case BELL_POSITION_BOTTOM_LEFT:
+        positionStyles = { left: increaseIndent };
+        tooltipModification = 'left';
+        break;
+      case BELL_POSITION_TOP_LEFT:
+        positionStyles = { left: increaseIndent };
+        tooltipModification = 'left';
+        break;
+      case BELL_POSITION_TOP_RIGHT:
+        positionStyles = { right: increaseIndent };
+        tooltipModification = 'right';
+        break;
+      default:
+        positionStyles = { right: increaseIndent };
+        tooltipModification = 'right';
+    }
+
+    return [positionStyles, tooltipModification];
+  }
+
+  public static getPopoverPosition(bellPosition: TBellPosition, bellSize: string): [TPositionStyles, string] {
+    let positionStyles;
+    let popoverModification;
+    const increaseIndent = (parseInt(bellSize) + 15) + 'px';
+
+    switch (bellPosition) {
+      case BELL_POSITION_BOTTOM_RIGHT:
+        positionStyles = {
+          bottom: increaseIndent,
+          right: '0',
+          left: 'auto',
+          top: 'auto',
+        };
+        popoverModification = 'bottom';
+        break;
+      case BELL_POSITION_BOTTOM_LEFT:
+        positionStyles = {
+          bottom: increaseIndent,
+          left: '0',
+          right: 'auto',
+          top: 'auto',
+        };
+        popoverModification = 'bottom';
+        break;
+      case BELL_POSITION_TOP_LEFT:
+        positionStyles = {
+          top: increaseIndent,
+          left: '0',
+          right: 'auto',
+          bottom: 'auto',
+        };
+        popoverModification = 'top';
+        break;
+      case BELL_POSITION_TOP_RIGHT:
+        positionStyles = {
+          top: increaseIndent,
+          right: '0',
+          left: 'auto',
+          bottom: 'auto',
+        };
+        popoverModification = 'top';
+        break;
+      default:
+        positionStyles = {
+          bottom: increaseIndent,
+          right: '0',
+          left: 'auto',
+          top: 'auto',
+        };
+        popoverModification = 'bottom';
+    }
+
+    return [positionStyles, popoverModification];
+  }
+
+  public static getPopoverArrowPosition(bellPosition: TBellPosition, bellSize: string) {
+    let arrowAdditionalStyles;
+
+    switch (bellPosition) {
+      case BELL_POSITION_BOTTOM_RIGHT:
+        arrowAdditionalStyles = `\n.pushwoosh-subscribe-widget__popover__bottom:after {left: auto; right: ${(parseInt(bellSize) / 2 - 4) + 'px'}`;
+        break;
+      case BELL_POSITION_BOTTOM_LEFT:
+        arrowAdditionalStyles = `\n.pushwoosh-subscribe-widget__popover__bottom:after {right: auto; left: ${(parseInt(bellSize) / 2 - 12) + 'px'}`;
+        break;
+      case BELL_POSITION_TOP_LEFT:
+        arrowAdditionalStyles = `\n.pushwoosh-subscribe-widget__popover__top:after {right: auto; left: ${(parseInt(bellSize) / 2 - 12) + 'px'}`;
+        break;
+      case BELL_POSITION_TOP_RIGHT:
+        arrowAdditionalStyles = `\n.pushwoosh-subscribe-widget__popover__top:after {left: auto; right: ${(parseInt(bellSize) / 2 - 4) + 'px'}`;
+        break;
+      default:
+        arrowAdditionalStyles = `\n.pushwoosh-subscribe-widget__popover__bottom:after {left: auto; right: ${(parseInt(bellSize) / 2 - 4) + 'px'}`;
+    }
+
+    return arrowAdditionalStyles;
+  }
+}

package/src/widgets/SubscriptionButton/subscribe_widget.types.ts

@@ -0,0 +1,53 @@
+export type TBellPosition = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+
+export type TTooltipText = {
+  successSubscribe: string;
+  needSubscribe: string;
+  blockSubscribe: string;
+  alreadySubscribed: string;
+};
+export type TBellConfig = {
+  position: TBellPosition;
+  bgColor: string;
+  bellColor: string;
+  bellStrokeColor: string;
+  bellButtonBorder: string;
+  shadow: string;
+  size: string;
+  indent: string; // edge indent
+  zIndex: string;
+  tooltipText: TTooltipText;
+  buttonImage?: string;
+  contentImages?: Record<string, string>;
+};
+
+export type TPositionStyles = {
+  top: string;
+  bottom: string;
+  left: string;
+  right: string;
+};
+
+export type TEvent = {
+  event_id: number | string;
+  application: string;
+};
+
+export type TStyleKeys = 'left'
+  | 'right'
+  | 'top'
+  | 'bottom'
+  | 'zIndex'
+  | 'position'
+  | 'backgroundColor'
+  | 'background'
+  | 'width'
+  | 'height'
+  | 'boxShadow'
+  | 'lineHeight'
+  | 'border'
+  | 'maxWidth'
+  | 'maxHeight';
+export type TCSSStylesObject = {
+  [style: string]: string;
+};

package/src/widgets/SubscriptionPrompt/SubscriptionPromptWidget.constants.ts

@@ -0,0 +1 @@
+export const SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE = 'pushwoosh-subscription-widget';

package/src/widgets/SubscriptionPrompt/SubscriptionPromptWidget.helpers.ts

@@ -0,0 +1,110 @@
+import { SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE } from './SubscriptionPromptWidget.constants';
+import { type ISubscriptionPromptWidgetParams } from './SubscriptionPromptWidget.types';
+
+export const getHTML = (params: ISubscriptionPromptWidgetParams): string => {
+  return `
+  <div id="${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}-root" class="${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}">
+    <div class="${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__body">
+      <div class="${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__header">
+        ${params.headerText}
+      </div>
+      <div class="${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__description">
+        ${params.subheaderText}
+      </div>
+      <div class="${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__controls">
+        <button type="button" id="${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}-decline" class="${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__control ${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__control_decline">
+          ${params.buttonCancelText}
+        </button>
+        <button type="button" id="${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}-accept" class="${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__control ${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__control_accept">
+          ${params.buttonAcceptText}
+        </button>
+      </div>
+    </div>
+  </div>
+  `;
+};
+
+export const getStyles = (params: ISubscriptionPromptWidgetParams) => {
+  const styles = document.createElement('style');
+
+  styles.innerHTML = `
+    .${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE} * {
+      box-sizing: border-box!important;
+    }
+  
+    .${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE} {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      width: 320px;
+      display: none;
+      z-index: 2147483648;
+      opacity: 0.99;
+    }
+    
+    .${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}_show {
+      display: block;
+    }
+    
+    .${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__body {
+      width: 320px;
+      background-color: ${params.backgroundColor ? params.backgroundColor : '#FFFFFF'};
+      box-shadow: 0 9px 15px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.06);
+      border-radius: 4px;
+      padding: 20px 20px 12px;
+    }
+    
+    .${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__header {
+      color: ${params.headerTextColor};
+      font-size: 18px;
+      font-weight: bold; 
+    }
+    
+    .${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__description {
+      color: ${params.subheaderTextColor};
+      font-size: 14px;
+      line-height: 1.5;
+      margin-top: 14px;
+    }
+    
+    .${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__description:empty {
+      display: none;
+    }
+    
+    .${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__controls {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: flex-end;
+      margin: 20px 0 0;
+    }
+    
+    .${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__control {
+      -webkit-appearance: none;
+      border: 1px solid transparent;
+      font-size: 12px;
+      font-weight: bold;
+      padding: 0 20px;
+      height: 32px;
+      cursor: pointer;
+    }
+    
+    .${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__control_decline {
+      color: ${params.buttonCancelTextColor};
+      background-color: ${params.buttonCancelBackgroundColor};
+      border-radius: ${params.buttonCancelRound};
+      border-color: ${params.buttonCancelBorderColor};
+    }
+    
+    .${SUBSCRIPTION_PROMPT_WIDGET_NAMESPACE}__control_accept {
+      color: ${params.buttonAcceptTextColor};
+      background-color: ${params.buttonAcceptBackgroundColor};
+      border-radius: ${params.buttonAcceptRound};
+      border-color: ${params.buttonAcceptBorderColor};
+      margin: 0 0 0 12px;
+    }
+  `;
+
+  return styles;
+};