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

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

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,46 @@
+.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;
+    }
+  }
+}