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

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapEmojiPicker from '@capillarytech/cap-ui-library/CapEmojiPicker';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import { MESSAGE_MAX_LENGTH, SHOW_CHARACTER_COUNT } from '../../constants';
+
+/**
+ * MessageSection component - Message textarea with tags, emoji picker, and character count
+ */
+export const MessageSection = ({
+  value,
+  error,
+  onChange,
+  formatMessage,
+  messages,
+  tagList,
+  messageCountRef,
+  messageTextAreaRef,
+  handleMessageTextAreaRef,
+}) => {
+  const renderCharacterCount = () => {
+    if (!SHOW_CHARACTER_COUNT) return null;
+
+    const maxLength = MESSAGE_MAX_LENGTH;
+
+    return (
+      <CapLabel type="label2" className="webpush-character-count">
+        <span ref={messageCountRef}>
+          {formatMessage(messages.characterCount, {
+            currentLength: value.length,
+            maxLength,
+          })}
+        </span>
+      </CapLabel>
+    );
+  };
+
+  return (
+    <>
+      <CapRow className="creatives-webpush-message">
+        <CapRow className="tooltip-add-label-container webpush-message-taglist">
+          {tagList}
+        </CapRow>
+        <CapHeading type="h4" className="webpush-message">
+          <FormattedMessage {...messages.message} />
+        </CapHeading>
+        <CapEmojiPicker.Wrapper
+          value={value}
+          onChange={onChange}
+          textAreaRef={messageTextAreaRef}
+        >
+          <CapInput.TextArea
+            id="webpush-message-input"
+            value={value}
+            onChange={onChange}
+            placeholder={formatMessage(messages.messagePlaceholder)}
+            size="default"
+            isRequired
+            autosize={{ minRows: 3, maxRows: 5 }}
+            setInputRef={handleMessageTextAreaRef}
+            errorMessage={
+              error && (
+                <CapError className="webpush-template-message-error">
+                  {error}
+                </CapError>
+              )
+            }
+          />
+        </CapEmojiPicker.Wrapper>
+        {renderCharacterCount()}
+      </CapRow>
+      <CapDivider className="webpush-message-divider" />
+    </>
+  );
+};
+
+MessageSection.propTypes = {
+  value: PropTypes.string.isRequired,
+  error: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  formatMessage: PropTypes.func.isRequired,
+  messages: PropTypes.object.isRequired,
+  tagList: PropTypes.node,
+  messageCountRef: PropTypes.object,
+  messageTextAreaRef: PropTypes.object,
+  handleMessageTextAreaRef: PropTypes.func.isRequired,
+};
+
+MessageSection.defaultProps = {
+  error: '',
+  tagList: null,
+  messageCountRef: null,
+  messageTextAreaRef: null,
+};
+
+export default MessageSection;
+

package/v2Containers/WebPush/Create/components/MessageSection.test.js

