@capillarytech/creatives-library 8.0.264 → 8.0.265

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (158) hide show
  1. package/constants/unified.js +0 -1
  2. package/package.json +1 -1
  3. package/services/api.js +0 -5
  4. package/utils/common.js +0 -6
  5. package/utils/tagValidations.js +1 -2
  6. package/utils/tests/transformerUtils.test.js +0 -297
  7. package/utils/transformerUtils.js +0 -40
  8. package/v2Components/CapImageUpload/constants.js +0 -2
  9. package/v2Components/CapImageUpload/index.js +16 -65
  10. package/v2Components/CapImageUpload/index.scss +1 -4
  11. package/v2Components/CapImageUpload/messages.js +1 -5
  12. package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +2 -2
  13. package/v2Components/FormBuilder/index.js +8 -8
  14. package/v2Containers/App/constants.js +0 -5
  15. package/v2Containers/CreativesContainer/SlideBoxContent.js +2 -57
  16. package/v2Containers/CreativesContainer/SlideBoxHeader.js +0 -1
  17. package/v2Containers/CreativesContainer/constants.js +0 -3
  18. package/v2Containers/CreativesContainer/index.js +0 -168
  19. package/v2Containers/CreativesContainer/messages.js +0 -4
  20. package/v2Containers/CreativesContainer/tests/SlideBoxContent.test.js +0 -210
  21. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +0 -304
  22. package/v2Containers/Email/index.js +7 -3
  23. package/v2Containers/FTP/index.js +1 -1
  24. package/v2Containers/InApp/index.js +0 -1
  25. package/v2Containers/Line/Container/Text/index.js +0 -1
  26. package/v2Containers/MobilePushNew/index.js +0 -1
  27. package/v2Containers/Rcs/index.js +0 -3
  28. package/v2Containers/SmsTrai/Edit/index.js +0 -1
  29. package/v2Containers/Templates/ChannelTypeIllustration.js +1 -13
  30. package/v2Containers/Templates/_templates.scss +0 -205
  31. package/v2Containers/Templates/actions.js +1 -2
  32. package/v2Containers/Templates/constants.js +0 -1
  33. package/v2Containers/Templates/index.js +34 -274
  34. package/v2Containers/Templates/messages.js +0 -24
  35. package/v2Containers/Templates/reducer.js +0 -2
  36. package/v2Containers/Templates/tests/index.test.js +0 -10
  37. package/v2Containers/TemplatesV2/index.js +7 -15
  38. package/v2Containers/TemplatesV2/messages.js +0 -4
  39. package/v2Containers/Viber/index.js +0 -1
  40. package/v2Containers/Whatsapp/index.js +0 -1
  41. package/v2Containers/Zalo/index.js +0 -1
  42. package/v2Containers/Zalo/tests/index.test.js +5 -1
  43. package/utils/imageUrlUpload.js +0 -141
  44. package/v2Components/CapImageUrlUpload/constants.js +0 -26
  45. package/v2Components/CapImageUrlUpload/index.js +0 -365
  46. package/v2Components/CapImageUrlUpload/index.scss +0 -35
  47. package/v2Components/CapImageUrlUpload/messages.js +0 -47
  48. package/v2Containers/WebPush/Create/components/BrandIconSection.js +0 -108
  49. package/v2Containers/WebPush/Create/components/ButtonForm.js +0 -172
  50. package/v2Containers/WebPush/Create/components/ButtonItem.js +0 -101
  51. package/v2Containers/WebPush/Create/components/ButtonList.js +0 -145
  52. package/v2Containers/WebPush/Create/components/ButtonsLinksSection.js +0 -164
  53. package/v2Containers/WebPush/Create/components/ButtonsLinksSection.test.js +0 -463
  54. package/v2Containers/WebPush/Create/components/FormActions.js +0 -54
  55. package/v2Containers/WebPush/Create/components/FormActions.test.js +0 -163
  56. package/v2Containers/WebPush/Create/components/MediaSection.js +0 -142
  57. package/v2Containers/WebPush/Create/components/MediaSection.test.js +0 -341
  58. package/v2Containers/WebPush/Create/components/MessageSection.js +0 -103
  59. package/v2Containers/WebPush/Create/components/MessageSection.test.js +0 -268
  60. package/v2Containers/WebPush/Create/components/NotificationTitleSection.js +0 -87
  61. package/v2Containers/WebPush/Create/components/NotificationTitleSection.test.js +0 -210
  62. package/v2Containers/WebPush/Create/components/TemplateNameSection.js +0 -54
  63. package/v2Containers/WebPush/Create/components/TemplateNameSection.test.js +0 -143
  64. package/v2Containers/WebPush/Create/components/__snapshots__/ButtonsLinksSection.test.js.snap +0 -86
  65. package/v2Containers/WebPush/Create/components/__snapshots__/FormActions.test.js.snap +0 -16
  66. package/v2Containers/WebPush/Create/components/__snapshots__/MediaSection.test.js.snap +0 -41
  67. package/v2Containers/WebPush/Create/components/__snapshots__/MessageSection.test.js.snap +0 -54
  68. package/v2Containers/WebPush/Create/components/__snapshots__/NotificationTitleSection.test.js.snap +0 -37
  69. package/v2Containers/WebPush/Create/components/__snapshots__/TemplateNameSection.test.js.snap +0 -21
  70. package/v2Containers/WebPush/Create/components/_buttons.scss +0 -246
  71. package/v2Containers/WebPush/Create/components/tests/ButtonForm.test.js +0 -554
  72. package/v2Containers/WebPush/Create/components/tests/ButtonItem.test.js +0 -607
  73. package/v2Containers/WebPush/Create/components/tests/ButtonList.test.js +0 -633
  74. package/v2Containers/WebPush/Create/components/tests/__snapshots__/ButtonForm.test.js.snap +0 -666
  75. package/v2Containers/WebPush/Create/components/tests/__snapshots__/ButtonItem.test.js.snap +0 -74
  76. package/v2Containers/WebPush/Create/components/tests/__snapshots__/ButtonList.test.js.snap +0 -78
  77. package/v2Containers/WebPush/Create/hooks/useButtonManagement.js +0 -138
  78. package/v2Containers/WebPush/Create/hooks/useButtonManagement.test.js +0 -406
  79. package/v2Containers/WebPush/Create/hooks/useCharacterCount.js +0 -30
  80. package/v2Containers/WebPush/Create/hooks/useCharacterCount.test.js +0 -151
  81. package/v2Containers/WebPush/Create/hooks/useImageUpload.js +0 -104
  82. package/v2Containers/WebPush/Create/hooks/useImageUpload.test.js +0 -538
  83. package/v2Containers/WebPush/Create/hooks/useTagManagement.js +0 -122
  84. package/v2Containers/WebPush/Create/hooks/useTagManagement.test.js +0 -633
  85. package/v2Containers/WebPush/Create/index.js +0 -1148
  86. package/v2Containers/WebPush/Create/index.scss +0 -134
  87. package/v2Containers/WebPush/Create/messages.js +0 -211
  88. package/v2Containers/WebPush/Create/preview/DevicePreviewContent.js +0 -228
  89. package/v2Containers/WebPush/Create/preview/NotificationContainer.js +0 -294
  90. package/v2Containers/WebPush/Create/preview/PreviewContent.js +0 -90
  91. package/v2Containers/WebPush/Create/preview/PreviewControls.js +0 -305
  92. package/v2Containers/WebPush/Create/preview/PreviewDisclaimer.js +0 -25
  93. package/v2Containers/WebPush/Create/preview/WebPushPreview.js +0 -155
  94. package/v2Containers/WebPush/Create/preview/assets/Light.svg +0 -53
  95. package/v2Containers/WebPush/Create/preview/assets/Top.svg +0 -5
  96. package/v2Containers/WebPush/Create/preview/assets/android-arrow-down.svg +0 -9
  97. package/v2Containers/WebPush/Create/preview/assets/android-arrow-up.svg +0 -9
  98. package/v2Containers/WebPush/Create/preview/assets/chrome-icon.png +0 -0
  99. package/v2Containers/WebPush/Create/preview/assets/edge-icon.png +0 -0
  100. package/v2Containers/WebPush/Create/preview/assets/firefox-icon.svg +0 -106
  101. package/v2Containers/WebPush/Create/preview/assets/iOS.svg +0 -26
  102. package/v2Containers/WebPush/Create/preview/assets/macos-arrow-down-icon.svg +0 -9
  103. package/v2Containers/WebPush/Create/preview/assets/macos-triple-dot-icon.svg +0 -9
  104. package/v2Containers/WebPush/Create/preview/assets/opera-icon.svg +0 -18
  105. package/v2Containers/WebPush/Create/preview/assets/safari-icon.svg +0 -29
  106. package/v2Containers/WebPush/Create/preview/assets/windows-close-icon.svg +0 -9
  107. package/v2Containers/WebPush/Create/preview/assets/windows-triple-dot-icon.svg +0 -9
  108. package/v2Containers/WebPush/Create/preview/components/AndroidMobileChromeHeader.js +0 -51
  109. package/v2Containers/WebPush/Create/preview/components/AndroidMobileExpanded.js +0 -145
  110. package/v2Containers/WebPush/Create/preview/components/IOSHeader.js +0 -45
  111. package/v2Containers/WebPush/Create/preview/components/NotificationExpandedContent.js +0 -68
  112. package/v2Containers/WebPush/Create/preview/components/NotificationHeader.js +0 -61
  113. package/v2Containers/WebPush/Create/preview/components/WindowsChromeExpanded.js +0 -99
  114. package/v2Containers/WebPush/Create/preview/components/tests/AndroidMobileExpanded.test.js +0 -733
  115. package/v2Containers/WebPush/Create/preview/components/tests/WindowsChromeExpanded.test.js +0 -571
  116. package/v2Containers/WebPush/Create/preview/components/tests/__snapshots__/AndroidMobileExpanded.test.js.snap +0 -85
  117. package/v2Containers/WebPush/Create/preview/components/tests/__snapshots__/WindowsChromeExpanded.test.js.snap +0 -81
  118. package/v2Containers/WebPush/Create/preview/config/notificationMappings.js +0 -50
  119. package/v2Containers/WebPush/Create/preview/constants.js +0 -637
  120. package/v2Containers/WebPush/Create/preview/notification-container.scss +0 -79
  121. package/v2Containers/WebPush/Create/preview/preview.scss +0 -358
  122. package/v2Containers/WebPush/Create/preview/styles/_android-mobile-chrome.scss +0 -370
  123. package/v2Containers/WebPush/Create/preview/styles/_android-mobile-edge.scss +0 -12
  124. package/v2Containers/WebPush/Create/preview/styles/_android-mobile-firefox.scss +0 -12
  125. package/v2Containers/WebPush/Create/preview/styles/_android-mobile-opera.scss +0 -12
  126. package/v2Containers/WebPush/Create/preview/styles/_android-tablet-chrome.scss +0 -47
  127. package/v2Containers/WebPush/Create/preview/styles/_android-tablet-edge.scss +0 -11
  128. package/v2Containers/WebPush/Create/preview/styles/_android-tablet-firefox.scss +0 -11
  129. package/v2Containers/WebPush/Create/preview/styles/_android-tablet-opera.scss +0 -11
  130. package/v2Containers/WebPush/Create/preview/styles/_base.scss +0 -207
  131. package/v2Containers/WebPush/Create/preview/styles/_ios.scss +0 -153
  132. package/v2Containers/WebPush/Create/preview/styles/_ipados.scss +0 -107
  133. package/v2Containers/WebPush/Create/preview/styles/_macos-chrome.scss +0 -101
  134. package/v2Containers/WebPush/Create/preview/styles/_windows-chrome.scss +0 -229
  135. package/v2Containers/WebPush/Create/preview/tests/DevicePreviewContent.test.js +0 -909
  136. package/v2Containers/WebPush/Create/preview/tests/NotificationContainer.test.js +0 -1081
  137. package/v2Containers/WebPush/Create/preview/tests/PreviewControls.test.js +0 -723
  138. package/v2Containers/WebPush/Create/preview/tests/WebPushPreview.test.js +0 -1327
  139. package/v2Containers/WebPush/Create/preview/tests/__snapshots__/DevicePreviewContent.test.js.snap +0 -131
  140. package/v2Containers/WebPush/Create/preview/tests/__snapshots__/NotificationContainer.test.js.snap +0 -112
  141. package/v2Containers/WebPush/Create/preview/tests/__snapshots__/PreviewControls.test.js.snap +0 -144
  142. package/v2Containers/WebPush/Create/preview/tests/__snapshots__/WebPushPreview.test.js.snap +0 -129
  143. package/v2Containers/WebPush/Create/utils/payloadBuilder.js +0 -96
  144. package/v2Containers/WebPush/Create/utils/payloadBuilder.test.js +0 -396
  145. package/v2Containers/WebPush/Create/utils/previewUtils.js +0 -89
  146. package/v2Containers/WebPush/Create/utils/urlValidation.js +0 -115
  147. package/v2Containers/WebPush/Create/utils/urlValidation.test.js +0 -449
  148. package/v2Containers/WebPush/Create/utils/validation.js +0 -76
  149. package/v2Containers/WebPush/Create/utils/validation.test.js +0 -283
  150. package/v2Containers/WebPush/actions.js +0 -60
  151. package/v2Containers/WebPush/constants.js +0 -132
  152. package/v2Containers/WebPush/index.js +0 -2
  153. package/v2Containers/WebPush/reducer.js +0 -104
  154. package/v2Containers/WebPush/sagas.js +0 -119
  155. package/v2Containers/WebPush/selectors.js +0 -65
  156. package/v2Containers/WebPush/tests/reducer.test.js +0 -863
  157. package/v2Containers/WebPush/tests/sagas.test.js +0 -566
  158. package/v2Containers/WebPush/tests/selectors.test.js +0 -960
