@openlettermarketing/olc-react-sdk 2.1.7 → 2.1.8

package/src/components/SidePanel/CustomQRCode/index.tsx

@@ -1,1070 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-// Import Polotno and third-party libraries
-import QRCode from 'qrcode';
-import { observer } from 'mobx-react-lite';
-import { SectionTab } from 'polotno/side-panel';
-import type { StoreType } from 'polotno/model/store';
-
-import { useDispatch, useSelector } from 'react-redux';
-import { AppDispatch, RootState } from '../../../redux/store';
-import { failure, success } from '../../../redux/actions/snackbarActions';
-import {
-  setQrUrl,
-  setUtmSource,
-  setUtmMedium,
-  setUtmCampaignName,
-  setCustomUtms,
-  clearQrFields,
-  setIsQR,
-  setQrDialog,
-  closeQrDialog,
-} from '../../../redux/actions/customQRCodeActions';
-import { uploadFile } from '../../../redux/actions/templateActions';
-
-// Utils
-import { MESSAGES } from '../../../utils/message';
-import { validURL } from '../../../utils/helper';
-import {
-  DISALLOWED_DOMAINS,
-  MERGE_UTM_PARAMS,
-  emojiRegex,
-} from '../../../utils/constants';
-
-//Components
-import GeneralSelect from '../../../components/GenericUIBlocks/GeneralSelect';
-import QRCodeModal from './V2/QRCodeModal';
-import DialogV2 from '../../../components/GenericUIBlocks/Dialog/V2';
-
-// UI Components
-import Input from '../../../components/GenericUIBlocks/Input';
-import Typography from '../../GenericUIBlocks/Typography';
-
-// Icons
-import CustomQRIcon from '../../../assets/images/templates/custom-qr-section-icon';
-import QRCodeIcon from '../../../assets/images/templates/qr-code';
-
-// @ts-ignore
-import Edit from '../../../assets/images/templates/edit.svg';
-// @ts-ignore
-import Archive from '../../../assets/images/templates/archive.svg';
-
-// @ts-ignore
-import ConfirmCloseIcon from '../../../assets/images/modal-icons/confirm-close-icon';
-// @ts-ignore
-import Actions from '../../../assets/images/templates/actions.svg'
-
-// styles
-import './styles.scss';
-
-interface CustomQRProps {
-  store: StoreType;
-  allowSenderFields: any;
-  allowPropertyFields: any;
-  excludedFields: any;
-  currentTheme?: string | null | undefined;
-  onGetQRCodes?: (payload: any) => Promise<any>;
-  onDeleteQRCodes?: (id: string | number) => Promise<void>;
-  onUploadQRCode?: (payload: any) => Promise<any>;
-  onEditQRCode?: (payload: any) => Promise<any>;
-}
-
-const cancelDialogStylesV2 = {
-  maxWidth: '567px',
-  minHeight: 'auto',
-  padding: '40px',
-};
-
-// define the new custom section
-const CustomQRCode = {
-  name: 'QR-Section',
-  Tab: (props: any) => (
-    <SectionTab name="QR" {...props} iconSize={20}>
-      <CustomQRIcon />
-    </SectionTab>
-  ),
-
-  // we need observer to update component automatically on any store changes
-  Panel: observer(
-    ({
-      store,
-      allowSenderFields,
-      allowPropertyFields,
-      excludedFields,
-      currentTheme,
-      onGetQRCodes,
-      onDeleteQRCodes,
-      onUploadQRCode,
-      onEditQRCode,
-    }: CustomQRProps) => {
-      // V2 State for API-driven functionality
-      const [qrCodes, setQrCodes] = useState<any[]>([]);
-      const [isLoading, setIsLoading] = useState(false);
-      const [isLoadingMore, setIsLoadingMore] = useState(false);
-      const [currentPage, setCurrentPage] = useState(1);
-      const [hasMore, setHasMore] = useState(true);
-      const [activeDropdown, setActiveDropdown] = useState<
-        string | number | null
-      >(null);
-      const [isEditing, setIsEditing] = useState(false);
-      const [selectedQR, setSelectedQR] = useState<any>(null);
-      const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
-      const [isLoadingDelete, setIsLoadingDelete] = useState(false);
-      const [saveQrLoading, setSaveQrLoading] = useState(false);
-
-      const [isActionsOpen, setIsActionsOpen] = useState<
-        string | number | null
-      >(null);
-      const [actionsDropdownUpward, setActionsDropdownUpward] = useState(false);
-
-      const qrCodesGridRef = React.useRef<HTMLDivElement>(null);
-      const dropdownRefs = React.useRef<Map<string | number, HTMLDivElement>>(
-        new Map()
-      );
-      const actionsRefs = React.useRef<Map<string | number, HTMLDivElement>>(
-        new Map()
-      );
-      const loadingTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
-      const isLoadingRef = React.useRef(false);
-
-      const noteStyles = {
-        fontWeight: '400',
-        fontSize: '12px',
-        color: '#000',
-        width: '100%',
-        maxWidth: '245px',
-        margin: '16px 0 20px',
-      };
-
-      const itemStyle = {
-        margin: 0,
-        fontSize: '12px',
-        fontWeight: '300',
-      };
-
-      const handleDialogChange = (model = '') => {
-        if (dialog.open) {
-          dispatch(closeQrDialog());
-        } else {
-          dispatch(setQrDialog(true, model));
-        }
-      };
-
-      const handleCloseDeleteDialog = () => {
-        setOpenDeleteDialog(false);
-      };
-
-      const handleOpenDeleteDialog = () => {
-        setOpenDeleteDialog(true);
-      };
-
-      const handleDialogClose = (model = '') => {
-        dispatch(closeQrDialog());
-        setIsEditing(false);
-        dispatch(setQrUrl(''));
-        dispatch(setUtmSource('direct mail'));
-        dispatch(setUtmMedium('QR Code'));
-        dispatch(setUtmCampaignName(''));
-        dispatch(setCustomUtms({}));
-      };
-
-
-      const dialog = useSelector((state: RootState) => state.customQRCode.dialog);
-      const url = useSelector((state: RootState) => state.customQRCode.url);
-      const utmSource = useSelector(
-        (state: RootState) => state.customQRCode.utmSource
-      );
-      const utmMedium = useSelector(
-        (state: RootState) => state.customQRCode.utmMedium
-      );
-      const utmCampaignName = useSelector(
-        (state: RootState) => state.customQRCode.utmCampaignName
-      );
-      const customUtms = useSelector(
-        (state: RootState) => state.customQRCode.customUtms
-      );
-      const isQR = useSelector((state: RootState) => state.customQRCode.isQR);
-
-      const dispatch: AppDispatch = useDispatch();
-
-      const defaultFields = useSelector(
-        (state: RootState) => state.templates.defaultDynamicFields
-      );
-
-      const defaultSenderFields = useSelector(
-        (state: RootState) => state.templates.defaultSenderFields
-      
-      );
-
-      const customFields = useSelector(
-        (state: RootState) => state.customFields.customFields
-      );
-
-      const customFieldsV2 = useSelector(
-        (state: RootState) => state.customFields.customFieldsV2
-      ) as Record<string, any>;
-
-      const defaultPropertyFields = useSelector(
-        (state: RootState) => state.templates.defaultPropertyFields
-      );
-
-      const excludedLabels = ['utm_c_first_name c_last_name'];
-
-      let flattenedFieldsV2 = [];
-      if (customFieldsV2.length > 0) {
-        flattenedFieldsV2 = customFieldsV2?.flatMap(
-          (section: { fields: any }) => section.fields
-        );
-      }
-
-      const allFields = [
-        ...defaultFields,
-        ...customFields,
-        ...flattenedFieldsV2,
-        ...(allowSenderFields ? defaultSenderFields : []),
-        ...(allowPropertyFields ? defaultPropertyFields : []),
-        ...(allowPropertyFields
-          ? [
-            {
-              value: 'ROS.PROPERTY_OFFER',
-              key: '{{ROS.PROPERTY_OFFER}}',
-              defaultValue: '$123,456.00',
-            },
-          ]
-          : []),
-      ].filter(({ key }) => !excludedFields?.includes(key));
-
-      const utmFields = allFields
-        .map(({ key }) => ({
-          label: `utm_${key?.toLowerCase().replaceAll('.', '_').replaceAll(/[{}]/g, '')}`,
-        }))
-        .filter((utmField) => !excludedLabels.includes(utmField.label));
-
-      const utms = ['custom_utm_1', 'custom_utm_2', 'custom_utm_3'];
-
-      const el = store.selectedElements[0];
-
-      const clearQRFields = () => {
-        store.selectElements([]);
-        dispatch(clearQrFields());
-      };
-
-      const appendUtmParameters = (utmField: string, defaultValue: string) => {
-        let result = '';
-        const field = MERGE_UTM_PARAMS.find((field) => field.key === utmField);
-        if (field) {
-          result = `${field.value}=${defaultValue}`;
-        }
-        return result;
-      };
-
-      const validateQRCode = () => {
-        const validations = [
-          { value: utmSource, label: 'UTM Source' },
-          { value: utmMedium, label: 'UTM Medium' },
-          { value: utmCampaignName, label: 'UTM Campaign' },
-        ];
-
-        for (const { value, label } of validations) {
-          if (value.length >= 150) {
-            dispatch(failure(`${label} must be less than 150 characters`));
-            return false;
-          }
-          if (emojiRegex.test(value)) {
-            dispatch(failure(`Emoji are not allowed in ${label}`));
-            return false;
-          }
-        }
-
-        return true;
-      };
-
-      const containsDisallowedDomains = (str: string) => {
-        return DISALLOWED_DOMAINS.some((substring) => str.includes(substring));
-      };
-
-      // create svg image for QR code for input text
-      const getQR = (text: string) => {
-        return new Promise<string>((resolve, reject) => {
-          QRCode.toDataURL(
-            text || 'no-data',
-            {
-              type: 'image/png',
-              margin: 0,
-              color: {
-                dark: '#000000',
-                light: '#0000', // transparent background
-              },
-              scale: 10, // increase for higher resolution
-            },
-            (err: any, url: string) => {
-              if (err) return reject(err);
-              resolve(url); // returns base64 PNG image string
-            }
-          );
-        });
-      };
-
-      // Converts base64 data URL to File
-      const base64ToFile = (base64: string, filename: string): File => {
-        const arr = base64.split(',');
-        const mime = arr[0].match(/:(.*?);/)?.[1] || 'image/png';
-        const bstr = atob(arr[1]);
-        let n = bstr.length;
-        const u8arr = new Uint8Array(n);
-        while (n--) {
-          u8arr[n] = bstr.charCodeAt(n);
-        }
-        return new File([u8arr], filename, { type: mime });
-      };
-
-      const createCustomizeURL = (url: string) => {
-        let customURL = url;
-        let params = [];
-        if (utmSource) {
-          params.push(`utm_source=${utmSource.replace(/ /g, '_')}`);
-        }
-        if (utmMedium) {
-          params.push(`utm_medium=${utmMedium.replace(/ /g, '_')}`);
-        }
-        if (utmCampaignName) {
-          params.push(`utm_campaign=${utmCampaignName.replace(/ /g, '_')}`);
-        }
-
-        if (customUtms[utms[0]]?.label) {
-          const orignalField = `{{${customUtms[utms[0]]?.label.replace('utm_', '').replace('_', '.').toUpperCase()}}}`;
-          const defaultValue = allFields.find(
-            (field) => field.key === orignalField
-          )?.defaultValue;
-          const attachUtmKeys = appendUtmParameters(orignalField, defaultValue);
-          const mergeUtmParams =
-            attachUtmKeys && orignalField == '{{C.PHONE_NUMBER}}'
-              ? encodeURIComponent(
-                `${customUtms[utms[0]]?.label}=${defaultValue}&${attachUtmKeys}`
-              ).replace(/[\s\(\)]/g, '')
-              : attachUtmKeys
-                ? `${customUtms[utms[0]]?.label}=${defaultValue}&${attachUtmKeys}`
-                : `${customUtms[utms[0]]?.label}=${defaultValue}`;
-          params.push(mergeUtmParams);
-        }
-
-        if (customUtms[utms[1]]?.label) {
-          const orignalField = `{{${customUtms[utms[1]]?.label.replace('utm_', '').replace('_', '.').toUpperCase()}}}`;
-          const defaultValue = allFields.find(
-            (field) => field.key === orignalField
-          )?.defaultValue;
-          const attachUtmKeys = appendUtmParameters(orignalField, defaultValue);
-          const mergeUtmParams =
-            attachUtmKeys && orignalField == '{{C.PHONE_NUMBER}}'
-              ? encodeURIComponent(
-                `${customUtms[utms[1]]?.label}=${defaultValue}&${attachUtmKeys}`
-              ).replace(/[\s\(\)]/g, '')
-              : attachUtmKeys
-                ? `${customUtms[utms[1]]?.label}=${defaultValue}&${attachUtmKeys}`
-                : `${customUtms[utms[1]]?.label}=${defaultValue}`;
-          params.push(mergeUtmParams);
-        }
-
-        if (customUtms[utms[2]]?.label) {
-          const orignalField = `{{${customUtms[utms[2]]?.label.replace('utm_', '').replace('_', '.').toUpperCase()}}}`;
-          const defaultValue = allFields.find(
-            (field) => field.key === orignalField
-          )?.defaultValue;
-          const attachUtmKeys = appendUtmParameters(orignalField, defaultValue);
-          const mergeUtmParams =
-            attachUtmKeys && orignalField == '{{C.PHONE_NUMBER}}'
-              ? encodeURIComponent(
-                `${customUtms[utms[2]]?.label}=${defaultValue}&${attachUtmKeys}`
-              ).replace(/[\s\(\)]/g, '')
-              : attachUtmKeys
-                ? `${customUtms[utms[2]]?.label}=${defaultValue}&${attachUtmKeys}`
-                : `${customUtms[utms[2]]?.label}=${defaultValue}`;
-          params.push(mergeUtmParams);
-        }
-
-        if (params.length > 0) {
-          customURL += `/?${params.join('&')}`;
-        }
-
-        return encodeURI(customURL);
-      };
-
-      const addNewQRCode = async () => {
-        if (utmCampaignName) {
-          if (url) {
-            if (validURL(url) && !containsDisallowedDomains(url)) {
-              const isValidQR = validateQRCode();
-              if (!isValidQR) return false;
-
-              setSaveQrLoading(true);
-              const randomizedId = Math.random().toString(36).substring(2, 7);
-              const customQRUrl = createCustomizeURL(url);
-
-              const src = await getQR(customQRUrl);
-              if (currentTheme === 'v2' && onUploadQRCode && onGetQRCodes) {
-                const file = base64ToFile(src, `${utmCampaignName}-qr.png`);
-                const uploadedFile = await uploadFile(file);
-                if (!uploadedFile) {
-                  setSaveQrLoading(false);
-                  return dispatch(failure(MESSAGES.TEMPLATE.QR_SECTION.FAILED_QR));
-                }
-                const payload = {
-                  name: utmCampaignName,
-                  qrCodeJson: {
-                    name: utmCampaignName,
-                    url: url,
-                    qrImagePath: uploadedFile,
-                    utm_source: utmSource,
-                    utm_medium: utmMedium,
-                    utm_campaign_name: utmCampaignName,
-                    custom_utms: customUtms,
-                  },
-                };
-
-                try {
-                  await onUploadQRCode(payload);
-                  // Reset pagination and reload from first page
-                  setCurrentPage(1);
-                  setHasMore(true);
-                  await loadQRCodes(1, false, false);
-                  handleDialogClose(); // Close modal
-                  clearQRFields();
-                  setSaveQrLoading(false);
-                } catch (error) {
-                  setSaveQrLoading(false);
-                  console.error('Failed to create QR code:', error);
-                }
-              } else {
-                store.activePage.addElement({
-                  id: `qr-${randomizedId}`,
-                  type: 'image',
-                  name: 'qr',
-                  x: 50,
-                  y: 50,
-                  width: 100,
-                  height: 100,
-                  blurRadius: 0,
-                  keepRatio: true,
-                  src,
-                  custom: {
-                    url,
-                    utm_source: utmSource,
-                    utm_medium: utmMedium,
-                    utm_campaign_name: utmCampaignName,
-                    custom_utms: customUtms,
-                  },
-                });
-                clearQRFields();
-              }
-              setSaveQrLoading(false);
-            } else {
-              dispatch(failure(MESSAGES.TEMPLATE.QR_SECTION.INVALID_URL));
-            }
-          } else {
-            dispatch(failure(MESSAGES.TEMPLATE.QR_SECTION.EMPTY_QR));
-          }
-        } else {
-          dispatch(failure(MESSAGES.TEMPLATE.QR_SECTION.EMPTY_CAMPAIGN));
-        }
-      };
-
-      // V2 API Functions
-      const loadQRCodes = React.useCallback(
-        async (page: number = 1, append: boolean = false, loading = true) => {
-          if (!onGetQRCodes) return;
-
-          if (isLoadingRef.current) return;
-          isLoadingRef.current = true;
-
-          if (page === 1 && loading) {
-            setIsLoading(true);
-          } else {
-            setIsLoadingMore(true);
-          }
-
-          try {
-            const payload = {
-              page,
-              pageSize: 15,
-            };
-
-            const qrCodesData = await onGetQRCodes(payload);
-
-            if (qrCodesData && Array.isArray(qrCodesData.rows)) {
-              const normalized = qrCodesData.rows.map((qr: any) => ({
-                id: qr.id,
-                name: qr?.qrCodeJson?.name || qr?.qrCodeJson?.utm_campaign_name || '',
-                url: qr.qrCodeJson.url,
-                qrImagePath: qr.qrCodeJson.qrImagePath,
-                status: qr.status,
-                utm_source: qr.qrCodeJson.utm_source,
-                utm_medium: qr.qrCodeJson.utm_medium,
-                utm_campaign_name: qr.qrCodeJson.utm_campaign_name,
-                custom_utms: qr.qrCodeJson.custom_utms,
-              }));
-
-              if (append && page > 1) {
-                setQrCodes((prevQrCodes) => {
-                  const existingIds = new Set(
-                    prevQrCodes.map((qr: any) => qr.id)
-                  );
-                  const newQrCodes = normalized.filter(
-                    (qr: any) => !existingIds.has(qr.id)
-                  );
-                  return [...prevQrCodes, ...newQrCodes];
-                });
-              } else {
-                setQrCodes(normalized);
-              }
-
-              const hasMorePages =
-                qrCodesData.currentPage < qrCodesData.lastPage;
-              setHasMore(hasMorePages);
-              setCurrentPage(qrCodesData.currentPage);
-            } else {
-              if (!append) {
-                setQrCodes([]);
-              }
-              setHasMore(false);
-            }
-          } catch (error) {
-            console.error('Failed to load QR codes:', error);
-          } finally {
-            setIsLoading(false);
-            setIsLoadingMore(false);
-            isLoadingRef.current = false;
-          }
-        },
-        [onGetQRCodes]
-      );
-
-      const loadMoreQRCodes = React.useCallback(async () => {
-        if (!hasMore || isLoadingMore || isLoading) return;
-        await loadQRCodes(currentPage + 1, true);
-      }, [hasMore, isLoadingMore, isLoading, currentPage, loadQRCodes]);
-
-      const handleScroll = React.useCallback(() => {
-        if (!qrCodesGridRef.current || !hasMore || isLoadingMore || isLoading)
-          return;
-
-        const { scrollTop, scrollHeight, clientHeight } = qrCodesGridRef.current;
-        const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
-
-        if (scrollPercentage > 0.75) {
-          if (loadingTimeoutRef.current) {
-            clearTimeout(loadingTimeoutRef.current);
-          }
-
-          loadingTimeoutRef.current = setTimeout(() => {
-            loadMoreQRCodes();
-          }, 300);
-        }
-      }, [hasMore, isLoadingMore, isLoading, loadMoreQRCodes]);
-
-      const handleQRCodeSelect = async (qrCode: any) => {
-        let customQRUrl = '';
-        let src: any = '';
-        let customData = {};
-
-        if (currentTheme === 'v2') {
-          customQRUrl = createCustomizeURL(qrCode.url);
-          src = qrCode.qrImagePath;
-          customData = {
-            url: qrCode.url,
-            qrCodeInstanceId: qrCode.id,
-            qrImagePath: qrCode.qrImagePath,
-            utm_source: qrCode.utm_source,
-            utm_medium: qrCode.utm_medium,
-            utm_campaign_name: qrCode.utm_campaign_name,
-            custom_utms: qrCode.custom_utms,
-          }
-        } else {
-          customQRUrl = createCustomizeURL(qrCode.url);
-          src = await getQR(customQRUrl);
-          customData = {
-            url: qrCode.url,
-            utm_source: qrCode.utmSource,
-            utm_medium: qrCode.utmMedium,
-            utm_campaign_name: qrCode.utmCampaign,
-            custom_utms: qrCode.customUtms,
-          }
-        }
-
-        const randomizedId = Math.random().toString(36).substring(2, 7);
-        store.activePage.addElement({
-          id: `qr-${randomizedId}`,
-          type: 'image',
-          name: 'qr',
-          x: 50,
-          y: 50,
-          width: 100,
-          height: 100,
-          blurRadius: 0,
-          keepRatio: true,
-          src,
-          custom: customData,
-        });
-      };
-
-      const handleDeleteQRCode = async (qrCodeId: string | number) => {
-        if (!onDeleteQRCodes) return;
-        setIsLoadingDelete(true);
-        try {
-          await onDeleteQRCodes(qrCodeId);
-          setQrCodes((prev) => prev.filter((qr) => qr.id !== qrCodeId));
-          setActiveDropdown(null);
-          setIsActionsOpen(null);
-        } catch (error) {
-          console.error('Failed to delete QR code:', error);
-        }
-        finally {
-          setIsLoadingDelete(false);
-        }
-      };
-
-      const handleEditQRCode = async (qrCode: any) => {
-        setIsEditing(true);
-        setSelectedQR(qrCode);
-        dispatch(setQrUrl(qrCode.url ?? ''));
-        dispatch(setUtmSource(qrCode.utm_source ?? ''));
-        dispatch(setUtmMedium(qrCode.utm_medium ?? ''));
-        dispatch(setUtmCampaignName(qrCode.utm_campaign_name ?? ''));
-        dispatch(setCustomUtms(qrCode.custom_utms ?? {}));
-
-        handleDialogChange('qr-modal');
-        setIsActionsOpen(null);
-      };
-
-      const toggleActions = (
-        qrCodeId: string | number,
-        event: React.MouseEvent
-      ) => {
-        event.stopPropagation();
-        const isOpening = isActionsOpen !== qrCodeId;
-        if (isOpening) {
-          const triggerEl = actionsRefs.current.get(qrCodeId);
-          const scrollContainer = qrCodesGridRef.current;
-          const dropdownHeight = 80;
-          if (triggerEl && scrollContainer) {
-            const triggerRect = triggerEl.getBoundingClientRect();
-            const containerRect = scrollContainer.getBoundingClientRect();
-            const spaceBelow = containerRect.bottom - triggerRect.bottom;
-            setActionsDropdownUpward(spaceBelow < dropdownHeight);
-          } else {
-            setActionsDropdownUpward(false);
-          }
-        }
-        setIsActionsOpen(isActionsOpen === qrCodeId ? null : qrCodeId);
-      };
-
-      // if selection is changed we need to update input value
-      const updateQRCode = async () => {
-        if (url) {
-          if (validURL(url) && !containsDisallowedDomains(url)) {
-            const isValidQR = validateQRCode();
-            if (!isValidQR) return false;
-
-            setSaveQrLoading(true);
-            const customQRUrl = createCustomizeURL(url);
-            const src = await getQR(customQRUrl);
-
-            if (currentTheme === 'v2' && onEditQRCode && onGetQRCodes) {
-              const file = base64ToFile(src, `${utmCampaignName}-qr.png`);
-              const uploadedFile = await uploadFile(file);
-              const payload = {
-                name: utmCampaignName,
-                id: selectedQR?.id,
-                qrCodeJson: {
-                  name: utmCampaignName,
-                  url: url,
-                  qrImagePath: uploadedFile,
-                  utm_source: utmSource || null,
-                  utm_medium: utmMedium || null,
-                  utm_campaign_name: utmCampaignName,
-                  custom_utms: customUtms,
-                },
-              };
-
-              try {
-                await onEditQRCode(payload);
-                // Reset pagination and reload from first page
-                setCurrentPage(1);
-                setHasMore(true);
-                await loadQRCodes(1, false, false);
-                handleDialogClose(); // Close modal
-                clearQRFields();
-                setSaveQrLoading(false);
-              } catch (error) {
-                setSaveQrLoading(false);
-                console.error('Failed to create QR code:', error);
-              }
-            } else if (el?.name === 'qr' && url) {
-              el.set({
-                src,
-                custom: {
-                  url,
-                  utm_source: utmSource,
-                  utm_medium: utmMedium,
-                  utm_campaign_name: utmCampaignName,
-                  custom_utms: customUtms,
-                },
-              });
-              clearQRFields();
-              setSaveQrLoading(false);
-            }
-          } else {
-            dispatch(failure(MESSAGES.TEMPLATE.QR_SECTION.INVALID_URL));
-          }
-        } else {
-          dispatch(failure(MESSAGES.TEMPLATE.QR_SECTION.EMPTY_QR));
-        }
-      };
-
-      // Handler to update dropdown values
-      const handleSelect = (utmKey: string, value: any) => {
-        const updatedUtms = { ...customUtms };
-        if (value === null) {
-          delete updatedUtms[utmKey];
-        } else {
-          updatedUtms[utmKey] = value;
-        }
-        dispatch(setCustomUtms(updatedUtms));
-      };
-
-      // if selection is changed we need to update input value
-      useEffect(() => {
-        if (el?.name === 'qr' && currentTheme !== 'v2') {
-          dispatch(setIsQR(el?.name === 'qr'));
-          dispatch(setQrUrl(el?.custom?.url || el?.custom?.value || ''));
-          dispatch(setUtmSource(el?.custom?.utm_source || 'direct mail'));
-          dispatch(setUtmMedium(el?.custom?.utm_medium || 'QR Code'));
-          dispatch(setUtmCampaignName(el?.custom?.utm_campaign_name || ''));
-          if (Object.values(el?.custom?.custom_utms || {}).length) {
-            dispatch(setCustomUtms(el?.custom?.custom_utms));
-          } else {
-            dispatch(setCustomUtms({}));
-          }
-        } else if (isQR && el?.name !== 'qr') {
-          dispatch(clearQrFields());
-        }
-      }, [isQR, el]);
-
-      // Handle click outside to close actions menu
-      useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-          // Close actions if clicking outside the currently open actions container
-          if (isActionsOpen !== null) {
-            const actionsElement = actionsRefs.current.get(isActionsOpen);
-            if (
-              actionsElement &&
-              !actionsElement.contains(event.target as Node)
-            ) {
-              setIsActionsOpen(null);
-            }
-          }
-
-          // V2: Handle dropdowns
-          if (activeDropdown) {
-            const dropdownElement = dropdownRefs.current.get(activeDropdown);
-            if (
-              dropdownElement &&
-              !dropdownElement.contains(event.target as Node)
-            ) {
-              setActiveDropdown(null);
-            }
-          }
-        };
-
-        if (isActionsOpen !== null || activeDropdown !== null) {
-          document.addEventListener('mousedown', handleClickOutside);
-        }
-
-        return () => {
-          document.removeEventListener('mousedown', handleClickOutside);
-        };
-      }, [isActionsOpen, activeDropdown]);
-
-      // V2: Load QR codes on mount if callbacks are provided
-      useEffect(() => {
-        if (onGetQRCodes) {
-          loadQRCodes(1, false);
-        }
-      }, [onGetQRCodes, loadQRCodes]);
-
-      // V2: Setup scroll event listener on the list container
-      useEffect(() => {
-        const listElement = qrCodesGridRef.current;
-        if (listElement && onGetQRCodes) {
-          listElement.addEventListener('scroll', handleScroll);
-          return () => {
-            listElement.removeEventListener('scroll', handleScroll);
-            if (loadingTimeoutRef.current) {
-              clearTimeout(loadingTimeoutRef.current);
-            }
-          };
-        }
-      }, [
-        hasMore,
-        isLoadingMore,
-        isLoading,
-        currentPage,
-        handleScroll,
-        onGetQRCodes,
-      ]);
-
-      return (
-        <>
-          {currentTheme === 'v2' ? (
-            <>
-              <div
-                className="qr-section-v2-container"
-                style={{
-                  padding: '14px',
-                }}
-              >
-                <div
-                  className="qr-code-wrapper qr-code-wrapper-sticky"
-                  onClick={() => handleDialogChange('qr-modal')}
-                >
-                  <QRCodeIcon />
-                  <button className="qr-submit-btn-new">Create QR-Code</button>
-                </div>
-                <Typography variant="h6" style={noteStyles}>
-                  {MESSAGES.TEMPLATE.QR_SECTION.QR_NOTE}
-                </Typography>
-
-                {/* V2 QR Codes List when callbacks are provided */}
-                {onGetQRCodes && (
-                  <div
-                    className="qr-codes-list-scroll"
-                    ref={qrCodesGridRef}
-                  >
-                    <div className="qr-codes-grid">
-                    {isLoading ? (
-                      <div className="loading-state">Loading QR codes...</div>
-                    ) : qrCodes.length === 0 ? (
-                      <div className="empty-state">No QR codes created yet</div>
-                    ) : (
-                      <>
-                        {qrCodes.map((qrCode) => (
-                          <div key={qrCode.id} className="qr-card" onClick={() => handleQRCodeSelect(qrCode)}>
-                            <img
-                              src={qrCode.qrImagePath}
-                              alt="code"
-                              style={{ width: '30px', height: '30px' }}
-                            />
-                            <div
-                              className="qr-card-content"
-                            >
-                              <Typography
-                                style={{
-                                  fontWeight: '600',
-                                  fontSize: '12px',
-                                  color: '#545454',
-                                  margin: 0,
-                                }}
-                              >
-                                {qrCode.name}
-                              </Typography>
-                              <Typography
-                                style={{
-                                  fontWeight: '400',
-                                  fontSize: '12px',
-                                  color: '#54545499',
-                                  margin: 0,
-                                }}
-                              >
-                                {qrCode.status}
-                              </Typography>
-                            </div>
-                            {(onEditQRCode || onDeleteQRCodes) && <div
-                              className="actions-container"
-                              ref={(el) => {
-                                if (el) actionsRefs.current.set(qrCode.id, el);
-                              }}
-                            >
-                              <div
-                                className="actions"
-                                onClick={(e) => { toggleActions(qrCode.id, e); e.stopPropagation(); }}
-                              >
-                                <img src={Actions} alt='actions' />
-                              </div>
-                              {/* Actions */}
-                              {isActionsOpen === qrCode.id && (
-                                <div
-                                  className={`actions-wrapper${actionsDropdownUpward ? ' actions-wrapper-up' : ''}`}
-                                >
-                                  {onEditQRCode && (
-                                    <div
-                                      className="action-item"
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleEditQRCode(qrCode);
-                                      }}
-                                    >
-                                      <img src={Edit} alt="edit" />
-                                      <Typography style={itemStyle}>
-                                        Edit
-                                      </Typography>
-                                    </div>
-                                  )}
-                                  {onDeleteQRCodes && (
-                                    <div
-                                      className="action-item"
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleOpenDeleteDialog();
-                                        setSelectedQR(qrCode.id);
-                                      }}
-                                    >
-                                      <img src={Archive} alt="Archive" />
-                                      <Typography style={itemStyle}>
-                                        Archive
-                                      </Typography>
-                                    </div>
-                                  )}
-                                </div>
-                              )}
-                            </div>}
-                          </div>
-                        ))}
-                        {/* Loading indicator for pagination */}
-                        {isLoadingMore && (
-                          <div className="loading-more">
-                            <div className="loading-state">
-                              Loading more QR codes...
-                            </div>
-                          </div>
-                        )}
-                      </>
-                    )}
-                    </div>
-                  </div>
-                )}
-              </div>
-              {dialog.open && (
-                <QRCodeModal
-                  show={dialog.open}
-                  utms={utms}
-                  utmFields={utmFields}
-                  isEditing={isEditing}
-                  handleSelect={handleSelect}
-                  handleDialogChange={handleDialogChange}
-                  handleClose={handleDialogClose}
-                  setUtmCampaignName={setUtmCampaignName}
-                  setQrUrl={setQrUrl}
-                  setUtmSource={setUtmSource}
-                  setUtmMedium={setUtmMedium}
-                  setCustomUtms={setCustomUtms}
-                  addNewQRCode={isEditing ? updateQRCode : addNewQRCode}
-                  loading={saveQrLoading}
-                />
-              )}
-              {openDeleteDialog && (
-                <DialogV2
-                  icon={<ConfirmCloseIcon fill='var(--primary-color)' />}
-                  customStyles={cancelDialogStylesV2}
-                  open={openDeleteDialog}
-                  handleClose={handleCloseDeleteDialog}
-                  title='Delete QR Code'
-                  subHeading=''
-                  description='Are you sure you want to delete this QR code?'
-                  onSubmit={() => {
-                    handleDeleteQRCode(selectedQR);
-                    handleCloseDeleteDialog();
-                  }}
-                  onCancel={handleCloseDeleteDialog}
-                  cancelText='No'
-                  submitText='Yes'
-                  isGallery={false}
-                  loading={isLoadingDelete}
-                />)}
-            </>
-          ) : (
-            <>
-              <button
-                className="qr-submit-btn"
-                onClick={isQR ? updateQRCode : addNewQRCode}
-              >
-                {isQR
-                  ? MESSAGES.TEMPLATE.QR_SECTION.UPDATE_BUTTON
-                  : MESSAGES.TEMPLATE.QR_SECTION.SUBMIT_BUTTON}
-              </button>
-              <div className="qr-input-wrapper">
-                <label>QR URL*:</label>
-                <Input
-                  type="text"
-                  onChange={(e) => {
-                    dispatch(setQrUrl(e.target.value));
-                  }}
-                  placeholder={MESSAGES.TEMPLATE.QR_SECTION.QR_PLACEHOLDER}
-                  value={url}
-                  qrField={true}
-                />
-              </div>
-              <div className="qr-input-wrapper">
-                <label>UTM Source:</label>
-                <Input
-                  type="text"
-                  onChange={(e) => {
-                    dispatch(setUtmSource(e.target.value));
-                  }}
-                  placeholder={'Enter UTM Source'}
-                  value={utmSource}
-                  qrField={true}
-                />
-              </div>
-              <div className="qr-input-wrapper">
-                <label>UTM Medium:</label>
-                <Input
-                  type="text"
-                  onChange={(e) => {
-                    dispatch(setUtmMedium(e.target.value));
-                  }}
-                  placeholder={'Enter UTM Medium'}
-                  value={utmMedium}
-                  qrField={true}
-                />
-              </div>
-              <div className="qr-input-wrapper">
-                <label>UTM Campaign Name*:</label>
-                <Input
-                  type="text"
-                  onChange={(e) => {
-                    dispatch(setUtmCampaignName(e.target.value));
-                  }}
-                  placeholder={'Enter UTM Campaign Name'}
-                  value={utmCampaignName}
-                  qrField={true}
-                />
-              </div>
-              {utms?.map((utm, idx) => {
-                return (
-                  <div className="qr-input-wrapper" key={idx}>
-                    <label>{utm.toUpperCase().replace(/\_/g, ' ')}:</label>
-                    <GeneralSelect
-                      placeholder={`Search / Select Custom UTM ${idx + 1}`}
-                      options={utmFields as any}
-                      setSelectedValue={(value: any) =>
-                        handleSelect(utm, value)
-                      }
-                      selectedValue={customUtms[utm] || (null as any)}
-                      builderSelect={true}
-                      clearField={true}
-                      search={true}
-                      qrField={true}
-                      isError={false}
-                      gallerySelect={false}
-                    />
-                  </div>
-                );
-              })}
-            </>
-          )}
-        </>
-      );
-    }
-  ),
-};
-
-export default CustomQRCode;