Merge pull request #122 from Bit-Apps-Pro/feat/wishlist-actions

Feature: Wishlist Member Actions added

Author: RishadAlam

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

@@ -406,7 +406,7 @@ const tutorialLinks = {
     youTubeLink: 'https://www.youtube.com/playlist?list=PL7c6CDwwm-ALe76SC4ClrJItKDznTPUmv',
     docLink: 'https://bitapps.pro/docs/bit-integrations/actions/wp-courseware-integrations/'
   },
-  wishlist: {
+  wishlistMember: {
     youTubeLink: 'https://www.youtube.com/playlist?list=PL7c6CDwwm-AIsdIcLNYtPXJGnTZ_UmWvT',
     docLink: 'https://bitapps.pro/docs/bit-integrations/actions/wishlist-integrations/'
   },

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

@@ -166,6 +166,7 @@ const EditSmartSuite = lazy(() => import('./SmartSuite/EditSmartSuite'))
 const EditBento = lazy(() => import('./Bento/EditBento'))
 const EditLine = lazy(() => import('./Line/EditLine'))
 const EditACPT = lazy(() => import('./ACPT/EditACPT'))
+const EditWishlistMember = lazy(() => import('./WishlistMember/EditWishlistMember'))
 
 const loaderStyle = {
   display: 'flex',
@@ -560,6 +561,8 @@ const IntegType = memo(({ allIntegURL, flow }) => {
       return <EditLine allIntegURL={allIntegURL} />
     case 'ACPT':
       return <EditACPT allIntegURL={allIntegURL} />
+    case 'Wishlist Member':
+      return <EditWishlistMember allIntegURL={allIntegURL} />
     default:
       return <Loader style={loaderStyle} />
   }

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

@@ -167,6 +167,7 @@ const SmartSuiteAuthorization = lazy(() => import('./SmartSuite/SmartSuiteAuthor
 const BentoAuthorization = lazy(() => import('./Bento/BentoAuthorization'))
 const LineAuthorization = lazy(() => import('./Line/LineAuthorization'))
 const ACPTAuthorization = lazy(() => import('./ACPT/ACPTAuthorization'))
+const WishlistMemberAuthorization = lazy(() => import('./WishlistMember/WishlistMemberAuthorization'))
 
 export default function IntegInfo() {
   const { id, type } = useParams()
@@ -589,6 +590,8 @@ export default function IntegInfo() {
         return <LineAuthorization lineConf={integrationConf} step={1} isInfo />
       case 'ACPT':
         return <ACPTAuthorization acptConf={integrationConf} step={1} isInfo />
+      case 'WishlistMember':
+        return <WishlistMemberAuthorization wishlistMemberConf={integrationConf} step={1} isInfo />
       default:
         return <></>
     }

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

@@ -222,7 +222,9 @@ function Log({ allIntegURL }) {
                 overflow: 'auto',
                 maxWidth: '800px',
                 maxHeight: '500px',
-                boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
+                boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                width: '100%',
+                height: '100%'
               }}>
               <pre style={{ margin: 0 }}>
                 <code className="">{jsonPrint(response)}</code>

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

@@ -165,6 +165,7 @@ const SmartSuite = lazy(() => import('./SmartSuite/SmartSuite'))
 const Bento = lazy(() => import('./Bento/Bento'))
 const Line = lazy(() => import('./Line/Line'))
 const ACPT = lazy(() => import('./ACPT/ACPT'))
+const WishlistMember = lazy(() => import('./WishlistMember/WishlistMember'))
 
 export default function NewInteg({ allIntegURL }) {
   const { integUrlName } = useParams()
@@ -173,6 +174,7 @@ export default function NewInteg({ allIntegURL }) {
   if (!window.opener && !Object.keys(flow).length) {
     navigate('/flow/new')
   }
+
   const NewIntegs = () => {
     switch (integUrlName) {
       case 'Zoho CRM':
@@ -1581,6 +1583,15 @@ export default function NewInteg({ allIntegURL }) {
             setFlow={setFlow}
           />
         )
+      case 'Wishlist Member':
+        return (
+          <WishlistMember
+            allIntegURL={allIntegURL}
+            formFields={flow?.triggerData?.fields}
+            flow={flow}
+            setFlow={setFlow}
+          />
+        )
       default:
         return <></>
     }

frontend-dev/src/components/AllIntegrations/WishlistMember/EditWishlistMember.jsx

@@ -0,0 +1,94 @@
+/* eslint-disable no-param-reassign */
+
+import { useState } from 'react'
+import { useNavigate, useParams } 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 { saveActionConf } from '../IntegrationHelpers/IntegrationHelpers'
+import IntegrationStepThree from '../IntegrationHelpers/IntegrationStepThree'
+import SetEditIntegComponents from '../IntegrationHelpers/SetEditIntegComponents'
+import { checkValidation, setIntegrationName } from './WishlistMemberCommonFunc'
+import WishlistMemberIntegLayout from './WishlistMemberIntegLayout'
+
+function EditWishlistMember({ allIntegURL }) {
+  const navigate = useNavigate()
+  const { formID } = useParams()
+
+  const [wishlistMemberConf, setWishlistMemberConf] = useRecoilState($actionConf)
+  const [flow, setFlow] = useRecoilState($newFlow)
+  const formFields = useRecoilValue($formFields)
+  const [isLoading, setIsLoading] = useState(false)
+  const [snack, setSnackbar] = useState({ show: false })
+  const [name, setName] = useState(wishlistMemberConf?.name || '')
+
+  const saveConfig = () => {
+    if (checkValidation(wishlistMemberConf)) {
+      setSnackbar({
+        show: true,
+        msg: __('Please map all required fields to continue.', 'bit-integrations')
+      })
+
+      return
+    }
+
+    saveActionConf({
+      flow,
+      setFlow,
+      allIntegURL,
+      conf: wishlistMemberConf,
+      navigate,
+      edit: 1,
+      setIsLoading,
+      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 => {
+            setName(e.target.value)
+            setIntegrationName(e, setWishlistMemberConf)
+          }}
+          name="name"
+          value={name}
+          type="text"
+          placeholder={__('Integration Name...', 'bit-integrations')}
+        />
+      </div>
+      <br />
+
+      <SetEditIntegComponents entity={flow.triggered_entity} setSnackbar={setSnackbar} />
+      <WishlistMemberIntegLayout
+        formID={formID}
+        formFields={formFields}
+        wishlistMemberConf={wishlistMemberConf}
+        setWishlistMemberConf={setWishlistMemberConf}
+        isLoading={isLoading}
+        step={2}
+        setIsLoading={setIsLoading}
+        setSnackbar={setSnackbar}
+      />
+
+      <IntegrationStepThree
+        edit
+        saveConfig={saveConfig}
+        disabled={checkValidation(wishlistMemberConf)}
+        isLoading={isLoading}
+        dataConf={wishlistMemberConf}
+        setDataConf={setWishlistMemberConf}
+        formFields={formFields}
+      />
+      <br />
+    </div>
+  )
+}
+
+export default EditWishlistMember

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

@@ -0,0 +1,101 @@
+import { useState } from 'react'
+import 'react-multiple-select-dropdown-lite/dist/index.css'
+import { useNavigate } from 'react-router-dom'
+import BackIcn from '../../../Icons/BackIcn'
+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 WishlistMemberAuthorization from './WishlistMemberAuthorization'
+import { checkValidation } from './WishlistMemberCommonFunc'
+import WishlistMemberIntegLayout from './WishlistMemberIntegLayout'
+
+export default function WishlistMember({ formFields, setFlow, flow, allIntegURL }) {
+  const navigate = useNavigate()
+  const [isLoading, setIsLoading] = useState(false)
+  const [step, setStep] = useState(1)
+  const [snack, setSnackbar] = useState({ show: false })
+  const [wishlistMemberConf, setWishlistMemberConf] = useState({
+    name: 'Wishlist Member',
+    type: 'Wishlist Member',
+    field_map: [{ formField: '', wishlistMemberField: '' }],
+    wishlistFields: [],
+    action: ''
+  })
+
+  const nextPage = val => {
+    setTimeout(() => {
+      document.getElementById('btcd-settings-wrp').scrollTop = 0
+    }, 300)
+
+    if (val === 3 && checkValidation(wishlistMemberConf)) {
+      setSnackbar({
+        show: true,
+        msg: __('Please map all required fields to continue.', 'bit-integrations')
+      })
+
+      return
+    }
+
+    setStep(val)
+  }
+
+  return (
+    <div>
+      <SnackMsg snack={snack} setSnackbar={setSnackbar} />
+      <div className="txt-center mt-2">
+        <Steps step={3} active={step} />
+      </div>
+
+      {/* STEP 1 */}
+      <WishlistMemberAuthorization
+        wishlistMemberConf={wishlistMemberConf}
+        setWishlistMemberConf={setWishlistMemberConf}
+        step={step}
+        nextPage={nextPage}
+        isLoading={isLoading}
+        setIsLoading={setIsLoading}
+        setSnackbar={setSnackbar}
+      />
+
+      {/* STEP 2 */}
+      <div
+        className="btcd-stp-page"
+        style={{
+          ...(step === 2 && { width: 900, minHeight: '600px', height: 'auto', overflow: 'visible' })
+        }}>
+        <WishlistMemberIntegLayout
+          formFields={formFields}
+          wishlistMemberConf={wishlistMemberConf}
+          setWishlistMemberConf={setWishlistMemberConf}
+          setSnackbar={setSnackbar}
+          setIsLoading={setIsLoading}
+        />
+        <br />
+        <br />
+        <br />
+        <button
+          onClick={() => nextPage(3)}
+          disabled={checkValidation(wishlistMemberConf)}
+          className="btn f-right btcd-btn-lg purple sh-sm flx"
+          type="button">
+          {__('Next', 'bit-integrations')}
+          <BackIcn className="ml-1 rev-icn" />
+        </button>
+      </div>
+
+      {/* STEP 3 */}
+      <IntegrationStepThree
+        step={step}
+        saveConfig={() =>
+          saveIntegConfig(flow, setFlow, allIntegURL, wishlistMemberConf, navigate, '', '', setIsLoading)
+        }
+        isLoading={isLoading}
+        dataConf={wishlistMemberConf}
+        setDataConf={setWishlistMemberConf}
+        formFields={formFields}
+      />
+    </div>
+  )
+}

frontend-dev/src/components/AllIntegrations/WishlistMember/WishlistMemberAuthorization.jsx

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+import BackIcn from '../../../Icons/BackIcn'
+import { __ } from '../../../Utils/i18nwrap'
+import tutorialLinks from '../../../Utils/StaticData/tutorialLinks'
+import LoaderSm from '../../Loaders/LoaderSm'
+import TutorialLink from '../../Utilities/TutorialLink'
+import { handleAuthorize, setIntegrationName } from './WishlistMemberCommonFunc'
+
+export default function WishlistMemberAuthorization({
+  wishlistMemberConf,
+  setWishlistMemberConf,
+  step,
+  nextPage,
+  setSnackbar,
+  isInfo
+}) {
+  const [isAuthorized, setIsAuthorized] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const { wishlistMember } = tutorialLinks
+
+  return (
+    <div
+      className="btcd-stp-page"
+      style={{ ...{ width: step === 1 && 900 }, ...{ height: step === 1 && 'auto' } }}>
+      {wishlistMember?.youTubeLink && (
+        <TutorialLink title="WishlistMember" youTubeLink={wishlistMember?.youTubeLink} />
+      )}
+      {wishlistMember?.docLink && (
+        <TutorialLink title="WishlistMember" docLink={wishlistMember?.docLink} />
+      )}
+
+      <div className="mt-3">
+        <b>{__('Integration Name:', 'bit-integrations')}</b>
+      </div>
+      <input
+        className="btcd-paper-inp w-7 mt-1"
+        onChange={e => setIntegrationName(e, setWishlistMemberConf)}
+        name="name"
+        value={wishlistMemberConf.name}
+        type="text"
+        placeholder={__('Integration Name...', 'bit-integrations')}
+        disabled={isInfo}
+      />
+
+      <button
+        onClick={() => handleAuthorize(setIsAuthorized, setIsLoading, setSnackbar)}
+        className="btn btcd-btn-lg purple sh-sm flx"
+        type="button"
+        disabled={isAuthorized || isLoading}>
+        {isAuthorized ? __('Authorized ✔', 'bit-integrations') : __('Authorize', 'bit-integrations')}
+        {isLoading && <LoaderSm size={20} clr="#022217" className="ml-2" />}
+      </button>
+
+      <br />
+      <button
+        onClick={() => nextPage(2)}
+        className="btn f-right btcd-btn-lg purple sh-sm flx"
+        type="button"
+        disabled={!isAuthorized}>
+        {__('Next', 'bit-integrations')}
+        <BackIcn className="ml-1 rev-icn" />
+      </button>
+    </div>
+  )
+}