@@ -0,0 +1,268 @@
+import React from 'react';
+import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
+import MessageSection from './MessageSection';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapEmojiPicker from '@capillarytech/cap-ui-library/CapEmojiPicker';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import { MESSAGE_MAX_LENGTH, SHOW_CHARACTER_COUNT } from '../../constants';
+
+describe('MessageSection', () => {
+  const mockFormatMessage = jest.fn((message, values) => {
+    if (values) {
+      return `${values.currentLength}/${values.maxLength}`;
+    }
+    return message?.defaultMessage || message?.id || message;
+  });
+  const mockOnChange = jest.fn();
+  const mockHandleMessageTextAreaRef = jest.fn();
+
+  const mockMessages = {
+    message: {
+      id: 'app.webpush.message',
+      defaultMessage: 'Message',
+    },
+    messagePlaceholder: {
+      id: 'app.webpush.messagePlaceholder',
+      defaultMessage: 'Enter message',
+    },
+    characterCount: {
+      id: 'app.webpush.characterCount',
+      defaultMessage: '{currentLength}/{maxLength}',
+    },
+  };
+
+  const defaultProps = {
+    value: 'Test Message',
+    error: '',
+    onChange: mockOnChange,
+    formatMessage: mockFormatMessage,
+    messages: mockMessages,
+    tagList: null,
+    messageCountRef: null,
+    messageTextAreaRef: null,
+    handleMessageTextAreaRef: mockHandleMessageTextAreaRef,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render correctly with default props', () => {
+      const wrapper = shallowWithIntl(<MessageSection {...defaultProps} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render main container with correct class', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const container = wrapper.find('.creatives-webpush-message');
+      expect(container.exists()).toBe(true);
+    });
+
+    it('should render heading', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const heading = wrapper.find(CapHeading).find('.webpush-message');
+      expect(heading.exists()).toBe(true);
+    });
+
+    it('should render CapEmojiPicker.Wrapper', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const emojiPicker = wrapper.find(CapEmojiPicker.Wrapper);
+      expect(emojiPicker.exists()).toBe(true);
+      expect(emojiPicker.prop('value')).toBe('Test Message');
+    });
+
+    it('should render CapInput.TextArea with correct props', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const textArea = wrapper.find(CapInput.TextArea);
+      expect(textArea.exists()).toBe(true);
+      expect(textArea.prop('id')).toBe('webpush-message-input');
+      expect(textArea.prop('value')).toBe('Test Message');
+      expect(textArea.prop('size')).toBe('default');
+      expect(textArea.prop('isRequired')).toBe(true);
+      expect(textArea.prop('autosize')).toEqual({ minRows: 3, maxRows: 5 });
+    });
+
+    it('should render placeholder correctly', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const textArea = wrapper.find(CapInput.TextArea);
+      expect(textArea.exists()).toBe(true);
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.messagePlaceholder);
+    });
+
+    it('should render Divider', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const divider = wrapper.find(CapDivider).find('.webpush-message-divider');
+      expect(divider.exists()).toBe(true);
+    });
+  });
+
+  describe('Tag List', () => {
+    it('should render tagList when provided', () => {
+      const tagList = <div className="test-tag-list">Tag List</div>;
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} tagList={tagList} />
+      );
+      const tagListContainer = wrapper.find('.webpush-message-taglist');
+      expect(tagListContainer.exists()).toBe(true);
+      expect(tagListContainer.contains(tagList)).toBe(true);
+    });
+
+    it('should render empty tagList container when tagList prop is not provided', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const tagListContainer = wrapper.find('.webpush-message-taglist');
+      expect(tagListContainer.exists()).toBe(true);
+      // Check that no tagList content is rendered (CapRow itself may have internal structure)
+      expect(tagListContainer.find('.test-tag-list').exists()).toBe(false);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should not render error when error is empty', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} error="" />);
+      const error = wrapper.find(CapError);
+      expect(error.exists()).toBe(false);
+    });
+
+    it('should render error when error is provided', () => {
+      const errorMessage = 'Message is required';
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} error={errorMessage} />
+      );
+      const error = wrapper.find(CapError).find('.webpush-template-message-error');
+      expect(error.exists()).toBe(true);
+    });
+
+    it('should pass error to CapInput.TextArea', () => {
+      const errorMessage = 'Message is required';
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} error={errorMessage} />
+      );
+      const textArea = wrapper.find(CapInput.TextArea);
+      expect(textArea.prop('errorMessage')).toBeDefined();
+    });
+  });
+
+  describe('Character Count', () => {
+    it('should render character count when SHOW_CHARACTER_COUNT is true', () => {
+      const messageCountRef = React.createRef();
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} messageCountRef={messageCountRef} />
+      );
+      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
+      expect(characterCount.exists()).toBe(true);
+    });
+
+    it('should display correct character count', () => {
+      const messageCountRef = React.createRef();
+      const wrapper = mountWithIntl(
+        <MessageSection
+          {...defaultProps}
+          value="Test Message"
+          messageCountRef={messageCountRef}
+        />
+      );
+      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
+      expect(characterCount.exists()).toBe(true);
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.characterCount, {
+        currentLength: 12,
+        maxLength: MESSAGE_MAX_LENGTH,
+      });
+    });
+
+    it('should render character count span with ref', () => {
+      const messageCountRef = React.createRef();
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} messageCountRef={messageCountRef} />
+      );
+      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
+      expect(characterCount.exists()).toBe(true);
+    });
+  });
+
+  describe('TextArea Ref Handling', () => {
+    it('should call handleMessageTextAreaRef with setInputRef', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const textArea = wrapper.find(CapInput.TextArea);
+      expect(textArea.prop('setInputRef')).toBe(mockHandleMessageTextAreaRef);
+    });
+
+    it('should pass messageTextAreaRef to CapEmojiPicker.Wrapper', () => {
+      const messageTextAreaRef = React.createRef();
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} messageTextAreaRef={messageTextAreaRef} />
+      );
+      const emojiPicker = wrapper.find(CapEmojiPicker.Wrapper);
+      expect(emojiPicker.prop('textAreaRef')).toBe(messageTextAreaRef);
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('should call onChange when textarea value changes', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const textArea = wrapper.find(CapInput.TextArea);
+      const event = { target: { value: 'New Message' } };
+      textArea.prop('onChange')(event);
+      expect(mockOnChange).toHaveBeenCalledWith(event);
+    });
+
+    it('should call onChange from CapEmojiPicker.Wrapper', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const emojiPicker = wrapper.find(CapEmojiPicker.Wrapper);
+      emojiPicker.prop('onChange')('New Message');
+      expect(mockOnChange).toHaveBeenCalledWith('New Message');
+    });
+  });
+
+  describe('Default Props', () => {
+    it('should use default error when not provided', () => {
+      const wrapper = mountWithIntl(
+        <MessageSection
+          value="Test"
+          onChange={mockOnChange}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+          handleMessageTextAreaRef={mockHandleMessageTextAreaRef}
+        />
+      );
+      const error = wrapper.find(CapError);
+      expect(error.exists()).toBe(false);
+    });
+
+    it('should use default tagList when not provided', () => {
+      const wrapper = mountWithIntl(
+        <MessageSection
+          value="Test"
+          onChange={mockOnChange}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+          handleMessageTextAreaRef={mockHandleMessageTextAreaRef}
+        />
+      );
+      const tagListContainer = wrapper.find('.webpush-message-taglist');
+      expect(tagListContainer.exists()).toBe(true);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty value', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} value="" />);
+      const textArea = wrapper.find(CapInput.TextArea);
+      expect(textArea.prop('value')).toBe('');
+    });
+
+    it('should handle long value', () => {
+      const longValue = 'A'.repeat(100);
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} value={longValue} />
+      );
+      const textArea = wrapper.find(CapInput.TextArea);
+      expect(textArea.prop('value')).toBe(longValue);
+    });
+  });
+});
+

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import {
+  NOTIFICATION_TITLE_MAX_LENGTH,
+  SHOW_CHARACTER_COUNT,
+} from '../../constants';
+
+/**
+ * NotificationTitleSection component - Notification title input with tags and character count
+ */
+export const NotificationTitleSection = ({
+  value,
+  error,
+  onChange,
+  formatMessage,
+  messages,
+  tagList,
+  titleCountRef,
+}) => {
+  const renderCharacterCount = () => {
+    if (!SHOW_CHARACTER_COUNT) return null;
+
+    const maxLength = NOTIFICATION_TITLE_MAX_LENGTH;
+
+    return (
+      <CapLabel type="label2" className="webpush-character-count">
+        <span ref={titleCountRef}>
+          {formatMessage(messages.characterCount, {
+            currentLength: value.length,
+            maxLength,
+          })}
+        </span>
+      </CapLabel>
+    );
+  };
+
+  return (
+    <CapRow className="creatives-webpush-title">
+      <CapRow className="tooltip-add-label-container webpush-title-taglist">
+        {tagList}
+      </CapRow>
+      <CapHeading type="h4" className="webpush-title">
+        <FormattedMessage {...messages.notificationTitle} />
+      </CapHeading>
+      <CapInput
+        id="webpush-notification-title-input"
+        value={value}
+        onChange={onChange}
+        placeholder={formatMessage(messages.notificationTitlePlaceholder)}
+        size="default"
+        isRequired
+        maxLength={NOTIFICATION_TITLE_MAX_LENGTH}
+        errorMessage={
+          error && (
+            <CapError className="webpush-template-title-error">{error}</CapError>
+          )
+        }
+      />
+      {renderCharacterCount()}
+    </CapRow>
+  );
+};
+
+NotificationTitleSection.propTypes = {
+  value: PropTypes.string.isRequired,
+  error: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  formatMessage: PropTypes.func.isRequired,
+  messages: PropTypes.object.isRequired,
+  tagList: PropTypes.node,
+  titleCountRef: PropTypes.object,
+};
+
+NotificationTitleSection.defaultProps = {
+  error: '',
+  tagList: null,
+  titleCountRef: null,
+};
+
+export default NotificationTitleSection;
+

