Feat/action voxel

frontend-dev/src/Utils/StaticData/tutorialLinks.js

@@ -602,6 +602,10 @@ const tutorialLinks = {
   lmfwc: {
     youTubeLink: '#',
     docLink: '#'
+  },
+  voxel: {
+    youTubeLink: '#',
+    docLink: 'https://bit-integrations.com/wp-docs/actions/voxel-integrations-as-an-action/'
   }
 }
 export default tutorialLinks

frontend-dev/src/components/AllIntegrations/EditInteg.jsx

@@ -161,6 +161,7 @@ const EditJetEngine = lazy(() => import('./JetEngine/EditJetEngine'))
 const EditHighLevel = lazy(() => import('./HighLevel/EditHighLevel'))
 const EditTheEventsCalendar = lazy(() => import('./TheEventsCalendar/EditTheEventsCalendar'))
 const EditLMFWC = lazy(() => import('./LMFWC/EditLMFWC'))
+const EditVoxel = lazy(() => import('./Voxel/EditVoxel'))
 
 const loaderStyle = {
   display: 'flex',
@@ -549,6 +550,8 @@ const IntegType = memo(({ allIntegURL, flow }) => {
       return <EditTheEventsCalendar allIntegURL={allIntegURL} />
     case 'License Manager For WooCommerce':
       return <EditLMFWC allIntegURL={allIntegURL} />
+    case 'Voxel':
+      return <EditVoxel allIntegURL={allIntegURL} />
     default:
       return <Loader style={loaderStyle} />
   }

frontend-dev/src/components/AllIntegrations/IntegInfo.jsx

@@ -192,6 +192,7 @@ const TheEventsCalendarAuthorization = lazy(
 const LMFWCAuthorization = lazy(
   () => import('./LMFWC/LMFWCAuthorization')
 )
+const VoxelAuthorization = lazy(() => import('./Voxel/VoxelAuthorization'))
 
 export default function IntegInfo() {
   const { id, type } = useParams()
@@ -585,6 +586,10 @@ export default function IntegInfo() {
         return (
           <LMFWCAuthorization licenseManagerConf={integrationConf} step={1} isInfo />
         )
+      case 'Voxel':
+        return (
+          <VoxelAuthorization voxelConf={integrationConf} step={1} isInfo />
+        )
       default:
         return <></>
     }

frontend-dev/src/components/AllIntegrations/NewInteg.jsx

@@ -162,6 +162,7 @@ const JetEngine = lazy(() => import('./JetEngine/JetEngine'))
 const HighLevel = lazy(() => import('./HighLevel/HighLevel'))
 const TheEventsCalendar = lazy(() => import('./TheEventsCalendar/TheEventsCalendar'))
 const LMFWC = lazy(() => import('./LMFWC/LMFWC'))
+const Voxel = lazy(() => import('./Voxel/Voxel'))
 
 export default function NewInteg({ allIntegURL }) {
   const { integUrlName } = useParams()
@@ -1532,6 +1533,15 @@ export default function NewInteg({ allIntegURL }) {
             setFlow={setFlow}
           />
         )
+      case 'Voxel':
+        return (
+          <Voxel
+            allIntegURL={allIntegURL}
+            formFields={flow?.triggerData?.fields}
+            flow={flow}
+            setFlow={setFlow}
+          />
+        )
       default:
         return <></>
     }

frontend-dev/src/components/AllIntegrations/Voxel/EditVoxel.jsx

@@ -0,0 +1,113 @@
+/* eslint-disable no-param-reassign */
+
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
+import { __ } from '../../../Utils/i18nwrap'
+import SnackMsg from '../../Utilities/SnackMsg'
+import SetEditIntegComponents from '../IntegrationHelpers/SetEditIntegComponents'
+import { saveActionConf } from '../IntegrationHelpers/IntegrationHelpers'
+import IntegrationStepThree from '../IntegrationHelpers/IntegrationStepThree'
+import VoxelIntegLayout from './VoxelIntegLayout'
+import toast from 'react-hot-toast'
+import { checkMappedFields, handleInput } from './voxelCommonFunctions'
+import { POST_TYPE_TASK_ARRAY, TASKS } from './voxelConstants'
+
+function EditVoxel({ allIntegURL }) {
+  const navigate = useNavigate()
+  const [flow, setFlow] = useRecoilState($newFlow)
+  const [voxelConf, setVoxelConf] = useRecoilState($actionConf)
+  const [isLoading, setIsLoading] = useState(false)
+  const [loading, setLoading] = useState({
+    auth: false,
+    PostTypes: false,
+    postFields: false,
+    posts: false,
+  })
+  const [snack, setSnackbar] = useState({ show: false })
+  const formField = useRecoilValue($formFields)
+
+  const saveConfig = () => {
+    if (!voxelConf.selectedTask) {
+      toast.error(__('Please select a task!', 'bit-integrations'))
+      return
+    }
+
+    if ((voxelConf.selectedTask === TASKS.NEW_POST || voxelConf.selectedTask === TASKS.UPDATE_POST) && !voxelConf.selectedPostType) {
+      toast.error(__('Please select a post type!', 'bit-integrations'))
+      return
+    }
+
+    if (POST_TYPE_TASK_ARRAY.includes(voxelConf.selectedTask) && !voxelConf.selectedPostStatus) {
+      toast.error(__('Please select a post status!', 'bit-integrations'))
+      return
+    }
+
+    if ((voxelConf.selectedTask === TASKS.UPDATE_POST || voxelConf.selectedTask === TASKS.UPDATE_COLLECTION_POST) && !voxelConf.selectedPost) {
+      toast.error(__('Please select a post!', 'bit-integrations'))
+      return
+    }
+
+    if (!checkMappedFields(voxelConf)) {
+      toast.error(__('Please map mandatory fields!', 'bit-integrations'))
+      return
+    }
+
+    saveActionConf({
+      flow,
+      allIntegURL,
+      conf: voxelConf,
+      navigate,
+      edit: 1,
+      setLoading,
+      setSnackbar
+    })
+  }
+
+  return (
+    <div style={{ width: 900 }}>
+      <SnackMsg snack={snack} setSnackbar={setSnackbar} />
+
+      <div className="flx mt-3">
+        <b className="wdt-200 d-in-b">{__('Integration Name:', 'bit-integrations')}</b>
+        <input
+          className="btcd-paper-inp w-5"
+          onChange={(e) => handleInput(e, voxelConf, setVoxelConf)}
+          name="name"
+          defaultValue={voxelConf.name || ''}
+          type="text"
+          placeholder={__('Integration Name...', 'bit-integrations')}
+        />
+      </div>
+      <br />
+
+      <SetEditIntegComponents entity={flow.triggered_entity} setSnackbar={setSnackbar} />
+      <VoxelIntegLayout
+        formID={flow.triggered_entity_id}
+        formFields={formField}
+        handleInput={(e) =>
+          handleInput(e, voxelConf, setVoxelConf, setLoading, setSnackbar)
+        }
+        voxelConf={voxelConf}
+        setVoxelConf={setVoxelConf}
+        loading={loading}
+        setLoading={setLoading}
+        setSnackbar={setSnackbar}
+      />
+
+      <IntegrationStepThree
+        edit
+        saveConfig={saveConfig}
+        disabled={false}
+        isLoading={isLoading}
+        dataConf={voxelConf}
+        setDataConf={setVoxelConf}
+        formFields={formField}
+      />
+      <br />
+    </div>
+  )
+}
+
+export default EditVoxel

frontend-dev/src/components/AllIntegrations/Voxel/IntegrationHelpers.jsx

@@ -0,0 +1,27 @@
+/* eslint-disable no-unused-expressions */
+
+export const addFieldMap = (i, confTmp, setConf) => {
+  const newConf = { ...confTmp }
+  newConf.field_map.splice(i, 0, {})
+  setConf({ ...newConf })
+}
+
+export const delFieldMap = (i, confTmp, setConf) => {
+  const newConf = { ...confTmp }
+  if (newConf.field_map.length > 1) {
+    newConf.field_map.splice(i, 1)
+  }
+
+  setConf({ ...newConf })
+}
+
+export const handleFieldMapping = (event, index, conftTmp, setConf) => {
+  const newConf = { ...conftTmp }
+  newConf.field_map[index][event.target.name] = event.target.value
+
+  if (event.target.value === 'custom') {
+    newConf.field_map[index].customValue = ''
+  }
+
+  setConf({ ...newConf })
+}

frontend-dev/src/components/AllIntegrations/Voxel/Voxel.jsx

@@ -0,0 +1,152 @@
+/* eslint-disable no-console */
+/* eslint-disable no-unused-expressions */
+import { useState } from 'react'
+import 'react-multiple-select-dropdown-lite/dist/index.css'
+import { useNavigate } from 'react-router-dom'
+import toast from 'react-hot-toast'
+import { __ } from '../../../Utils/i18nwrap'
+import SnackMsg from '../../Utilities/SnackMsg'
+import Steps from '../../Utilities/Steps'
+import { saveIntegConfig } from '../IntegrationHelpers/IntegrationHelpers'
+import IntegrationStepThree from '../IntegrationHelpers/IntegrationStepThree'
+import { checkMappedFields } from './voxelCommonFunctions'
+import VoxelIntegLayout from './VoxelIntegLayout'
+import VoxelAuthorization from './VoxelAuthorization'
+import { POST_TYPE_TASK_ARRAY, TASKS } from './voxelConstants'
+
+function Voxel({ formFields, setFlow, flow, allIntegURL }) {
+  const navigate = useNavigate()
+  const [isLoading, setIsLoading] = useState(false)
+  const [loading, setLoading] = useState({
+    auth: false,
+    postTypes: false,
+    postFields: false,
+    posts: false,
+  })
+
+  const [step, setStep] = useState(1)
+  const [snack, setSnackbar] = useState({ show: false })
+
+  const [voxelConf, setVoxelConf] = useState({
+    name: 'Voxel',
+    type: 'Voxel',
+    field_map: [],
+    selectedTask: '',
+    postTypes: [],
+    selectedPostType: '',
+    selectedPostStatus: '',
+    voxelFields: [],
+    actions: {},
+    posts: [],
+    selectedPost: ''
+  })
+
+  const saveConfig = () => {
+    setIsLoading(true)
+    const resp = saveIntegConfig(
+      flow,
+      setFlow,
+      allIntegURL,
+      voxelConf,
+      navigate,
+      '',
+      '',
+      setIsLoading
+    )
+    resp.then((res) => {
+      if (res.success) {
+        toast.success(res.data?.msg)
+        navigate(allIntegURL)
+      } else {
+        toast.error(res.data || res)
+      }
+    })
+  }
+
+  const nextPage = (pageNo) => {
+    setTimeout(() => {
+      document.getElementById('btcd-settings-wrp').scrollTop = 0
+    }, 300)
+
+    if (!voxelConf.selectedTask) {
+      toast.error(__('Please select a task!', 'bit-integrations'))
+      return
+    }
+
+    if ((voxelConf.selectedTask === TASKS.NEW_POST || voxelConf.selectedTask === TASKS.UPDATE_POST) && !voxelConf.selectedPostType) {
+      toast.error(__('Please select a post type!', 'bit-integrations'))
+      return
+    }
+
+    if (POST_TYPE_TASK_ARRAY.includes(voxelConf.selectedTask) && !voxelConf.selectedPostStatus) {
+      toast.error(__('Please select a post status!', 'bit-integrations'))
+      return
+    }
+
+    if ((voxelConf.selectedTask === TASKS.UPDATE_POST || voxelConf.selectedTask === TASKS.UPDATE_COLLECTION_POST) && !voxelConf.selectedPost) {
+      toast.error(__('Please select a post!', 'bit-integrations'))
+      return
+    }
+
+    if (!checkMappedFields(voxelConf)) {
+      toast.error(__('Please map mandatory fields!', 'bit-integrations'))
+      return
+    }
+
+    voxelConf.field_map.length > 0 && setStep(pageNo)
+  }
+
+  return (
+    <div>
+      <SnackMsg snack={snack} setSnackbar={setSnackbar} />
+      <div className="txt-center mt-2">
+        <Steps step={3} active={step} />
+      </div>
+
+      {/* STEP 1 */}
+      <VoxelAuthorization
+        voxelConf={voxelConf}
+        setVoxelConf={setVoxelConf}
+        step={step}
+        setStep={setStep}
+        loading={loading}
+        setLoading={setLoading}
+        setSnackbar={setSnackbar}
+      />
+
+      {/* STEP 2 */}
+      <div
+        className="btcd-stp-page"
+        style={{ ...(step === 2 && { width: 900, height: 'auto', overflow: 'visible' }) }}>
+        <VoxelIntegLayout
+          formFields={formFields}
+          voxelConf={voxelConf}
+          setVoxelConf={setVoxelConf}
+          loading={loading}
+          setLoading={setLoading}
+          setSnackbar={setSnackbar}
+        />
+        <button
+          onClick={() => nextPage(3)}
+          disabled={!checkMappedFields(voxelConf)}
+          className="btn f-right btcd-btn-lg purple sh-sm flx"
+          type="button">
+          {__('Next', 'bit-integrations')} &nbsp;
+          <div className="btcd-icn icn-arrow_back rev-icn d-in-b" />
+        </button>
+      </div>
+
+      {/* STEP 3 */}
+      <IntegrationStepThree
+        step={step}
+        saveConfig={() => saveConfig()}
+        isLoading={isLoading}
+        dataConf={voxelConf}
+        setDataConf={setVoxelConf}
+        formFields={formFields}
+      />
+    </div>
+  )
+}
+
+export default Voxel