@@ -1,163 +0,0 @@
1
- import React from 'react';
2
- import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
3
- import FormActions from './FormActions';
4
- import CapButton from '@capillarytech/cap-ui-library/CapButton';
5
- import CapError from '@capillarytech/cap-ui-library/CapError';
6
- import CapRow from '@capillarytech/cap-ui-library/CapRow';
7
-
8
- describe('FormActions', () => {
9
- const mockFormatMessage = jest.fn((message) => message.defaultMessage || message);
10
- const mockOnSave = jest.fn();
11
-
12
- const mockMessages = {
13
- saveTemplate: {
14
- defaultMessage: 'Save Template',
15
- },
16
- };
17
-
18
- const defaultProps = {
19
- onSave: mockOnSave,
20
- isSaveDisabled: false,
21
- errorText: '',
22
- accountErrorText: '',
23
- formatMessage: mockFormatMessage,
24
- messages: mockMessages,
25
- };
26
-
27
- beforeEach(() => {
28
- jest.clearAllMocks();
29
- });
30
-
31
- describe('Rendering', () => {
32
- it('should render correctly with default props', () => {
33
- const wrapper = shallowWithIntl(<FormActions {...defaultProps} />);
34
- expect(wrapper).toMatchSnapshot();
35
- });
36
-
37
- it('should render save button', () => {
38
- const wrapper = mountWithIntl(<FormActions {...defaultProps} />);
39
- const saveButton = wrapper.find(CapButton);
40
- expect(saveButton.exists()).toBe(true);
41
- expect(saveButton.prop('type')).toBe('primary');
42
- expect(saveButton.prop('disabled')).toBe(false);
43
- });
44
-
45
- it('should render save button with correct text', () => {
46
- const wrapper = mountWithIntl(<FormActions {...defaultProps} />);
47
- const saveButton = wrapper.find(CapButton);
48
- expect(saveButton.exists()).toBe(true);
49
- expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.saveTemplate);
50
- });
51
-
52
- it('should disable save button when isSaveDisabled is true', () => {
53
- const wrapper = mountWithIntl(<FormActions {...defaultProps} isSaveDisabled={true} />);
54
- const saveButton = wrapper.find(CapButton);
55
- expect(saveButton.prop('disabled')).toBe(true);
56
- });
57
-
58
- it('should enable save button when isSaveDisabled is false', () => {
59
- const wrapper = mountWithIntl(<FormActions {...defaultProps} isSaveDisabled={false} />);
60
- const saveButton = wrapper.find(CapButton);
61
- expect(saveButton.prop('disabled')).toBe(false);
62
- });
63
- });
64
-
65
- describe('Error Messages', () => {
66
- it('should not render error text when errorText is empty', () => {
67
- const wrapper = mountWithIntl(<FormActions {...defaultProps} errorText="" />);
68
- const errorRows = wrapper.find(CapRow).findWhere((node) => {
69
- const error = node.find(CapError);
70
- return error.exists() && error.prop('className') === 'webpush-template-error';
71
- });
72
- expect(errorRows.length).toBe(0);
73
- });
74
-
75
- it('should render error text when errorText is provided', () => {
76
- const errorText = 'Template save failed';
77
- const wrapper = mountWithIntl(<FormActions {...defaultProps} errorText={errorText} />);
78
- const error = wrapper.find(CapError).find('.webpush-template-error');
79
- expect(error.exists()).toBe(true);
80
- expect(error.length).toBeGreaterThan(0);
81
- });
82
-
83
- it('should not render account error text when accountErrorText is empty', () => {
84
- const wrapper = mountWithIntl(<FormActions {...defaultProps} accountErrorText="" />);
85
- const errorRows = wrapper.find(CapRow).findWhere((node) => {
86
- const error = node.find(CapError);
87
- return error.exists() && error.prop('className') === 'webpush-template-account-error';
88
- });
89
- expect(errorRows.length).toBe(0);
90
- });
91
-
92
- it('should render account error text when accountErrorText is provided', () => {
93
- const accountErrorText = 'Account error occurred';
94
- const wrapper = mountWithIntl(
95
- <FormActions {...defaultProps} accountErrorText={accountErrorText} />
96
- );
97
- const error = wrapper.find(CapError).find('.webpush-template-account-error');
98
- expect(error.exists()).toBe(true);
99
- expect(error.length).toBeGreaterThan(0);
100
- });
101
-
102
- it('should render both error texts when both are provided', () => {
103
- const wrapper = mountWithIntl(
104
- <FormActions
105
- {...defaultProps}
106
- errorText="Template error"
107
- accountErrorText="Account error"
108
- />
109
- );
110
- const templateError = wrapper.find(CapError).find('.webpush-template-error');
111
- const accountError = wrapper.find(CapError).find('.webpush-template-account-error');
112
- expect(templateError.exists()).toBe(true);
113
- expect(accountError.exists()).toBe(true);
114
- });
115
- });
116
-
117
- describe('Save Button Interaction', () => {
118
- it('should call onSave when save button is clicked', () => {
119
- const wrapper = mountWithIntl(<FormActions {...defaultProps} />);
120
- const saveButton = wrapper.find(CapButton);
121
- saveButton.simulate('click');
122
- expect(mockOnSave).toHaveBeenCalledTimes(1);
123
- });
124
-
125
- it('should not call onSave when button is disabled and clicked', () => {
126
- const wrapper = mountWithIntl(<FormActions {...defaultProps} isSaveDisabled={true} />);
127
- const saveButton = wrapper.find(CapButton);
128
- saveButton.simulate('click');
129
- // Even if disabled, the click event might fire, but the button should be disabled
130
- expect(saveButton.prop('disabled')).toBe(true);
131
- expect(defaultProps.onSave).not.toHaveBeenCalled();
132
- });
133
- });
134
-
135
- describe('Default Props', () => {
136
- it('should use default errorText when not provided', () => {
137
- const wrapper = mountWithIntl(
138
- <FormActions
139
- onSave={mockOnSave}
140
- isSaveDisabled={false}
141
- formatMessage={mockFormatMessage}
142
- messages={mockMessages}
143
- />
144
- );
145
- const error = wrapper.find(CapError).find('.webpush-template-error');
146
- expect(error.exists()).toBe(false);
147
- });
148
-
149
- it('should use default accountErrorText when not provided', () => {
150
- const wrapper = mountWithIntl(
151
- <FormActions
152
- onSave={mockOnSave}
153
- isSaveDisabled={false}
154
- formatMessage={mockFormatMessage}
155
- messages={mockMessages}
156
- />
157
- );
158
- const error = wrapper.find(CapError).find('.webpush-template-account-error');
159
- expect(error.exists()).toBe(false);
160
- });
161
- });
162
- });
163
-
@@ -1,142 +0,0 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import { FormattedMessage } from 'react-intl';
4
- import CapRow from '@capillarytech/cap-ui-library/CapRow';
5
- import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
6
- import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
7
- import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
8
- import CapImageUpload from '../../../../v2Components/CapImageUpload';
9
- import CapImageUrlUpload from '../../../../v2Components/CapImageUrlUpload';
10
- import { WEBPUSH } from '../../../CreativesContainer/constants';
11
- import {
12
- WEBPUSH_MEDIA_TYPES,
13
- WEBPUSH_MEDIA_TYPES_OPTIONS,
14
- ALLOWED_IMAGE_EXTENSIONS_REGEX,
15
- WEBPUSH_IMG_SIZE,
16
- WEBPUSH_RECOMMENDED_DIMENSIONS,
17
- IMAGE_UPLOAD_METHODS,
18
- } from '../../constants';
19
-
20
- /**
21
- * MediaSection component - Media type selection and image upload
22
- */
23
- export const MediaSection = ({
24
- mediaType,
25
- onMediaTypeChange,
26
- imageUpload,
27
- isLocked,
28
- isAnyUploadActive,
29
- formatMessage,
30
- messages,
31
- webPush,
32
- isFullMode,
33
- }) => {
34
- const {
35
- uploadMethod,
36
- imageSrc,
37
- imageUrl,
38
- isValidating,
39
- isUploading,
40
- uploadAsset,
41
- setUpdateImageSrc,
42
- updateOnReUpload,
43
- handleUrlChange,
44
- handleValidationStateChange,
45
- handleUploadStateChange,
46
- } = imageUpload;
47
-
48
- const isImageFieldActive = isValidating || isUploading;
49
-
50
- return (
51
- <>
52
- <CapRow className="creatives-webpush-media">
53
- <CapHeading type="h4" className="webpush-media-type">
54
- <FormattedMessage {...messages.mediaType} />
55
- </CapHeading>
56
- <CapSelect.CapCustomSelect
57
- width="100%"
58
- className="margin-t-4"
59
- options={WEBPUSH_MEDIA_TYPES_OPTIONS}
60
- value={mediaType}
61
- onChange={onMediaTypeChange}
62
- disabled={isAnyUploadActive}
63
- />
64
- </CapRow>
65
- {mediaType === WEBPUSH_MEDIA_TYPES.IMAGE && (
66
- <>
67
- {uploadMethod === IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE && (
68
- <CapRow
69
- className="webpush-image-upload-section"
70
- style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
71
- aria-disabled={isLocked}
72
- >
73
- <CapImageUpload
74
- allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
75
- imgSize={WEBPUSH_IMG_SIZE}
76
- uploadAsset={uploadAsset}
77
- isFullMode={isFullMode}
78
- imageSrc={imageSrc}
79
- updateImageSrc={setUpdateImageSrc}
80
- updateOnReUpload={updateOnReUpload}
81
- index={0}
82
- className="cap-custom-image-upload"
83
- key="webpush-uploaded-image"
84
- imageData={webPush}
85
- channel={WEBPUSH}
86
- showReUploadButton
87
- recommendedDimensions={WEBPUSH_RECOMMENDED_DIMENSIONS}
88
- />
89
- </CapRow>
90
- )}
91
- {uploadMethod === IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL && (
92
- <CapRow
93
- className="webpush-image-url-section"
94
- style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
95
- aria-disabled={isLocked}
96
- >
97
- <CapImageUrlUpload
98
- uploadAsset={uploadAsset}
99
- imgSize={WEBPUSH_IMG_SIZE}
100
- recommendedDimensions={WEBPUSH_RECOMMENDED_DIMENSIONS}
101
- sizeLabel={formatMessage(messages.sizeLimit)}
102
- formatLabel={formatMessage(messages.formatTypes)}
103
- imageUrl={imageUrl}
104
- imageSrc={imageSrc}
105
- onUrlChange={handleUrlChange}
106
- onValidationStateChange={handleValidationStateChange}
107
- onUploadStateChange={handleUploadStateChange}
108
- isExternalUploading={isImageFieldActive}
109
- disabled={isLocked}
110
- className="webpush-image-url-upload"
111
- fileNamePrefix="webpush-image"
112
- />
113
- </CapRow>
114
- )}
115
- </>
116
- )}
117
- <CapDivider />
118
- </>
119
- );
120
- };
121
-
122
- MediaSection.propTypes = {
123
- mediaType: PropTypes.string.isRequired,
124
- onMediaTypeChange: PropTypes.func.isRequired,
125
- imageUpload: PropTypes.object.isRequired,
126
- isLocked: PropTypes.bool,
127
- isAnyUploadActive: PropTypes.bool,
128
- formatMessage: PropTypes.func.isRequired,
129
- messages: PropTypes.object.isRequired,
130
- webPush: PropTypes.object,
131
- isFullMode: PropTypes.bool,
132
- };
133
-
134
- MediaSection.defaultProps = {
135
- isLocked: false,
136
- isAnyUploadActive: false,
137
- webPush: {},
138
- isFullMode: true,
139
- };
140
-
141
- export default MediaSection;
142
-
@@ -1,341 +0,0 @@
1
- import React from 'react';
2
- import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
3
- import MediaSection from './MediaSection';
4
- import CapRow from '@capillarytech/cap-ui-library/CapRow';
5
- import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
6
- import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
7
- import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
8
- import {
9
- WEBPUSH_MEDIA_TYPES,
10
- IMAGE_UPLOAD_METHODS,
11
- } from '../../constants';
12
-
13
- // Mock CapImageUpload
14
- jest.mock('../../../../v2Components/CapImageUpload', () => {
15
- const React = require('react');
16
- return function MockCapImageUpload(props) {
17
- return (
18
- <div data-testid="cap-image-upload" className="cap-image-upload-mock">
19
- <div>CapImageUpload</div>
20
- <div>imageSrc: {props.imageSrc}</div>
21
- <div>channel: {props.channel}</div>
22
- </div>
23
- );
24
- };
25
- });
26
-
27
- // Mock CapImageUrlUpload
28
- jest.mock('../../../../v2Components/CapImageUrlUpload', () => {
29
- const React = require('react');
30
- return function MockCapImageUrlUpload(props) {
31
- return (
32
- <div data-testid="cap-image-url-upload" className="cap-image-url-upload-mock">
33
- <div>CapImageUrlUpload</div>
34
- <div>imageUrl: {props.imageUrl}</div>
35
- <div>imageSrc: {props.imageSrc}</div>
36
- <div>disabled: {props.disabled ? 'true' : 'false'}</div>
37
- </div>
38
- );
39
- };
40
- });
41
-
42
- describe('MediaSection', () => {
43
- const mockFormatMessage = jest.fn((message) => message?.defaultMessage || message?.id || message);
44
- const mockOnMediaTypeChange = jest.fn();
45
-
46
- const mockMessages = {
47
- mediaType: {
48
- id: 'app.webpush.mediaType',
49
- defaultMessage: 'Media Type',
50
- },
51
- sizeLimit: {
52
- id: 'app.webpush.sizeLimit',
53
- defaultMessage: 'Size limit',
54
- },
55
- formatTypes: {
56
- id: 'app.webpush.formatTypes',
57
- defaultMessage: 'Format types',
58
- },
59
- };
60
-
61
- const mockImageUpload = {
62
- uploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
63
- imageSrc: '',
64
- imageUrl: '',
65
- isValidating: false,
66
- isUploading: false,
67
- uploadAsset: jest.fn(),
68
- setUpdateImageSrc: jest.fn(),
69
- updateOnReUpload: jest.fn(),
70
- handleUrlChange: jest.fn(),
71
- handleValidationStateChange: jest.fn(),
72
- handleUploadStateChange: jest.fn(),
73
- };
74
-
75
- const defaultProps = {
76
- mediaType: WEBPUSH_MEDIA_TYPES.NONE,
77
- onMediaTypeChange: mockOnMediaTypeChange,
78
- imageUpload: mockImageUpload,
79
- isLocked: false,
80
- isAnyUploadActive: false,
81
- formatMessage: mockFormatMessage,
82
- messages: mockMessages,
83
- webPush: {},
84
- isFullMode: true,
85
- };
86
-
87
- beforeEach(() => {
88
- jest.clearAllMocks();
89
- });
90
-
91
- describe('Rendering', () => {
92
- it('should render correctly with default props', () => {
93
- const wrapper = shallowWithIntl(<MediaSection {...defaultProps} />);
94
- expect(wrapper).toMatchSnapshot();
95
- });
96
-
97
- it('should render main container with correct class', () => {
98
- const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
99
- const container = wrapper.find('.creatives-webpush-media');
100
- expect(container.exists()).toBe(true);
101
- });
102
-
103
- it('should render heading', () => {
104
- const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
105
- const heading = wrapper.find(CapHeading).find('.webpush-media-type');
106
- expect(heading.exists()).toBe(true);
107
- });
108
-
109
- it('should render CapSelect.CapCustomSelect with correct props', () => {
110
- const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
111
- const select = wrapper.find(CapSelect.CapCustomSelect);
112
- expect(select.exists()).toBe(true);
113
- expect(select.prop('width')).toBe('100%');
114
- expect(select.prop('className')).toBe('margin-t-4');
115
- expect(select.prop('value')).toBe(WEBPUSH_MEDIA_TYPES.NONE);
116
- expect(select.prop('disabled')).toBe(false);
117
- });
118
-
119
- it('should render Divider', () => {
120
- const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
121
- const divider = wrapper.find(CapDivider);
122
- expect(divider.exists()).toBe(true);
123
- });
124
- });
125
-
126
- describe('Media Type Selection', () => {
127
- it('should call onMediaTypeChange when select changes', () => {
128
- const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
129
- const select = wrapper.find(CapSelect.CapCustomSelect);
130
- select.prop('onChange')(WEBPUSH_MEDIA_TYPES.IMAGE);
131
- expect(mockOnMediaTypeChange).toHaveBeenCalledWith(WEBPUSH_MEDIA_TYPES.IMAGE);
132
- });
133
-
134
- it('should disable select when isAnyUploadActive is true', () => {
135
- const wrapper = mountWithIntl(
136
- <MediaSection {...defaultProps} isAnyUploadActive={true} />
137
- );
138
- const select = wrapper.find(CapSelect.CapCustomSelect);
139
- expect(select.prop('disabled')).toBe(true);
140
- });
141
- });
142
-
143
- describe('Image Upload - UPLOAD_IMAGE Method', () => {
144
- it('should render CapImageUpload when mediaType is IMAGE and uploadMethod is UPLOAD_IMAGE', () => {
145
- const wrapper = mountWithIntl(
146
- <MediaSection
147
- {...defaultProps}
148
- mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
149
- imageUpload={{
150
- ...mockImageUpload,
151
- uploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
152
- imageSrc: 'path/to/image.jpg',
153
- }}
154
- />
155
- );
156
- const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
157
- expect(imageUpload.exists()).toBe(true);
158
- });
159
-
160
- it('should not render CapImageUpload when mediaType is NONE', () => {
161
- const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
162
- const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
163
- expect(imageUpload.exists()).toBe(false);
164
- });
165
-
166
- it('should apply locked styles when isLocked is true', () => {
167
- const wrapper = mountWithIntl(
168
- <MediaSection
169
- {...defaultProps}
170
- mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
171
- isLocked={true}
172
- />
173
- );
174
- const uploadSection = wrapper.find('.webpush-image-upload-section').first();
175
- expect(uploadSection.exists()).toBe(true);
176
- expect(uploadSection.prop('aria-disabled')).toBe(true);
177
- });
178
-
179
- it('should not apply locked styles when isLocked is false', () => {
180
- const wrapper = mountWithIntl(
181
- <MediaSection
182
- {...defaultProps}
183
- mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
184
- isLocked={false}
185
- />
186
- );
187
- const uploadSection = wrapper.find('.webpush-image-upload-section');
188
- expect(uploadSection.exists()).toBe(true);
189
- });
190
- });
191
-
192
- describe('Image Upload - ADD_IMAGE_URL Method', () => {
193
- it('should render CapImageUrlUpload when mediaType is IMAGE and uploadMethod is ADD_IMAGE_URL', () => {
194
- const wrapper = mountWithIntl(
195
- <MediaSection
196
- {...defaultProps}
197
- mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
198
- imageUpload={{
199
- ...mockImageUpload,
200
- uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
201
- imageUrl: 'https://example.com/image.jpg',
202
- }}
203
- />
204
- );
205
- const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
206
- expect(imageUrlUpload.exists()).toBe(true);
207
- });
208
-
209
- it('should not render CapImageUrlUpload when mediaType is NONE', () => {
210
- const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
211
- const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
212
- expect(imageUrlUpload.exists()).toBe(false);
213
- });
214
-
215
- it('should apply locked styles when isLocked is true', () => {
216
- const wrapper = mountWithIntl(
217
- <MediaSection
218
- {...defaultProps}
219
- mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
220
- imageUpload={{
221
- ...mockImageUpload,
222
- uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
223
- }}
224
- isLocked={true}
225
- />
226
- );
227
- const urlSection = wrapper.find('.webpush-image-url-section').first();
228
- expect(urlSection.exists()).toBe(true);
229
- expect(urlSection.prop('aria-disabled')).toBe(true);
230
- });
231
-
232
- it('should pass disabled prop to CapImageUrlUpload when isLocked is true', () => {
233
- const wrapper = mountWithIntl(
234
- <MediaSection
235
- {...defaultProps}
236
- mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
237
- imageUpload={{
238
- ...mockImageUpload,
239
- uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
240
- }}
241
- isLocked={true}
242
- />
243
- );
244
- const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
245
- expect(imageUrlUpload.exists()).toBe(true);
246
- });
247
- });
248
-
249
- describe('Image Upload State', () => {
250
- it('should set isImageFieldActive when isValidating is true', () => {
251
- const wrapper = mountWithIntl(
252
- <MediaSection
253
- {...defaultProps}
254
- mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
255
- imageUpload={{
256
- ...mockImageUpload,
257
- uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
258
- isValidating: true,
259
- }}
260
- />
261
- );
262
- const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
263
- expect(imageUrlUpload.exists()).toBe(true);
264
- });
265
-
266
- it('should set isImageFieldActive when isUploading is true', () => {
267
- const wrapper = mountWithIntl(
268
- <MediaSection
269
- {...defaultProps}
270
- mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
271
- imageUpload={{
272
- ...mockImageUpload,
273
- uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
274
- isUploading: true,
275
- }}
276
- />
277
- );
278
- const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
279
- expect(imageUrlUpload.exists()).toBe(true);
280
- });
281
- });
282
-
283
- describe('Default Props', () => {
284
- it('should use default isLocked when not provided', () => {
285
- const wrapper = mountWithIntl(
286
- <MediaSection
287
- mediaType={WEBPUSH_MEDIA_TYPES.NONE}
288
- onMediaTypeChange={mockOnMediaTypeChange}
289
- imageUpload={mockImageUpload}
290
- formatMessage={mockFormatMessage}
291
- messages={mockMessages}
292
- />
293
- );
294
- const select = wrapper.find(CapSelect.CapCustomSelect);
295
- expect(select.prop('disabled')).toBe(false);
296
- });
297
-
298
- it('should use default isAnyUploadActive when not provided', () => {
299
- const wrapper = mountWithIntl(
300
- <MediaSection
301
- mediaType={WEBPUSH_MEDIA_TYPES.NONE}
302
- onMediaTypeChange={mockOnMediaTypeChange}
303
- imageUpload={mockImageUpload}
304
- formatMessage={mockFormatMessage}
305
- messages={mockMessages}
306
- />
307
- );
308
- const select = wrapper.find(CapSelect.CapCustomSelect);
309
- expect(select.prop('disabled')).toBe(false);
310
- });
311
-
312
- it('should use default webPush when not provided', () => {
313
- const wrapper = mountWithIntl(
314
- <MediaSection
315
- mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
316
- onMediaTypeChange={mockOnMediaTypeChange}
317
- imageUpload={mockImageUpload}
318
- formatMessage={mockFormatMessage}
319
- messages={mockMessages}
320
- />
321
- );
322
- const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
323
- expect(imageUpload.exists()).toBe(true);
324
- });
325
-
326
- it('should use default isFullMode when not provided', () => {
327
- const wrapper = mountWithIntl(
328
- <MediaSection
329
- mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
330
- onMediaTypeChange={mockOnMediaTypeChange}
331
- imageUpload={mockImageUpload}
332
- formatMessage={mockFormatMessage}
333
- messages={mockMessages}
334
- />
335
- );
336
- const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
337
- expect(imageUpload.exists()).toBe(true);
338
- });
339
- });
340
- });
341
-