package/v2Containers/WebPush/Create/components/NotificationTitleSection.test.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
+import NotificationTitleSection from './NotificationTitleSection';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import { NOTIFICATION_TITLE_MAX_LENGTH, SHOW_CHARACTER_COUNT } from '../../constants';
+
+describe('NotificationTitleSection', () => {
+  const mockFormatMessage = jest.fn((message, values) => {
+    if (values) {
+      return `${values.currentLength}/${values.maxLength}`;
+    }
+    return message?.defaultMessage || message?.id || message;
+  });
+  const mockOnChange = jest.fn();
+
+  const mockMessages = {
+    notificationTitle: {
+      id: 'app.webpush.notificationTitle',
+      defaultMessage: 'Notification Title',
+    },
+    notificationTitlePlaceholder: {
+      id: 'app.webpush.notificationTitlePlaceholder',
+      defaultMessage: 'Enter notification title',
+    },
+    characterCount: {
+      id: 'app.webpush.characterCount',
+      defaultMessage: '{currentLength}/{maxLength}',
+    },
+  };
+
+  const defaultProps = {
+    value: 'Test Title',
+    error: '',
+    onChange: mockOnChange,
+    formatMessage: mockFormatMessage,
+    messages: mockMessages,
+    tagList: null,
+    titleCountRef: null,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render correctly with default props', () => {
+      const wrapper = shallowWithIntl(<NotificationTitleSection {...defaultProps} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render main container with correct class', () => {
+      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
+      const container = wrapper.find('.creatives-webpush-title');
+      expect(container.exists()).toBe(true);
+    });
+
+    it('should render heading', () => {
+      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
+      const heading = wrapper.find(CapHeading).find('.webpush-title');
+      expect(heading.exists()).toBe(true);
+    });
+
+    it('should render CapInput', () => {
+      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
+      const input = wrapper.find(CapInput);
+      expect(input.exists()).toBe(true);
+    });
+
+    it('should render placeholder correctly', () => {
+      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
+      const input = wrapper.find(CapInput);
+      expect(input.exists()).toBe(true);
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.notificationTitlePlaceholder);
+    });
+  });
+
+  describe('Tag List', () => {
+    it('should render tagList when provided', () => {
+      const tagList = <div className="test-tag-list">Tag List</div>;
+      const wrapper = mountWithIntl(
+        <NotificationTitleSection {...defaultProps} tagList={tagList} />
+      );
+      const tagListContainer = wrapper.find('.webpush-title-taglist');
+      expect(tagListContainer.exists()).toBe(true);
+    });
+
+    it('should render empty tagList container when not provided', () => {
+      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
+      const tagListContainer = wrapper.find('.webpush-title-taglist');
+      expect(tagListContainer.exists()).toBe(true);
+      // Check that no tagList content is rendered (CapRow itself may have internal structure)
+      expect(tagListContainer.find('.test-tag-list').exists()).toBe(false);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should not render error when error is empty', () => {
+      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} error="" />);
+      const error = wrapper.find(CapError);
+      expect(error.exists()).toBe(false);
+    });
+
+    it('should render error when error is provided', () => {
+      const errorMessage = 'Title is required';
+      const wrapper = mountWithIntl(
+        <NotificationTitleSection {...defaultProps} error={errorMessage} />
+      );
+      const error = wrapper.find(CapError).find('.webpush-template-title-error');
+      expect(error.exists()).toBe(true);
+    });
+  });
+
+  describe('Character Count', () => {
+    it('should render character count when SHOW_CHARACTER_COUNT is true', () => {
+      const titleCountRef = React.createRef();
+      const wrapper = mountWithIntl(
+        <NotificationTitleSection {...defaultProps} titleCountRef={titleCountRef} />
+      );
+      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
+      expect(characterCount.exists()).toBe(true);
+    });
+
+    it('should display correct character count', () => {
+      const titleCountRef = React.createRef();
+      const wrapper = mountWithIntl(
+        <NotificationTitleSection
+          {...defaultProps}
+          value="Test"
+          titleCountRef={titleCountRef}
+        />
+      );
+      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
+      expect(characterCount.exists()).toBe(true);
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('should call onChange when input value changes', () => {
+      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
+      const input = wrapper.find(CapInput);
+      expect(input.exists()).toBe(true);
+      // CapInput onChange is tested through integration
+    });
+  });
+
+  describe('Default Props', () => {
+    it('should use default error when not provided', () => {
+      const wrapper = mountWithIntl(
+        <NotificationTitleSection
+          value="Test"
+          onChange={mockOnChange}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const error = wrapper.find(CapError);
+      expect(error.exists()).toBe(false);
+    });
+
+    it('should use default tagList when not provided', () => {
+      const wrapper = mountWithIntl(
+        <NotificationTitleSection
+          value="Test"
+          onChange={mockOnChange}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const tagListContainer = wrapper.find('.webpush-title-taglist');
+      expect(tagListContainer.exists()).toBe(true);
+    });
+
+    it('should use default titleCountRef when not provided', () => {
+      const wrapper = mountWithIntl(
+        <NotificationTitleSection
+          value="Test"
+          onChange={mockOnChange}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
+      expect(characterCount.exists()).toBe(true);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty value', () => {
+      const wrapper = mountWithIntl(
+        <NotificationTitleSection {...defaultProps} value="" />
+      );
+      const input = wrapper.find(CapInput);
+      expect(input.prop('value')).toBe('');
+    });
+
+    it('should handle long value up to maxLength', () => {
+      const longValue = 'A'.repeat(NOTIFICATION_TITLE_MAX_LENGTH);
+      const wrapper = mountWithIntl(
+        <NotificationTitleSection {...defaultProps} value={longValue} />
+      );
+      const input = wrapper.find(CapInput);
+      expect(input.exists()).toBe(true);
+    });
+  });
+});
+