@openlettermarketing/olc-react-sdk 2.1.6 → 2.1.8

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

@@ -1,172 +0,0 @@
-import React from 'react'
-
-// hoooks
-import { useDispatch, useSelector } from 'react-redux';
-import { AppDispatch, RootState } from '../../../../../redux/store';
-
-// Components
-import Dialog from '../../../../GenericUIBlocks/Dialog/V2';
-import GeneralSelect from '../../../../GenericUIBlocks/GeneralSelect';
-
-// Messages
-import { MESSAGES } from '../../../../../utils/message';
-
-// Icons
-// @ts-ignore
-import Input from '../../../../GenericUIBlocks/Input';
-
-// Styles
-import './styles.scss'
-
-const designDialogStyles = {
-    maxWidth: '488px',
-    backgroundColor: '#fff',
-    padding: '39px',
-};
-
-// Interface for QRCodeModal props
-interface QRCodeModalProps {
-    show: boolean;
-    utms?: any;
-    utmFields?: any;
-    handleSelect?: any;
-    isEditing?: boolean;
-    setQrUrl: (value: string) => void;
-    setUtmSource: (value: string) => void;
-    setUtmMedium: (value: string) => void;
-    setCustomUtms: (utms: string[]) => void;
-    handleDialogChange: (model: string) => void;
-    handleClose: () => void;
-    setUtmCampaignName: (value: string) => void;
-    addNewQRCode: () => void;
-    loading: boolean;
-}
-
-const QRCodeModal: React.FC<QRCodeModalProps> = ({
-    show,
-    utms,
-    utmFields,
-    handleSelect,
-    isEditing,
-    handleDialogChange,
-    handleClose,
-    setUtmCampaignName,
-    setQrUrl,
-    setUtmSource,
-    setUtmMedium,
-    addNewQRCode,
-    loading
-}) => {
-
-    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();
-
-    return (
-        <Dialog
-            title={isEditing ? MESSAGES.QR_CODE_MODAL.UPDATE_TITLE : MESSAGES.QR_CODE_MODAL.CREATE_TITLE}
-            subHeading={''}
-            description={''}
-            open={show}
-            handleClose={() => handleClose()}
-            onCancel={() => handleClose()}
-            onSubmit={() => addNewQRCode()}
-            customStyles={designDialogStyles}
-            cancelText="Cancel"
-            submitText="Save"
-            currentTheme="v2"
-            isQRCode={true}
-            loading={loading}
-        >
-            <div className="qr-modal-input-wrapper">
-                <Input
-                    type="text"
-                    value={utmCampaignName}
-                    onChange={(e: any) => {
-                        dispatch(setUtmCampaignName(e.target.value));
-                    }}
-                    placeholder={MESSAGES.QR_CODE_MODAL.INPUT.PLACEHOLDER}
-                    inputIcon={false}
-                    label={MESSAGES.QR_CODE_MODAL.INPUT.LABEL}
-                    currentTheme="v2"
-                    required={true}
-                />
-                <Input
-                    type="text"
-                    value={url}
-                    onChange={(e: any) => {
-                        dispatch(setQrUrl(e.target.value));
-                    }}
-                    placeholder="Enter QR URL"
-                    inputIcon={false}
-                    label="QR URL"
-                    currentTheme="v2"
-                    required={true}
-                />
-                <div className="utm-inputs">
-                    <Input
-                        type="text"
-                        value={utmSource}
-                        onChange={(e: any) => {
-                            dispatch(setUtmSource(e.target.value));
-                        }}
-                        placeholder="Enter UTM Source"
-                        inputIcon={false}
-                        error={''}
-                        label="UTM Source"
-                        currentTheme="v2"
-                        isClearable
-                        removeSearchInput={() => {
-                            dispatch(setUtmSource(''));
-                        }}
-                    />
-                    <Input
-                        type="text"
-                        value={utmMedium}
-                        onChange={(e: any) => {
-                            dispatch(setUtmMedium(e.target.value));
-                        }}
-                        placeholder="Enter UTM Medium"
-                        inputIcon={false}
-                        error={''}
-                        label="UTM Medium"
-                        currentTheme="v2"
-                        isClearable
-                        removeSearchInput={() => {
-                            dispatch(setUtmMedium(''));
-                        }}
-                    />
-                </div>
-
-                {utms?.map((utm: string, idx: any) => {
-                    return (
-                        <div className="qr-input-wrapper-v2" 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}
-                                currentTheme="v2"
-                            />
-                        </div>
-                    );
-                })}
-            </div>
-        </Dialog>
-    )
-}
-
-export default QRCodeModal;

package/src/components/SidePanel/CustomQRCode/V2/QRCodeModal/styles.scss

@@ -1,46 +0,0 @@
-.qr-modal-input-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-    margin: 24px 0;
-
-    .utm-inputs{
-        display: flex;
-        gap: 8px;
-        width: 100%;
-    }
-}
-
-.qr-code-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 0.5px solid #0000003D;
-  gap: 8px;
-  border-radius: 4px;
-  padding: 8px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-
-  &:hover{
-    background-color: #f5f5f5;
-  }
-
-  .qr-submit-btn-new {
-    padding: 0;
-    background-color: transparent;
-    color: #000;
-    border: none;
-    font-weight: 400;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    &:focus{
-      outline: none;
-    }
-    &:hover{
-      background-color: transparent;
-    }
-  }
-}