@openlettermarketing/olc-react-sdk 2.1.4 → 2.1.5-beta.2

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

@@ -0,0 +1,1070 @@
+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.utmSource || 'direct mail'));
+        dispatch(setUtmMedium(qrCode.utmMedium || 'QR Code'));
+        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,
+                  utm_medium: utmMedium,
+                  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;