# bit-form/2.10.0/assets/bf-550-288.js
Bit Form – Contact Form, Payment Forms, Multi Step Forms, Calculator & Custom Form Builder, version 2.10.0. 10 lines.
- Page: https://pluginprobe.com/plugins/bit-form/2.10.0/code/assets/bf-550-288.js
- Raw: https://pluginprobe.com/plugins/bit-form/2.10.0/raw/assets/bf-550-288.js
- Modified: 2024-02-12T11:55:48+00:00
Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/bit-form/2.10.0/code/assets/bf-550-288.js#L10-L20`.
```javascript
var _=Object.defineProperty;var S=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var I=(t,s,a)=>s in t?_(t,s,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[s]=a,g=(t,s)=>{for(var a in s||(s={}))q.call(s,a)&&I(t,a,s[a]);if(S)for(var a of S(s))w.call(s,a)&&I(t,a,s[a]);return t};import{r as c,j as e,_ as l,L as P,c as z,v as F,a as H,S as T,B as L,w as B,d as E}from"./main-162.js";/* empty css */import{B as K}from"./bf-644-69.js";import{S as M}from"./bf-23-135.js";import{b as C}from"./bf-230-72.js";import{I as D}from"./bf-283-330.js";import{N as R}from"./bf-182-400.js";import{A as G}from"./bf-272-398.js";import{N as J}from"./bf-823-399.js";import{H as V,h as W,c as Z}from"./bf-338-365.js";import"./bf-917-73.js";import"./bf-875-77.js";import"./bf-307-196.js";import"./bf-582-127.js";import"./bf-361-122.js";import"./bf-527-130.js";function O({hubspotConf:t,setHubspotConf:s,step:a,setstep:j,isInfo:p}){const[d,x]=c.useState(!1),[n,u]=c.useState({name:"",api_key:""}),[v,h]=c.useState(!1),[y,k]=c.useState(!1),N=()=>{const r=g({},t);if(!r.name||!r.api_key){u({name:r.name?"":l("Integration name cann't be empty"),api_key:r.api_key?"":l("API Key cann't be empty")});return}k("auth");const m={api_key:r.api_key};z(m,"bitforms_hubspot_authorize").then(o=>{const{data:A}=o;A&&x(!0),h(!0),k(!1)})},f=r=>{const m=g({},t),o=g({},n);o[r.target.name]="",m[r.target.name]=r.target.value,u(o),s(m)},i=()=>{setTimeout(()=>{document.getElementById("btcd-settings-wrp").scrollTop=0},300),j(2)},b=`
Step of generating Access Token:
- Login to your HubSpot account, click the Settings icon settings in the main navigation bar..
- In the left sidebar menu, navigate to Integrations > Private App.
- Give name and description and select all necessary scope.
- Then create Access token.
`;return e.jsxs("div",{className:"btcd-stp-page",style:{width:a===1&&900,height:a===1&&"auto"},children:[e.jsx("div",{className:"mt-3",children:e.jsx("b",{children:l("Integration Name:")})}),e.jsx("input",{className:"btcd-paper-inp w-6 mt-1",onChange:f,name:"name",value:t==null?void 0:t.name,type:"text",placeholder:l("Integration Name..."),disabled:p}),e.jsx("div",{style:{color:"red",fontSize:"15px"},children:n.name}),e.jsx("div",{className:"mt-3",children:e.jsx("b",{children:l("API Key:")})}),e.jsx("input",{className:"btcd-paper-inp w-6 mt-1",onChange:f,name:"api_key",value:t==null?void 0:t.api_key,type:"text",placeholder:l("API Key..."),disabled:p}),e.jsx("div",{style:{color:"red",fontSize:"15px"},children:n.api_key}),e.jsxs("small",{className:"d-blk mt-5",children:[l("To get API , Please Visit")," ",e.jsx("a",{className:"btcd-link",href:"https://app.hubspot.com/api-key",target:"_blank",rel:"noreferrer",children:l("Hubspot API Console")})]}),y==="auth"&&e.jsxs("div",{className:"flx mt-5",children:[e.jsx(P,{size:25,clr:"#022217",className:"mr-2"}),"Checking API Key!!!"]}),v&&!d&&!y&&e.jsxs("div",{className:"flx mt-5",style:{color:"red"},children:[e.jsx("span",{className:"btcd-icn mr-2",style:{fontSize:30,marginTop:-5},children:"×"}),"Sorry, API key is invalid"]}),!p&&e.jsxs(e.Fragment,{children:[e.jsx(G,{handleAuthorize:N,isAuthorized:d,isLoading:y}),e.jsx("br",{}),e.jsx(J,{nextPageHandler:()=>i(),disabled:!d})]}),e.jsx(R,{note:b})]})}function pe({formFields:t,setIntegration:s,integrations:a,allIntegURL:j}){const p=F(),[d,x]=c.useState(!1),[n,u]=c.useState(1),[v,h]=c.useState({show:!1}),{css:y}=H(),k=[{key:"email",label:"Email",required:!0},{key:"firstname",label:"First Name",required:!1},{key:"lastname",label:"Last Name",required:!1},{key:"website",label:"Website",required:!1},{key:"company",label:"Company",required:!1},{key:"phone",label:"Phone",required:!1},{key:"address",label:"Address",required:!1},{key:"city",label:"City",required:!1},{key:"state",label:"State",required:!1},{key:"zip",label:"Zip",required:!1},{key:"jobtitle",label:"Job Title",required:!1}],N=[{key:"dealname",label:"Deal Name",required:!0},{key:"amount",label:"Amount",required:!1},{key:"closedate",label:"Close Date",required:!1}],f=[{key:"subject",label:"Ticket Name",required:!0},{key:"content",label:"Ticket description",required:!1}],[i,b]=c.useState({name:"Hubspot",type:"Hubspot",api_key:"",field_map:[{formField:"",hubspotField:""}],actions:{},contactFields:k,dealFields:N,ticketFields:f}),r=()=>{C(a,s,j,i,p)},m=o=>{if(!Z(i)){E.error("Please map mandatory fields");return}i.field_map.length>0&&u(o)};return e.jsxs("div",{children:[e.jsx(T,{snack:v,setSnackbar:h}),e.jsx("div",{className:"txt-center w-9 mt-2 cal-width",children:e.jsx(M,{step:3,active:n})}),e.jsx(O,{hubspotConf:i,setHubspotConf:b,step:n,setstep:u,isLoading:d,setIsLoading:x,setSnackbar:h}),e.jsxs("div",{className:"btcd-stp-page",style:g({},n===2&&{width:900,height:"auto",overflow:"visible"}),children:[e.jsx(V,{formFields:t,handleInput:o=>W(o,i,b),hubspotConf:i,setHubspotConf:b,isLoading:d,setIsLoading:x,setSnackbar:h}),e.jsxs(L,{variant:"success",onClick:()=>m(3),disabled:!(i!=null&&i.actionName),className:y(B.ftRight),children:[l("Next"),e.jsx(K,{className:"ml-1 rev-icn"})]})]}),e.jsx(D,{step:n,saveConfig:()=>r()})]})}export{pe as default};
```