@capillarytech/creatives-library 8.0.267 → 8.0.269

package/v2Components/CapImageUpload/index.js

@@ -17,17 +17,18 @@ import {
   CapImage,
   CapError,
 } from '@capillarytech/cap-ui-library';
-import { injectIntl, FormattedMessage, intlShape} from 'react-intl';
+import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 import { isEmpty, get } from 'lodash';
 import './index.scss';
 import Gallery from '../../v2Containers/Assets/Gallery';
 import { MAX_SUPPORTED_IMAGE_SIZE } from './constants';
 import {
-  FACEBOOK, INAPP, RCS, WHATSAPP, VIBER,
+  FACEBOOK, INAPP, RCS, WHATSAPP, VIBER, WEBPUSH, WEBPUSH_BRAND_ICON
 } from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
 import { MOBILEPUSH } from '../CapVideoUpload/constants';
+import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 function CapImageUpload(props) {
   const {
     intl,
@@ -50,6 +51,8 @@ function CapImageUpload(props) {
     channelSpecificStyle,
     showReUploadButton = true,
     disableAutoRestore = false, // New prop to disable automatic restoration
+    recommendedDimensions, // Array of {width, height} objects for recommended dimensions
+    disabled = false,
   } = props;
   const {
     formatMessage,
@@ -72,7 +75,7 @@ function CapImageUpload(props) {
   const [isImageError, updateImageErrorMessage] = useState(false);
   const [isDrawerRequired, updateDrawerRequirement] = useState(false);
 
-  const {CapHeadingSpan} = CapHeading;
+  const { CapHeadingSpan } = CapHeading;
   const ImageComponent = useCallback(
     () => (
       <>
@@ -91,7 +94,7 @@ function CapImageUpload(props) {
 
   const WithLabel = LabelHOC(ImageComponent);
 
-  const uploadImages = useCallback((e, {files}) => {
+  const uploadImages = useCallback((e, { files }) => {
     if (e) {
       e.preventDefault();
     }
@@ -109,13 +112,13 @@ function CapImageUpload(props) {
         height: img.height,
         error: file && (file.size / (1e+6) > 5), // Checking if file exists and its size is greater than 5MB (5 * 10^6 bytes)
       };
-      submitAction({file, type: 'image', fileParams}, incorrectFile);
+      submitAction({ file, type: 'image', fileParams }, incorrectFile);
     };
     img.onerror = () => {
       const fileParams = {
         error: true,
       };
-      submitAction({fileParams}, incorrectFile);
+      submitAction({ fileParams }, incorrectFile);
     };
     if (e) {
       const event = e;
@@ -123,7 +126,7 @@ function CapImageUpload(props) {
     }
   }, []);
 
-  const rcsValidation = useCallback((incorrectFile, data, size, height, width, error) => { 
+  const rcsValidation = useCallback((incorrectFile, data, size, height, width, error) => {
     if (incorrectFile || size < minImgSize || size > imgSize || height !== imgHeight || width !== imgWidth || error) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
     } else {
@@ -146,6 +149,19 @@ function CapImageUpload(props) {
     const { height, width, error } = fileParams || {};
     if (channel === RCS) {
       rcsValidation(incorrectFile, data, size, height, width, error);
+    } else if ([WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel)) {
+      // For WEBPUSH, only validate file extension, size, and format - no dimension validation
+      if (incorrectFile || size > imgSize || error) {
+        updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
+      } else {
+        updateImageErrorMessage('');
+        uploadAsset(
+          data.file,
+          data.type,
+          data.fileParams,
+          index,
+        );
+      }
     } else if (incorrectFile || size > imgSize || height > imgHeight || width > imgWidth || error) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
     } else {
@@ -160,7 +176,7 @@ function CapImageUpload(props) {
   }, [isImageError]);
 
   const capUploaderCustomRequest = useCallback((uploadData) => {
-    uploadImages(undefined, {files: [uploadData.file]});
+    uploadImages(undefined, { files: [uploadData.file] });
   }, [uploadImages]);
 
   const setDrawerVisibility = useCallback((drawervisibleFlag) => updateDrawerRequirement(drawervisibleFlag), [isDrawerRequired]);
@@ -181,19 +197,27 @@ function CapImageUpload(props) {
       secure_file_path: image, width, height, file_size: size,
     } = get(imageTemplate, 'metaInfo', {});
     updateDrawerRequirement(false);
-    if (!allowedExtensionsRegex.test(image) || height > imgHeight || width > imgWidth || size > imgSize ) {
+    // For WEBPUSH, skip dimension validation - only check extension, size
+    if ([WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel)) {
+      if (!allowedExtensionsRegex.test(image) || size > imgSize) {
+        updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
+      } else {
+        updateImageErrorMessage('');
+        updateImageSrc(image);
+      }
+    } else if (!allowedExtensionsRegex.test(image) || height > imgHeight || width > imgWidth || size > imgSize) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
     } else {
       updateImageErrorMessage('');
       updateImageSrc(image);
     }
-  }, [isImageError, isDrawerRequired]);
+  }, [isImageError, isDrawerRequired, channel, allowedExtensionsRegex, imgSize, formatMessage]);
 
   const getGalleryDrawerContent = useCallback(() => {
     const locationGallery = {
       pathname: `/assets`,
       search: '',
-      query: !isFullMode ? {type: 'embedded', module: 'library'} : {},
+      query: !isFullMode ? { type: 'embedded', module: 'library' } : {},
     };
     return (
       <>
@@ -230,6 +254,7 @@ function CapImageUpload(props) {
             customRequest={capUploaderCustomRequest}
             className="form-builder-dragger grey-background"
             showUploadList={!isImageError}
+            disabled={disabled}
           >
             <CapHeading className="dragger-title" type="h7">
               <FormattedMessage {...messages.dragAndDrop} />
@@ -237,7 +262,7 @@ function CapImageUpload(props) {
             <CapHeading className="dragger-or" type="label6">
               <FormattedMessage {...messages.or} />
             </CapHeading>
-            <CapButton className="dragger-button upload-image" type="secondary">
+            <CapButton className="dragger-button upload-image" type="secondary" disabled={disabled} tabIndex={disabled ? -1 : undefined}>
               <FormattedMessage {...messages.uploadComputer} />
             </CapButton>
             {channel !== WHATSAPP && (
@@ -245,6 +270,8 @@ function CapImageUpload(props) {
                 className="dragger-button gallery-select"
                 type="secondary"
                 onClick={onGalleryClick}
+                disabled={disabled}
+                tabIndex={disabled ? -1 : undefined}
               >
                 <FormattedMessage {...messages.uploadGallery} />
               </CapButton>
@@ -262,13 +289,15 @@ function CapImageUpload(props) {
           className="dragger-button re-upload"
           type="flat"
           onClick={onReUpload}
-          style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
+          style={channelSpecificStyle ? { marginTop: `-${CAP_SPACE_16}` } : {}}
+          disabled={disabled}
+          tabIndex={disabled ? -1 : undefined}
         >
           <FormattedMessage {...messages.imageReUpload} />
         </CapButton>
       );
     }
-  }, [isImageError, imageSrc]);
+  }, [isImageError, imageSrc, disabled, showReUploadButton, channel, channelSpecificStyle, capUploaderCustomRequest, onGalleryClick, onReUpload]);
 
   return (
     <div style={style} className="cap-custom-image-upload">
@@ -285,6 +314,8 @@ function CapImageUpload(props) {
           type="file"
           onChange={(e) => uploadImages(e, { files: e.target.files })}
           accept={supportedExtensions || "image/*"}
+          disabled={disabled}
+          tabIndex={disabled ? -1 : undefined}
         />
         {getImageSection()}
         <CapDrawer
@@ -305,7 +336,18 @@ function CapImageUpload(props) {
         )}
         {![WHATSAPP, INAPP].includes(channel) && (
           <CapHeadingSpan type="label2" className="image-dimension">
-            <FormattedMessage {...messages.imageDimenstionDescription} values={{ width: imgWidth, height: imgHeight }} />
+            {[WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel) && recommendedDimensions?.length ? (
+              <FormattedMessage
+                {...messages.recommendedDimensions}
+                values={{
+                  dimensions: recommendedDimensions
+                    .map((dim) => `${dim.width} x ${dim.height}px`)
+                    .join(', '),
+                }}
+              />
+            ) : (
+              <FormattedMessage {...messages.imageDimenstionDescription} values={{ width: imgWidth, height: imgHeight }} />
+            )}
           </CapHeadingSpan>
         )}
         {channel === FACEBOOK && (
@@ -328,7 +370,7 @@ function CapImageUpload(props) {
             getImageSizeLabel()
           )
         )}
-        {[VIBER, INAPP, MOBILEPUSH].includes(channel) && getImageSizeLabel()}
+        {[VIBER, INAPP, MOBILEPUSH, WEBPUSH, WEBPUSH_BRAND_ICON].includes(channel) && getImageSizeLabel()}
         <CapHeadingSpan type="label2" className="image-format">
           {channel === INAPP ? <FormattedMessage {...messages.format2} /> : <FormattedMessage {...messages.format} />}
         </CapHeadingSpan>
@@ -357,6 +399,13 @@ CapImageUpload.propTypes = {
   channel: PropTypes.string,
   channelSpecificStyle: PropTypes.bool,
   disableAutoRestore: PropTypes.bool,
+  recommendedDimensions: PropTypes.arrayOf(
+    PropTypes.shape({
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
+    })
+  ),
+  disabled: PropTypes.bool,
 };
 
 export default injectIntl(CapImageUpload);

package/v2Components/CapImageUpload/index.scss

@@ -19,5 +19,8 @@ $classPrefix: cap-custom-image-upload;
   }
   .upload-image-error{
     margin-top: $CAP_SPACE_04;
-}
+  }
+  .ant-upload-list-item{
+    height: 1.65rem;
+  }
 }

package/v2Components/CapImageUpload/messages.js

@@ -34,6 +34,10 @@ export default defineMessages({
     id: `${scope}.imageDimenstionDescription`,
     defaultMessage: 'Dimensions upto: {width}px x {height}px',
   },
+  recommendedDimensions: {
+    id: `${scope}.recommendedDimensions`,
+    defaultMessage: 'Recommended dimensions: {dimensions}',
+  },
   format: {
     id: `${scope}.format`,
     defaultMessage: 'Format: JPEG, JPG, PNG',
@@ -57,7 +61,7 @@ export default defineMessages({
   },
   channelImageSize: {
     id: `${scope}.channelImageSize`,
-    defaultMessage: 'Size upto: {size}MB',
+    defaultMessage: 'Size up to: {size}MB',
   },
   RcschannelImageSize: {
     id: `${scope}.RcschannelImageSize`,

package/v2Components/CapImageUrlUpload/constants.js

@@ -0,0 +1,26 @@
+// Default allowed content types for image URL validation
+export const DEFAULT_ALLOWED_CONTENT_TYPES = ['image/jpeg', 'image/jpg', 'image/png'];
+
+// Default maximum file size (5MB)
+export const DEFAULT_MAX_SIZE = 5000000;
+
+// Default allowed extensions regex
+export const DEFAULT_ALLOWED_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
+
+// MIME type to file extension mapping
+export const MIME_TYPE_TO_EXTENSION = {
+  'image/jpeg': 'jpg',
+  'image/jpg': 'jpg',
+  'image/png': 'png',
+};
+
+// Default image extension fallback
+export const DEFAULT_IMAGE_EXTENSION = 'png';
+
+// Upload status state machine states
+export const UPLOAD_STATUS = {
+  IDLE: 'idle',
+  UPLOADING: 'uploading',
+  WAITING: 'waiting',
+};
+

package/v2Components/CapImageUrlUpload/index.js

@@ -0,0 +1,365 @@
+/**
+ *
+ * CapImageUrlUpload
+ *
+ * A modular component for uploading images from a URL.
+ * Validates URL format, image type, and size before uploading to gallery.
+ * Can be used in any form context (creatives, profiles, etc.)
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import messages from './messages';
+import { DEFAULT_ALLOWED_CONTENT_TYPES, DEFAULT_MAX_SIZE, UPLOAD_STATUS } from './constants';
+import { fetchImageFromUrl, uploadImageFromUrlHelper } from '../../utils/imageUrlUpload';
+import './index.scss';
+
+function CapImageUrlUpload(props) {
+  const {
+    intl,
+    uploadAsset,
+    imgSize = DEFAULT_MAX_SIZE,
+    allowedContentTypes = DEFAULT_ALLOWED_CONTENT_TYPES,
+    recommendedDimensions = [],
+    sizeLabel = '',
+    formatLabel = '',
+    imageUrl = '',
+    imageSrc = '', // Secure file path from parent after upload completes
+    onUrlChange,
+    onValidationStateChange, // Callback to notify parent of validation state
+    onUploadStateChange, // Callback to notify parent of upload state
+    isExternalUploading = false, // Upload state from parent (e.g., redux)
+    className = '',
+    placeholder,
+    disabled = false,
+    fileNamePrefix = 'image',
+  } = props;
+
+  const { formatMessage } = intl ?? {};
+  const { CapHeadingSpan } = CapHeading;
+  
+  const [isValidating, setIsValidating] = useState(false);
+  const [isInternalUploading, setIsInternalUploading] = useState(false);
+  const [error, setError] = useState('');
+  // State machine for upload lifecycle
+  const [uploadStatus, setUploadStatus] = useState(UPLOAD_STATUS.IDLE);
+
+  /**
+   * Validate image URL
+   * Checks URL format, fetches as Blob, validates Content-Type, file size, and image validity
+   */
+  const validateImageUrl = useCallback(async (url) => {
+    const trimmedUrl = url?.trim() || '';
+    
+    if (!trimmedUrl) {
+      return { isValid: false, error: '' };
+    }
+
+    setIsValidating(true);
+    setError('');
+
+    try {
+      // Validate URL format
+      let urlObj;
+      try {
+        urlObj = new URL(trimmedUrl);
+        if (!['http:', 'https:'].includes(urlObj.protocol)) {
+          setIsValidating(false);
+          return {
+            isValid: false,
+            error: formatMessage(messages.imageUrlInvalid),
+          };
+        }
+      } catch (urlError) {
+        setIsValidating(false);
+        return {
+          isValid: false,
+          error: formatMessage(messages.imageUrlInvalid),
+        };
+      }
+
+      // Fetch image as Blob to check file size
+      let response;
+      try {
+        response = await fetchImageFromUrl(trimmedUrl);
+      } catch (fetchError) {
+        setIsValidating(false);
+        return {
+          isValid: false,
+          error: formatMessage(messages.imageLoadError),
+        };
+      }
+
+      // Validate Content-Type
+      const contentType = response.headers?.get('Content-Type') || '';
+      const normalizedContentType = contentType.split(';')[0].toLowerCase().trim();
+      
+      if (!allowedContentTypes.includes(normalizedContentType)) {
+        setIsValidating(false);
+        return {
+          isValid: false,
+          error: formatMessage(messages.imageTypeInvalid),
+        };
+      }
+
+      // Validate file size
+      const blob = await response.blob();
+      if (blob.size > imgSize) {
+        setIsValidating(false);
+        return {
+          isValid: false,
+          error: formatMessage(messages.imageSizeInvalid),
+        };
+      }
+
+      // Verify image validity by loading in Image object
+      return new Promise((resolve) => {
+        const img = new Image();
+        const objectUrl = URL.createObjectURL(blob);
+        
+        img.onload = () => {
+          URL.revokeObjectURL(objectUrl);
+          setIsValidating(false);
+          resolve({
+            isValid: true,
+            error: '',
+          });
+        };
+        
+        img.onerror = () => {
+          URL.revokeObjectURL(objectUrl);
+          setIsValidating(false);
+          resolve({
+            isValid: false,
+            error: formatMessage(messages.imageLoadError),
+          });
+        };
+        
+        img.src = objectUrl;
+      });
+    } catch (error) {
+      setIsValidating(false);
+      return {
+        isValid: false,
+        error: formatMessage(messages.imageLoadError),
+      };
+    }
+  }, [formatMessage, allowedContentTypes, imgSize]);
+
+  /**
+   * Upload image from URL to media gallery
+   * Fetches image, converts to File, uploads via uploadAsset
+   */
+  const uploadImageFromUrl = useCallback(async (url) => {
+    setIsInternalUploading(true);
+    setUploadStatus(UPLOAD_STATUS.UPLOADING);
+    
+    // Notify parent that upload is starting
+    if (onUploadStateChange) {
+      onUploadStateChange(true);
+    }
+    
+    const result = await uploadImageFromUrlHelper(
+      url,
+      formatMessage,
+      messages,
+      uploadAsset,
+      fileNamePrefix,
+      imgSize,
+      allowedContentTypes,
+    );
+    
+    setIsInternalUploading(false);
+    
+    // Check if imageSrc is already available (handles React batching/timing issues)
+    if (result.success && imageSrc && imageSrc !== '') {
+      // Upload already complete - imageSrc was set before we entered waiting state
+      setUploadStatus(UPLOAD_STATUS.IDLE);
+      if (onUploadStateChange) {
+        onUploadStateChange(false);
+      }
+    } else if (result.success) {
+      // Transition to waiting state - we've triggered the upload, now wait for imageSrc
+      setUploadStatus(UPLOAD_STATUS.WAITING);
+    } else {
+      // Upload failed
+      setUploadStatus(UPLOAD_STATUS.IDLE);
+      if (onUploadStateChange) {
+        onUploadStateChange(false);
+      }
+    }
+    
+    return result;
+  }, [formatMessage, uploadAsset, fileNamePrefix, imgSize, allowedContentTypes, onUploadStateChange, imageSrc]);
+
+  /**
+   * Handle image URL change
+   * Validates URL and triggers upload on success
+   */
+  const handleImageUrlChange = useCallback(async (e) => {
+    const url = e.target.value;
+    const trimmedUrl = url?.trim() || '';
+    
+    // Reset upload status when URL changes
+    setUploadStatus(UPLOAD_STATUS.IDLE);
+    
+    // Call parent's onUrlChange if provided
+    if (onUrlChange) {
+      onUrlChange(url);
+    }
+    
+    if (trimmedUrl !== '') {
+      // Notify parent that validation is starting
+      if (onValidationStateChange) {
+        onValidationStateChange(true);
+      }
+      
+      const validation = await validateImageUrl(trimmedUrl);
+      
+      // Notify parent that validation is complete
+      if (onValidationStateChange) {
+        onValidationStateChange(false);
+      }
+      
+      if (!validation.isValid) {
+        setError(validation.error);
+        if (onUploadStateChange) {
+          onUploadStateChange(false);
+        }
+      } else {
+        setError('');
+        // Upload image from URL when validation succeeds
+        const uploadResult = await uploadImageFromUrl(trimmedUrl);
+        if (!uploadResult.success) {
+          setError(uploadResult.error);
+          if (onUploadStateChange) {
+            onUploadStateChange(false);
+          }
+        }
+      }
+    } else {
+      setError('');
+      if (onValidationStateChange) {
+        onValidationStateChange(false);
+      }
+      if (onUploadStateChange) {
+        onUploadStateChange(false);
+      }
+    }
+  }, [validateImageUrl, uploadImageFromUrl, onUrlChange, onValidationStateChange, onUploadStateChange]);
+
+  /**
+   * Monitor upload status and imageSrc to detect when upload is complete
+   * Handles React batching and timing issues by checking state transitions
+   */
+  useEffect(() => {
+    if ((uploadStatus === UPLOAD_STATUS.UPLOADING || uploadStatus === UPLOAD_STATUS.WAITING) && imageSrc && imageSrc !== '') {
+      // Upload is complete - we have the secure file path
+      setUploadStatus(UPLOAD_STATUS.IDLE);
+      
+      // Notify parent that upload is complete
+      if (onUploadStateChange) {
+        onUploadStateChange(false);
+      }
+    }
+  }, [uploadStatus, imageSrc, onUploadStateChange]);
+
+  // Determine if we should show "uploading" state
+  // Show uploading when:
+  // 1. Internal upload is in progress, OR
+  // 2. External upload is in progress (from parent's redux), OR
+  // 3. State machine indicates we're uploading or waiting for completion
+  const isActuallyUploading = isInternalUploading || isExternalUploading || uploadStatus !== UPLOAD_STATUS.IDLE;
+
+  return (
+    <div className={`cap-image-url-upload ${className}`}>
+      <CapInput
+        className="image-url-input"
+        placeholder={placeholder || formatMessage(messages.imageUrlPlaceholder)}
+        value={imageUrl}
+        onChange={handleImageUrlChange}
+        size="default"
+        errorMessage={
+          error && (
+            <CapError className="image-url-error">
+              {error}
+            </CapError>
+          )
+        }
+        disabled={disabled || isValidating || isActuallyUploading}
+      />
+      
+      {isValidating && (
+        <CapLabel type="label2" className="validation-label">
+          <FormattedMessage {...messages.validatingUrl} />
+        </CapLabel>
+      )}
+      
+      {isActuallyUploading && !isValidating && (
+        <CapLabel type="label2" className="uploading-label">
+          <FormattedMessage {...messages.uploadingImage} />
+        </CapLabel>
+      )}
+      
+      <div className="webpush-image-specs">
+        {recommendedDimensions?.length > 0 && (
+          <CapHeadingSpan type="label2" className="image-dimension">
+            <FormattedMessage
+              {...messages.recommendedDimensions}
+              values={{
+                dimensions: recommendedDimensions
+                  .map((dim) => `${dim.width} x ${dim.height}px`)
+                  .join(', '),
+              }}
+            />
+          </CapHeadingSpan>
+        )}
+        
+        {sizeLabel && (
+          <CapHeadingSpan type="label2" className="image-size">
+            {sizeLabel}
+          </CapHeadingSpan>
+        )}
+        
+        {formatLabel && (
+          <CapHeadingSpan type="label2" className="image-format">
+            {formatLabel}
+          </CapHeadingSpan>
+        )}
+      </div>
+    </div>
+  );
+}
+
+CapImageUrlUpload.propTypes = {
+  intl: intlShape.isRequired,
+  uploadAsset: PropTypes.func.isRequired,
+  imgSize: PropTypes.number,
+  allowedContentTypes: PropTypes.arrayOf(PropTypes.string),
+  recommendedDimensions: PropTypes.arrayOf(
+    PropTypes.shape({
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
+    })
+  ),
+  sizeLabel: PropTypes.string,
+  formatLabel: PropTypes.string,
+  imageUrl: PropTypes.string,
+  imageSrc: PropTypes.string, // Secure file path from parent after upload completes
+  onUrlChange: PropTypes.func,
+  onValidationStateChange: PropTypes.func, // Callback(isValidating: bool)
+  onUploadStateChange: PropTypes.func, // Callback(isUploading: bool)
+  isExternalUploading: PropTypes.bool, // Upload state from parent (e.g., redux)
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  fileNamePrefix: PropTypes.string,
+};
+
+export default injectIntl(CapImageUrlUpload);
+

package/v2Components/CapImageUrlUpload/index.scss

@@ -0,0 +1,35 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+@mixin cap-image-url-spec-text {
+  .image-dimension,
+  .image-size,
+  .image-format {
+    color: $CAP_G01;
+  }
+}
+
+.cap-image-url-upload {
+  .image-url-input {
+    width: 100%;
+  }
+
+  .validation-label,
+  .uploading-label {
+    margin-top: $CAP_SPACE_08;
+  }
+
+  .image-url-error {
+    margin-top: $CAP_SPACE_04;
+  }
+
+  .webpush-image-specs {
+    @include cap-image-url-spec-text;
+  }
+
+  .webpush-container & {
+    .webpush-image-specs {
+      @include cap-image-url-spec-text;
+    }
+  }
+}
+