@capillarytech/creatives-library 8.0.125-alpha.6 → 8.0.126

package/v2Containers/MobilePushNew/hooks/usePlatformSync.js

@@ -1,246 +0,0 @@
-// eslint-disable-next-line jsx-a11y/href-no-hash
-import { useCallback, useEffect, useRef } from 'react';
-import {
-  ANDROID, GIF, IMAGE, IOS, VIDEO,
-} from '../constants';
-import { NONE } from '../../Whatsapp/constants';
-
-/**
- * Custom hook to manage content synchronization between Android and iOS platforms
- * @param {Object} params Configuration parameters
- * @param {boolean} params.sameContent Whether sync is enabled
- * @param {Function} params.setAndroidContent Android content setter
- * @param {Function} params.setIosContent iOS content setter
- * @param {Function} params.validateTitle Title validation function
- * @param {Function} params.validateMessage Message validation function
- * @param {Function} params.setAndroidTitleError Android title error setter
- * @param {Function} params.setAndroidMessageError Android message error setter
- * @param {Function} params.setIosTitleError iOS title error setter
- * @param {Function} params.setIosMessageError iOS message error setter
- * @param {Object} params.androidContent Current Android content
- * @param {Object} params.iosContent Current iOS content
- * @param {Function} params.updateOnMpushImageReUpload Image re-upload handler
- * @param {Function} params.updateOnMpushVideoReUpload Video re-upload handler
- * @param {Object} params.changeSourceRef Ref to track last changed platform
- */
-const DEBOUNCE_DELAY = 500;
-
-const usePlatformSync = ({
-  setAndroidContent,
-  setIosContent,
-  validateTitle,
-  validateMessage,
-  setAndroidTitleError,
-  setAndroidMessageError,
-  setIosTitleError,
-  setIosMessageError,
-  androidContent,
-  iosContent,
-  updateOnMpushImageReUpload,
-  updateOnMpushVideoReUpload,
-  sameContent,
-  changeSourceRef,
-}) => {
-  // Debounce refs
-  const debounceTimeoutRef = useRef(null);
-
-  // Debounced sync effect
-  useEffect(() => {
-    if (!sameContent || !changeSourceRef?.current) return undefined;
-    if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
-    debounceTimeoutRef.current = setTimeout(() => {
-      if (changeSourceRef.current === 'android') {
-        setIosContent(androidContent);
-      } else if (changeSourceRef.current === 'ios') {
-        setAndroidContent(iosContent);
-      }
-    }, DEBOUNCE_DELAY);
-    return () => {
-      if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [androidContent, iosContent, sameContent]);
-
-  // Utility to deeply sync content between platforms (except platform-specific fields)
-  const deepSyncContent = useCallback((sourceContent, targetContent, targetPlatform) => {
-    // Deep copy all fields except platform-specific ones
-    const synced = {
-      ...targetContent,
-      ...sourceContent,
-      // For buttons, remap platform property
-      buttons: Array.isArray(sourceContent.buttons)
-        ? sourceContent.buttons.map((btn) => ({
-          ...btn,
-          platform: targetPlatform,
-        }))
-        : [],
-    };
-    return synced;
-  }, []);
-
-  // Handle title changes
-  const handleTitleChange = useCallback((platform, value) => {
-    const setContent = platform === ANDROID ? setAndroidContent : setIosContent;
-    const setError = platform === ANDROID ? setAndroidTitleError : setIosTitleError;
-    const otherSetContent = platform === ANDROID ? setIosContent : setAndroidContent;
-    const otherSetError = platform === ANDROID ? setIosTitleError : setAndroidTitleError;
-    const otherContent = platform === ANDROID ? iosContent : androidContent;
-    const refObj = changeSourceRef;
-    if (refObj && Object.prototype.hasOwnProperty.call(refObj, 'current')) {
-      refObj.current = platform === ANDROID ? 'android' : 'ios';
-    }
-    const currentContent = platform === ANDROID ? androidContent : iosContent;
-    const newContent = { ...currentContent, title: value };
-    setContent(newContent);
-    setError(validateTitle(value));
-    if (sameContent) {
-      const targetPlatform = platform === ANDROID ? IOS : ANDROID;
-      const synced = deepSyncContent(newContent, otherContent, targetPlatform);
-      otherSetContent(synced);
-      otherSetError(validateTitle(value));
-    }
-  }, [setAndroidContent, setIosContent, setAndroidTitleError, setIosTitleError, validateTitle, changeSourceRef, sameContent, androidContent, iosContent, deepSyncContent]);
-
-  // Handle message changes
-  const handleMessageChange = useCallback((platform, value) => {
-    const setContent = platform === ANDROID ? setAndroidContent : setIosContent;
-    const setError = platform === ANDROID ? setAndroidMessageError : setIosMessageError;
-    const otherSetContent = platform === ANDROID ? setIosContent : setAndroidContent;
-    const otherSetError = platform === ANDROID ? setIosMessageError : setAndroidMessageError;
-    const otherContent = platform === ANDROID ? iosContent : androidContent;
-    const refObj = changeSourceRef;
-    if (refObj && Object.prototype.hasOwnProperty.call(refObj, 'current')) {
-      refObj.current = platform === ANDROID ? 'android' : 'ios';
-    }
-    const currentContent = platform === ANDROID ? androidContent : iosContent;
-    const newContent = { ...currentContent, message: value };
-    setContent(newContent);
-    setError(validateMessage(value));
-    if (sameContent) {
-      const targetPlatform = platform === ANDROID ? IOS : ANDROID;
-      const synced = deepSyncContent(newContent, otherContent, targetPlatform);
-      otherSetContent(synced);
-      otherSetError(validateMessage(value));
-    }
-  }, [setAndroidContent, setIosContent, setAndroidMessageError, setIosMessageError, validateMessage, changeSourceRef, sameContent, androidContent, iosContent, deepSyncContent]);
-
-  // Handle media type changes
-  const handleMediaTypeChange = useCallback((platform, value) => {
-    const setContent = platform === ANDROID ? setAndroidContent : setIosContent;
-    const otherSetContent = platform === ANDROID ? setIosContent : setAndroidContent;
-    const otherContent = platform === ANDROID ? iosContent : androidContent;
-    const currentContent = platform === ANDROID ? androidContent : iosContent;
-    const previousMediaType = currentContent.mediaType;
-    if (previousMediaType !== value) {
-      if ((previousMediaType === VIDEO || previousMediaType === GIF)
-          && (value === IMAGE || value === NONE)) {
-        updateOnMpushVideoReUpload();
-      } else if ((previousMediaType === VIDEO && value === GIF)
-                 || (previousMediaType === GIF && value === VIDEO)) {
-        updateOnMpushVideoReUpload();
-      } else if (previousMediaType === IMAGE
-                 && (value === VIDEO || value === GIF)) {
-        updateOnMpushImageReUpload();
-      }
-    }
-    const newContent = { ...currentContent, mediaType: value };
-    setContent(newContent);
-    if (sameContent) {
-      const targetPlatform = platform === ANDROID ? IOS : ANDROID;
-      const synced = deepSyncContent(newContent, otherContent, targetPlatform);
-      otherSetContent(synced);
-    }
-  }, [sameContent, setAndroidContent, setIosContent, updateOnMpushImageReUpload, updateOnMpushVideoReUpload, androidContent, iosContent, deepSyncContent]);
-
-  // Handle tag selection
-  const handleTagSelect = useCallback((platform, tag, isTitle) => {
-    const setContent = platform === ANDROID ? setAndroidContent : setIosContent;
-    const otherSetContent = platform === ANDROID ? setIosContent : setAndroidContent;
-    const otherSetError = platform === ANDROID ? setIosTitleError : setAndroidTitleError;
-    const otherContent = platform === ANDROID ? iosContent : androidContent;
-    const field = isTitle ? 'title' : 'message';
-    let setError;
-    let validate;
-    if (isTitle) {
-      setError = platform === ANDROID ? setAndroidTitleError : setIosTitleError;
-      validate = validateTitle;
-    } else {
-      setError = platform === ANDROID ? setAndroidMessageError : setIosMessageError;
-      validate = validateMessage;
-    }
-    const currentContent = platform === ANDROID ? androidContent : iosContent;
-    const newValue = `${(currentContent[field] || '')}{{${tag}}}`;
-    const newContent = { ...currentContent, [field]: newValue };
-    setContent(newContent);
-    setError(validate(newValue));
-    if (sameContent) {
-      const targetPlatform = platform === ANDROID ? IOS : ANDROID;
-      const synced = deepSyncContent(newContent, otherContent, targetPlatform);
-      otherSetContent(synced);
-      otherSetError(validate(newValue));
-    }
-  }, [androidContent, iosContent, setAndroidContent, setIosContent, setAndroidTitleError, setIosTitleError, setAndroidMessageError, setIosMessageError, validateTitle, validateMessage, sameContent, deepSyncContent]);
-
-  // Handle CTA/button changes
-  const handleButtonChange = useCallback((platform, buttons) => {
-    const setContent = platform === ANDROID ? setAndroidContent : setIosContent;
-    const otherSetContent = platform === ANDROID ? setIosContent : setAndroidContent;
-    const otherContent = platform === ANDROID ? iosContent : androidContent;
-    const currentContent = platform === ANDROID ? androidContent : iosContent;
-    const newContent = { ...currentContent, buttons };
-    setContent(newContent);
-    if (sameContent) {
-      const targetPlatform = platform === ANDROID ? IOS : ANDROID;
-      const mappedButtons = Array.isArray(buttons)
-        ? buttons.map((btn) => ({
-            ...btn,
-            platform: targetPlatform,
-          }))
-        : [];
-      const synced = deepSyncContent({ ...newContent, buttons: mappedButtons }, otherContent, targetPlatform);
-      otherSetContent(synced);
-    }
-  }, [androidContent, iosContent, setAndroidContent, setIosContent, sameContent, deepSyncContent]);
-
-  // Handle action on click changes
-  const handleActionOnClickChange = useCallback((platform, checked) => {
-    const setContent = platform === ANDROID ? setAndroidContent : setIosContent;
-    const otherSetContent = platform === ANDROID ? setIosContent : setAndroidContent;
-    const otherContent = platform === ANDROID ? iosContent : androidContent;
-    const currentContent = platform === ANDROID ? androidContent : iosContent;
-    const newContent = { ...currentContent, actionOnClick: checked };
-    setContent(newContent);
-    if (sameContent) {
-      const targetPlatform = platform === ANDROID ? IOS : ANDROID;
-      const synced = deepSyncContent(newContent, otherContent, targetPlatform);
-      otherSetContent(synced);
-    }
-  }, [androidContent, iosContent, setAndroidContent, setIosContent, sameContent, deepSyncContent]);
-
-  // Handle link type changes
-  const handleLinkTypeChange = useCallback((platform, linkType) => {
-    const setContent = platform === ANDROID ? setAndroidContent : setIosContent;
-    const otherSetContent = platform === ANDROID ? setIosContent : setAndroidContent;
-    const otherContent = platform === ANDROID ? iosContent : androidContent;
-    const currentContent = platform === ANDROID ? androidContent : iosContent;
-    const newContent = { ...currentContent, linkType, deepLinkValue: '', externalLinkValue: '' };
-    setContent(newContent);
-    if (sameContent) {
-      const targetPlatform = platform === ANDROID ? IOS : ANDROID;
-      const synced = deepSyncContent(newContent, otherContent, targetPlatform);
-      otherSetContent(synced);
-    }
-  }, [androidContent, iosContent, setAndroidContent, setIosContent, sameContent, deepSyncContent]);
-
-  return {
-    handleTitleChange,
-    handleMessageChange,
-    handleTagSelect,
-    handleMediaTypeChange,
-    handleButtonChange,
-    handleActionOnClickChange,
-    handleLinkTypeChange,
-  };
-};
-
-export default usePlatformSync;