%PDF-
%PDF-
Mini Shell
Mini Shell
{"version":3,"sources":["app/main/get-involved/components/CorporateForm.js","app/main/get-involved/Corporate-membership.js"],"names":["CorporateForm","props","useState","countries","setCountries","country","setCountry","states","setStates","thestate","settheState","cities","setCities","city","setCity","membershipType","member","Number","price","payment","setPayment","userEmail","setUserEmail","useEffect","fetch","SERVER_URL","then","res","json","status","data","console","log","paystack_p_key","paystack_id","member_email","useForm","register","handleSubmit","formState","errors","isDirty","isValid","message","map","gateway","public_key","id","config","reference","Date","getTime","toString","email","amount","publicKey","initializePayment","usePaystackPayment","onSubmit","type","company_name","full_name","ownership_type","country_id","state_id","city_id","office_address","head_office","company_email","email_address","company_tel","phone_number","company_strength","staff_strength","company_director","manager_director","date_started","regDate","contact_name","contact_person","contact_email","contact_person_email","contact_tel","contact_person_telephone","contact_designation","contact_person_designation","undefined","paymentdata","payment_status","transaction_reference","payment_gateway_id","membershipData","corporatemembershipAction","className","name","required","placeholder","autoComplete","defaultValue","onChange","e","countryID","target","value","stateID","thestates","state","contact_person_gender","htmlFor","fontSize","color","CorporateMembership","queryString","window","location","search","urlParams","URLSearchParams","get","error","localStorage","getItem","success","setTimeout","removeItem","page","SliderBar","UncontrolledAlert"],"mappings":"gOA+mBeA,MAtmBf,SAAuBC,GAAO,MAEMC,mBAAS,IAFf,mBAErBC,EAFqB,KAEVC,EAFU,OAGEF,mBAAS,IAHX,mBAGrBG,EAHqB,KAGZC,EAHY,OAIAJ,mBAAS,IAJT,mBAIrBK,EAJqB,KAIbC,EAJa,OAKIN,mBAAS,IALb,mBAKrBO,EALqB,KAKXC,EALW,OAMAR,mBAAS,IANT,mBAMrBS,EANqB,KAMbC,EANa,OAOJV,mBAAS,IAPL,mBAOrBW,EAPqB,KAOfC,EAPe,OAQAZ,mBAASD,EAAMc,gBARf,mBAQrBC,EARqB,aASFd,mBAASe,OAAqB,IAAdhB,EAAMiB,SATpB,mBASrBA,EATqB,aAUEhB,sBAVF,mBAUrBiB,EAVqB,KAUZC,EAVY,OAWMlB,qBAXN,mBAWrBmB,EAXqB,KAWVC,EAXU,KAY5BC,qBAAU,WAEJC,MAAM,GAAD,OAAIC,aAAJ,sBACJC,MAAK,SAAAC,GAAG,OAAIA,EAAIC,UAChBF,MAAK,SAAAE,GAEe,MAAhBA,EAAKC,OACNzB,EAAawB,EAAKE,MAEhBC,QAAQC,IAAI,iCAOrB,IAEH,IA0EIC,EACAC,EAkBAC,EA3HwB,EAmFxBC,cAHFC,EAhF0B,EAgF1BA,SACAC,EAjF0B,EAiF1BA,aAjF0B,KAkF1BC,UAAaC,GAlFa,GAkFbA,OAlFa,GAkFLC,QAlFK,GAkFIC,QAI/BnB,qBAAU,WAEPC,MAAM,GAAD,OAAIC,aAAJ,qBACJC,MAAK,SAAAC,GAAG,OAAIA,EAAIC,UAChBF,MAAK,SAAAE,GACe,MAAhBA,EAAKC,OACNT,EAAWQ,EAAKE,MAEdC,QAAQC,IAAIJ,EAAKe,cAMxB,IAMAxB,GACDA,EAAQyB,KAAI,SAAAC,GACVZ,EAAiBY,EAAQC,WACzBZ,EAAcW,EAAQE,MAevB1B,IACDc,EAAed,GAIjB,IAAM2B,GAAS,CACbC,WAAY,IAAIC,MAAQC,UAAUC,WAClCC,MAAOlB,EACPmB,OAAQpC,EACRqC,UAAWtB,GAKPuB,GAAoBC,YAAmBT,IA4E7C,OACE,sBAAMU,SAAUpB,GA1ED,SAACR,GAChB,IAAM6B,EAAO3C,EACP4C,EAAe9B,EAAK+B,UACpBC,EAAiBhC,EAAKgC,eACtBC,EAAa1D,EACb2D,EAAWvD,EACXwD,EAAUpD,EACVqD,EAAiBpC,EAAKqC,YACtBC,EAAgBtC,EAAKuC,cACrBC,EAAcxC,EAAKyC,aACnBC,EAAmB1C,EAAK2C,eACxBC,EAAmB5C,EAAK6C,iBACxBC,EAAe9C,EAAK+C,QACpBC,EAAehD,EAAKiD,eACpBC,EAAgBlD,EAAKmD,qBACrBC,EAAcpD,EAAKqD,yBACnBC,EAAsBtD,EAAKuD,gCA8ChBC,IAAdjE,QAA8CiE,IAAnBrD,EAC5BuB,IA1CgB,SAAC+B,GACf,IAEIC,EAFEC,EAAwBF,EAAYtC,UACpCyC,EAAqBxD,EAIzBsD,EADwB,YAAvBD,EAAY1D,OACI,EAEA,EAGnB,IAEM8D,EAAiB,CACrBhC,OACAC,eACAE,iBACAC,aACAC,WACAC,UACAC,iBACAE,gBACAE,cACAE,mBACAE,mBACAE,eACAE,eACAE,gBACAE,cACAE,sBAAoBM,qBACpBD,wBACAD,iBACAlC,OArBapC,GAuBjB0E,YAA0BD,MAGZ,WACd5D,QAAQC,IAAI,aAMZD,QAAQC,IAAI,WAS0B6D,UAAU,cAAlD,SACE,qBAAKA,UAAU,gCAAf,SACE,sBAAKA,UAAU,mBAAf,UAEE,sBAAKA,UAAU,wCAAf,UAEE,qBAAKA,UAAU,2BAAf,SACE,oBAAIA,UAAU,8CAAd,mCAIF,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,OACLmC,KAAK,eACL/C,GAAG,gBACCV,EAAS,YAAa,CAAE0D,UAAU,KAJxC,IAKEC,YAAY,eACZC,aAAa,eACbJ,UAAU,uKAEXrD,GAAOqB,WACN,sBAAMgC,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,QACDtB,EAAS,iBAAkB,CAAE0D,UAAU,KAF7C,IAGEC,YAAY,oBACZjD,GAAG,iBACHkD,aAAa,iBACbJ,UAAU,uKAEXrD,GAAOoB,cACN,sBAAMiC,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,QACDtB,EAAS,UAAW,CAAE0D,UAAU,KAFtC,IAGEC,YAAY,0BACZjD,GAAG,WACHkD,aAAa,WACbJ,UAAU,uKAEXrD,GAAOqC,SACN,sBAAMgB,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,QACDtB,EAAS,cAAe,CAAE0D,UAAU,KAF1C,IAGEC,YAAY,wBACZjD,GAAG,cACHkD,aAAa,cACbJ,UAAU,uKAEXrD,GAAO2B,aACN,sBAAM0B,UAAU,uBAAhB,uCAOJ,sBAAKA,UAAU,2BAAf,UACE,sBAAKA,UAAU,wBAAf,UACE,iDAEE9C,GAAG,WACCV,EAAS,UAAW,CAAE0D,UAAU,KAHtC,IAIEC,YAAY,UACZC,aAAa,UACbC,aAAc/F,EAAU,GACxB0F,UAAU,mMACVM,SAhRM,SAACC,GACrB,IAAIC,EAAYD,EAAEE,OAAOC,MAGvB/E,MAAM,GAAD,OAAIC,aAAJ,2BAAiC4E,IACrC3E,MAAK,SAAAC,GAAG,OAAIA,EAAIC,UAChBF,MAAK,SAAAE,GACJG,QAAQC,IAAIJ,EAAKe,QAAS,QACP,MAAhBf,EAAKC,OACNrB,EAAUoB,EAAKE,MAEbC,QAAQC,IAAI,+BAQpB1B,EAAW8F,EAAEE,OAAOC,QAqPR,UAUE,6CACCpG,EAAUyC,KAAI,SAACvC,GAAD,OACX,wBAAyBkG,MAAOlG,EAAQ0C,GAAxC,SAA6C1C,EAAQyF,MAAxCzF,EAAQ0C,WAG3B,qBAAK8C,UAAU,sFAAf,SACE,cAAC,IAAD,SAGHrD,GAAOnC,SACN,sBAAMwF,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,QACDtB,EAAS,eAAgB,CAAE0D,UAAU,KAF3C,IAGEC,YAAY,eACZjD,GAAG,eACH8C,UAAU,uKAEXrD,GAAO+B,cACN,sBAAMsB,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACE,sBAAKA,UAAU,WAAf,UACE,iDACE9C,GAAG,SACCV,EAAS,QAAS,CAAE0D,UAAU,KAFpC,IAGEC,YAAY,QACZC,aAAa,QACbJ,UAAU,qLACVK,aAAc3F,EAAO,GACrB4F,SApSI,SAACC,GACnB,IAAII,EAAUJ,EAAEE,OAAOC,MAGrB/E,MAAM,GAAD,OAAIC,aAAJ,0BAAgC+E,IACpC9E,MAAK,SAAAC,GAAG,OAAIA,EAAIC,UAChBF,MAAK,SAAAE,GACJG,QAAQC,IAAIJ,EAAKe,QAAS,QACP,MAAhBf,EAAKC,OACNjB,EAAUgB,EAAKE,MAEbC,QAAQC,IAAI,+BAOpBtB,EAAY0F,EAAEE,OAAOC,QA2QT,UAUE,2CACChG,EAAOqC,KAAI,SAAC6D,GAAD,OACV,wBAA2BF,MAAOE,EAAU1D,GAA5C,SAAiD0D,EAAUX,MAA9CW,EAAU1D,WAG3B,qBAAK8C,UAAU,sFAAf,SACE,cAAC,IAAD,SAGHrD,GAAOkE,OACN,sBAAMb,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,QACDtB,EAAS,gBAAiB,CAAE0D,UAAU,KAF5C,IAGEC,YAAY,gBACZjD,GAAG,gBACHkD,aAAa,QACbE,SA7PG,SAACC,GAChBrE,QAAQC,MACRV,EAAa8E,EAAEE,OAAOC,QA4PVV,UAAU,uKAEXrD,GAAO6B,eACN,sBAAMwB,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACA,sBAAKA,UAAU,WAAf,UACI,iDACE9C,GAAG,QACCV,EAAS,OAAQ,CAAE0D,UAAU,KAFnC,IAGEC,YAAY,OACZC,aAAa,OACbJ,UAAU,qLACVK,aAAcvF,EAAO,GACrBwF,SA5TG,SAACC,GAClBtF,EAAQsF,EAAEE,OAAOC,QAoTL,UAUE,0CACC5F,EAAOiC,KAAI,SAAC/B,GAAD,OACV,wBAAsB0F,MAAO1F,EAAKkC,GAAlC,SAAuClC,EAAKiF,MAA/BjF,EAAKkC,WAGtB,qBAAK8C,UAAU,sFAAf,SACE,cAAC,IAAD,SAGHrD,GAAOkE,OACN,sBAAMb,UAAU,uBAAhB,uCASJ,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,QACDtB,EAAS,mBAAoB,CAC/B0D,UAAU,KAHd,IAKEC,YAAY,mBACZjD,GAAG,mBACHkD,aAAa,mBACbJ,UAAU,uKAEXrD,GAAOmC,kBACN,sBAAMkB,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,QACDtB,EAAS,iBAAkB,CAAE0D,UAAU,KAF7C,IAGEC,YAAY,iBACZjD,GAAG,iBACHkD,aAAa,iBACbJ,UAAU,uKAEXrD,GAAOiC,gBACN,sBAAMoB,UAAU,uBAAhB,0CAQN,sBAAKA,UAAU,mCAAf,UACE,qBAAKA,UAAU,2BAAf,SACE,sBAAKA,UAAU,OAAf,UACE,oBAAIA,UAAU,yCAAd,iCAGA,sBAAMA,UAAU,wBAAhB,gNAQJ,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,OACLmC,KAAK,iBACL/C,GAAG,uBACCV,EAAS,iBAAkB,CAAE0D,UAAU,KAJ7C,IAKEC,YAAY,wBACZC,aAAa,sBACbJ,UAAU,uKAEXrD,GAAOuC,gBACN,sBAAMc,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,QACDtB,EAAS,uBAAwB,CACnC0D,UAAU,KAHd,IAKEC,YAAY,yBACZjD,GAAG,uBACHkD,aAAa,uBACbJ,UAAU,uKAEXrD,GAAOyC,sBACN,sBAAMY,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,QACDtB,EAAS,6BAA8B,CACzC0D,UAAU,KAHd,IAKEC,YAAY,+BACZjD,GAAG,6BACHkD,aAAa,6BACbJ,UAAU,uKAEXrD,GAAO6C,4BACN,sBAAMQ,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACE,+CACElC,KAAK,QACDtB,EAAS,2BAA4B,CACvC0D,UAAU,KAHd,IAKEC,YAAY,6BACZjD,GAAG,2BACHkD,aAAa,2BACbJ,UAAU,uKAEXrD,GAAO2C,0BACN,sBAAMU,UAAU,uBAAhB,uCAMJ,sBAAKA,UAAU,2BAAf,UACE,sBAAKA,UAAU,WAAf,UACE,iDACE9C,GAAG,yBACCV,EAAS,wBAAyB,CACpC0D,UAAU,KAHd,IAKEC,YAAY,0BACZC,aAAa,wBACbJ,UAAU,qLAPZ,UASE,wBAAQU,MAAM,QAAd,kBACA,wBAAQA,MAAM,QAAd,wBAEF,qBAAKV,UAAU,sFAAf,SACE,cAAC,IAAD,SAGHrD,GAAOmE,uBACN,sBAAMd,UAAU,uBAAhB,uCAMJ,qBAAKA,UAAU,aAAf,SACE,mCACE,sBAAKA,UAAU,iBAAf,UACE,sBAAKA,UAAU,oBAAf,UACE,qBAAKA,UAAU,wBAAf,SACE,+CACE9C,GAAG,eACCV,EAAS,gBAFf,IAGEsB,KAAK,WACLkC,UAAU,6EAGd,qBAAKA,UAAU,sBAAf,SACE,uBACEe,QAAQ,cACRf,UAAU,4BAFZ,kGASJ,sBAAKA,UAAU,oBAAf,UACE,qBAAKA,UAAU,wBAAf,SACE,cAAC,IAAD,CAAcgB,SAAS,QAAQC,MAAM,WAEvC,qBAAKjB,UAAU,sBAAf,SACE,uBACEe,QAAQ,mBACRf,UAAU,4BAFZ,iKAeZ,qBAAKA,UAAU,+EAAf,SACE,wBACElC,KAAK,SACLkC,UAAU,4LAFZ,8B,2BC/hBGkB,UAzDf,SAA6B9G,GAC3B,IAAM+G,EAAcC,OAAOC,SAASC,OAC9BC,EAAY,IAAIC,gBAAgBL,GAChCjG,EAAiBqG,EAAUE,IAAI,QAC/BpG,EAAQkG,EAAUE,IAAI,SACtBC,EAAQC,aAAaC,QAAQ,eAC7BC,EAAUF,aAAaC,QAAQ,iBAUrC,OATAE,YAAW,WACTH,aAAaI,WAAW,iBACvB,MACHD,YAAW,WACTH,aAAaI,WAAW,mBACvB,MAKD,sBAAK/B,UAAU,WAAf,UACE,cAAC,IAAD,CAAYgC,KAJH,eAKT,sBAAKhC,UAAU,4BAAf,UACE,cAACiC,EAAA,EAAD,IACA,sBAAKjC,UAAU,kBAAf,UACE,sBAAKA,UAAU,sBAAf,UACE,qBAAIA,UAAU,2DAAd,UACG9E,EADH,sBAGCwG,EACC,cAACQ,EAAA,EAAD,CAAmBjB,MAAM,SAAzB,SACGS,IAGH,KACDG,EACC,cAACK,EAAA,EAAD,CAAmBjB,MAAM,UAAzB,SACGY,IAGH,KACF,sBAAM7B,UAAU,wBAAhB,sFAKF,qBAAKA,UAAU,oDAAf,SACE,qBAAKA,UAAU,6BAAf,SACE,8BACI,cAAC,EAAD,CAAe9E,eAAgBA,EAAgBG,MAAOA","file":"static/js/58.74e21ccd.chunk.js","sourcesContent":["import React, { useState, useEffect } from 'react';\r\nimport { useForm } from 'react-hook-form';\r\nimport clsx from 'clsx';\r\nimport { HiOutlineChevronDown, HiLockClosed } from 'react-icons/hi';\r\n\r\nimport {SERVER_URL} from '../../../config/server';\r\nimport {corporatemembershipAction} from '../../../actions/membership'\r\nimport { usePaystackPayment } from 'react-paystack';\r\n\r\nfunction CorporateForm(props) {\r\n // console.log(props.price)\r\n const [countries, setCountries] = useState([])\r\n const [country, setCountry] = useState('')\r\n const [states, setStates] = useState([])\r\n const [thestate, settheState] = useState([])\r\n const [cities, setCities] = useState([])\r\n const [city, setCity] = useState([])\r\n const [member, setMember] = useState(props.membershipType);\r\n const [price, setPrice] = useState(Number(props.price * 100));\r\n const [payment, setPayment] = useState();\r\n const [userEmail, setUserEmail] = useState();\r\n useEffect(() => {\r\n const fetchCountry =() =>{\r\n fetch(`${SERVER_URL}/location/country`)\r\n .then(res => res.json())\r\n .then(json => {\r\n // console.log(json.message, 'json')\r\n if(json.status === 200){\r\n setCountries(json.data);\r\n }else{\r\n console.log(\"Oops couldn't fetch data\");\r\n }\r\n });\r\n \r\n }\r\n \r\n fetchCountry();\r\n }, []);\r\n\r\n const handleCountry = (e) =>{\r\n let countryID = e.target.value;\r\n\r\n const fetchState =() =>{\r\n fetch(`${SERVER_URL}/location/state/${countryID}`)\r\n .then(res => res.json())\r\n .then(json => {\r\n console.log(json.message, 'json')\r\n if(json.status === 200){\r\n setStates(json.data);\r\n }else{\r\n console.log(\"Oops couldn't fetch data\");\r\n }\r\n });\r\n \r\n }\r\n\r\n fetchState();\r\n \r\n setCountry(e.target.value);\r\n }\r\n\r\n const handleState = (e) =>{\r\n let stateID = e.target.value;\r\n\r\n const fetchCity =() =>{\r\n fetch(`${SERVER_URL}/location/city/${stateID}`)\r\n .then(res => res.json())\r\n .then(json => {\r\n console.log(json.message, 'json')\r\n if(json.status === 200){\r\n setCities(json.data);\r\n }else{\r\n console.log(\"Oops couldn't fetch data\");\r\n }\r\n });\r\n \r\n }\r\n\r\n fetchCity();\r\n settheState(e.target.value)\r\n }\r\n\r\n const handleCity = (e) =>{\r\n setCity(e.target.value)\r\n }\r\n\r\n\r\n \r\n const {\r\n register,\r\n handleSubmit,\r\n formState: { errors, isDirty, isValid },\r\n } = useForm();\r\n\r\n // Fetching Paystack Details \r\n useEffect(() => {\r\n const fetchgateway =() =>{\r\n fetch(`${SERVER_URL}/gateway/payment`)\r\n .then(res => res.json())\r\n .then(json => {\r\n if(json.status === 200){\r\n setPayment(json.data);\r\n }else{\r\n console.log(json.message);\r\n }\r\n }); \r\n }\r\n\r\n fetchgateway()\r\n }, [])\r\n \r\n\r\n // Setting the paystack Key \r\n let paystack_p_key\r\n let paystack_id\r\n if(payment){\r\n payment.map(gateway =>{\r\n paystack_p_key = gateway.public_key\r\n paystack_id = gateway.id\r\n })\r\n }\r\n\r\n\r\n\r\n // Getting the users email \r\n\r\n const setEmail = (e) =>{\r\n console.log();\r\n setUserEmail(e.target.value);\r\n }\r\n\r\n\r\n let member_email\r\n if(userEmail){\r\n member_email = userEmail\r\n }\r\n\r\n // Paystack configouration \r\n const config = {\r\n reference: (new Date()).getTime().toString(),\r\n email: member_email,\r\n amount: price,\r\n publicKey: paystack_p_key,\r\n };\r\n\r\n\r\n //Initialize Paystack with config\r\n const initializePayment = usePaystackPayment(config);\r\n\r\n\r\n const onSubmit = (data) => {\r\n const type = member;\r\n const company_name = data.full_name;\r\n const ownership_type = data.ownership_type;\r\n const country_id = country;\r\n const state_id = thestate;\r\n const city_id = city;\r\n const office_address = data.head_office;\r\n const company_email = data.email_address;\r\n const company_tel = data.phone_number;\r\n const company_strength = data.staff_strength;\r\n const company_director = data.manager_director;\r\n const date_started = data.regDate;\r\n const contact_name = data.contact_person;\r\n const contact_email = data.contact_person_email;\r\n const contact_tel = data.contact_person_telephone;\r\n const contact_designation = data.contact_person_designation\r\n\r\n \r\n\r\n // Run on successful Payment\r\n const onSuccess = (paymentdata) => {\r\n const transaction_reference = paymentdata.reference;\r\n const payment_gateway_id = paystack_id;\r\n let payment_status \r\n\r\n if(paymentdata.status === 'success'){\r\n payment_status = 1\r\n }else{\r\n payment_status = 2\r\n }\r\n\r\n const amount = price;\r\n\r\n const membershipData = {\r\n type,\r\n company_name,\r\n ownership_type,\r\n country_id,\r\n state_id,\r\n city_id,\r\n office_address,\r\n company_email,\r\n company_tel,\r\n company_strength,\r\n company_director,\r\n date_started,\r\n contact_name,\r\n contact_email,\r\n contact_tel,\r\n contact_designation,payment_gateway_id,\r\n transaction_reference,\r\n payment_status,\r\n amount\r\n } \r\n corporatemembershipAction(membershipData)\r\n };\r\n \r\n const onClose = () => {\r\n console.log('closed')\r\n }\r\n\r\n if(userEmail !== undefined && paystack_p_key !== undefined){\r\n initializePayment(onSuccess, onClose)\r\n }else{\r\n console.log('none')\r\n }\r\n\r\n };\r\n \r\n\r\n \r\n\r\n return (\r\n <form onSubmit={handleSubmit(onSubmit)} className='mb-8 w-full'>\r\n <div className='overflow-hidden sm:rounded-md'>\r\n <div className='px-4 py-5 sm:p-6'>\r\n \r\n <div className='grid grid-cols-6 gap-y-3 gap-x-6 mb-8'>\r\n \r\n <div className='col-span-6 sm:col-span-6'>\r\n <h2 className='text-lg font-bold text-black uppercase mb-4'>\r\n General Information\r\n </h2>\r\n </div>\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n name='company_name'\r\n id='company-name'\r\n {...register('full_name', { required: true })}\r\n placeholder='Company name'\r\n autoComplete='company-name'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.full_name && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('ownership_type', { required: true })}\r\n placeholder='Type of ownership'\r\n id='ownership-type'\r\n autoComplete='ownership-type'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.company_name && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='date'\r\n {...register('regDate', { required: true })}\r\n placeholder='Company Registered Date'\r\n id='reg-date'\r\n autoComplete='reg-date'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.regDate && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('head_office', { required: true })}\r\n placeholder='(Head) Office Address'\r\n id='head-office'\r\n autoComplete='head-office'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.head_office && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <div className='w-full block relative'>\r\n <select\r\n \r\n id='country'\r\n {...register('country', { required: true })}\r\n placeholder='Country'\r\n autoComplete='country'\r\n defaultValue={countries[0]}\r\n className='block appearance-none w-full py-2 px-2 pr-8 border border-gray-300 bg-white leading-tight rounded-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 sm:text-sm'\r\n onChange={handleCountry}\r\n >\r\n <option>Country</option>\r\n {countries.map((country) =>(\r\n <option key={country.id} value={country.id}>{country.name}</option>\r\n ))}\r\n </select>\r\n <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>\r\n <HiOutlineChevronDown />\r\n </div>\r\n </div>\r\n {errors.country && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('phone_number', { required: true })}\r\n placeholder='Phone number'\r\n id='phone_number'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.phone_number && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <div className='relative'>\r\n <select\r\n id='state'\r\n {...register('state', { required: true })}\r\n placeholder='State'\r\n autoComplete='state'\r\n className='block appearance-none w-full py-2 px-2 pr-8 border border-gray-300 bg-white rounded-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 sm:text-sm'\r\n defaultValue={states[0]}\r\n onChange={handleState}\r\n >\r\n \r\n <option>State</option>\r\n {states.map((thestates) =>(\r\n <option key={thestates.id} value={thestates.id}>{thestates.name}</option>\r\n ))}\r\n </select>\r\n <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>\r\n <HiOutlineChevronDown />\r\n </div>\r\n </div>\r\n {errors.state && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('email_address', { required: true })}\r\n placeholder='Email address'\r\n id='email-address'\r\n autoComplete='email'\r\n onChange={setEmail}\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.email_address && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <div className='relative'>\r\n <select\r\n id='city'\r\n {...register('city', { required: true })}\r\n placeholder='City'\r\n autoComplete='city'\r\n className='block appearance-none w-full py-2 px-2 pr-8 border border-gray-300 bg-white rounded-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 sm:text-sm'\r\n defaultValue={cities[0]}\r\n onChange={handleCity}\r\n >\r\n \r\n <option>City</option>\r\n {cities.map((city) =>(\r\n <option key={city.id} value={city.id}>{city.name}</option>\r\n ))}\r\n </select>\r\n <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>\r\n <HiOutlineChevronDown />\r\n </div>\r\n </div>\r\n {errors.state && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n\r\n \r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('manager_director', {\r\n required: true,\r\n })}\r\n placeholder='Manager director'\r\n id='manager-director'\r\n autoComplete='manager-director'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.manager_director && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('staff_strength', { required: true })}\r\n placeholder='Staff Strength'\r\n id='staff-strength'\r\n autoComplete='staff-strength'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.staff_strength && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n </div>\r\n\r\n {/* Contact Form */}\r\n <div className='grid grid-cols-6 gap-y-3 gap-x-6'>\r\n <div className='col-span-6 sm:col-span-6'>\r\n <div className='mb-4'>\r\n <h2 className='text-lg font-bold text-black uppercase'>\r\n Contact Information\r\n </h2>\r\n <span className='text-sm text-gray-600'>\r\n This section gathers information about the contact persons for\r\n your organization. All correspondences between the NCF and\r\n your organization will be addressed to the persons specified\r\n below.\r\n </span>\r\n </div>\r\n </div>\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n name='contact_person'\r\n id='contact-person-name'\r\n {...register('contact_person', { required: true })}\r\n placeholder=\"Contact Person's Name\"\r\n autoComplete='contact-person-name'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.contact_person && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('contact_person_email', {\r\n required: true,\r\n })}\r\n placeholder=\"Contact Person's Email\"\r\n id='contact-person-email'\r\n autoComplete='contact-person-email'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.contact_person_email && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('contact_person_designation', {\r\n required: true,\r\n })}\r\n placeholder=\"Contact Person's Designation\"\r\n id='contact-person-designation'\r\n autoComplete='contact-person-designation'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.contact_person_designation && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('contact_person_telephone', {\r\n required: true,\r\n })}\r\n placeholder=\"Contact Person's Telephone\"\r\n id='contact-person-telephone'\r\n autoComplete='contact-person-telephone'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.contact_person_telephone && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <div className='relative'>\r\n <select\r\n id='contact-person-gender'\r\n {...register('contact_person_gender', {\r\n required: true,\r\n })}\r\n placeholder=\"Contact Person's Gender\"\r\n autoComplete='contact-person-gender'\r\n className='block appearance-none w-full py-2 px-2 pr-8 border border-gray-300 bg-white rounded-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 sm:text-sm'\r\n >\r\n <option value='Lagos'>Male</option>\r\n <option value='Abuja'>Female</option>\r\n </select>\r\n <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>\r\n <HiOutlineChevronDown />\r\n </div>\r\n </div>\r\n {errors.contact_person_gender && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-4'>\r\n <fieldset>\r\n <div className='mt-4 space-y-4'>\r\n <div className='flex items-center'>\r\n <div className='flex items-center h-5'>\r\n <input\r\n id='new-account'\r\n {...register('new_account')}\r\n type='checkbox'\r\n className='focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded'\r\n />\r\n </div>\r\n <div className='ml-3 text-sm mt-0.5'>\r\n <label\r\n htmlFor='new-account'\r\n className='font-medium text-gray-700'\r\n >\r\n Please confirm that the information provided on this\r\n form is true and accurate.\r\n </label>\r\n </div>\r\n </div>\r\n <div className='flex items-center'>\r\n <div className='flex items-center h-5'>\r\n <HiLockClosed fontSize='large' color='#666' />\r\n </div>\r\n <div className='ml-3 text-sm mt-0.5'>\r\n <label\r\n htmlFor='shipping-address'\r\n className='font-medium text-gray-700'\r\n >\r\n DATA PROTECTION: The personal information provided by\r\n you will be held on our database and will not be shared\r\n with any third party..\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </fieldset>\r\n </div>\r\n </div>\r\n\r\n <div className='flex justify-center space-x-12 px-4 py-3 bg-gray-50 text-right sm:px-6 mt-12'>\r\n <button\r\n type='submit'\r\n className='bg-green hover:bg-green-800 inline-flex justify-center py-2 px-12 shadow-sm text-sm font-mediumrounded-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green'\r\n \r\n >\r\n Submit\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n );\r\n}\r\n\r\nexport default CorporateForm;\r\n","import React, { useState } from 'react';\r\nimport HomeSlider from './components/slider/Slider';\r\nimport { SocialTabs } from '@nfc';\r\nimport { HiOutlineChevronDown } from 'react-icons/hi';\r\nimport CorporateForm from './components/CorporateForm';\r\nimport IndividualForm from './components/IndividualForm';\r\nimport SliderBar from \"../../layout/components/SliderBar/SliderBar\"\r\nimport {UncontrolledAlert ,Alert} from 'reactstrap'\r\n\r\nfunction CorporateMembership(props) {\r\n const queryString = window.location.search;\r\n const urlParams = new URLSearchParams(queryString);\r\n const membershipType = urlParams.get('type')\r\n const price = urlParams.get('price')\r\n const error = localStorage.getItem('login-error');\r\n const success = localStorage.getItem('login-success');\r\n setTimeout(function() {\r\n localStorage.removeItem('login-error');\r\n }, 15000)\r\n setTimeout(function() {\r\n localStorage.removeItem('login-success');\r\n }, 15000)\r\n\r\n const page = 'membership'\r\n\r\n return (\r\n <div className=\"bg-white\">\r\n <HomeSlider page={page}/>\r\n <div className='w-full md:px-8 pt-16 pb-8'>\r\n <SliderBar/>\r\n <div className='mx-auto md:px-0'>\r\n <div className='text-left mb-6 px-8'>\r\n <h1 className='font-black text-2xl text-green uppercase tracking-tight'>\r\n {membershipType} MEMBERSHIP FORM\r\n </h1>\r\n {error ? \r\n <UncontrolledAlert color=\"danger\">\r\n {error}\r\n </UncontrolledAlert>\r\n \r\n : null }\r\n {success ? \r\n <UncontrolledAlert color=\"success\">\r\n {success}\r\n </UncontrolledAlert>\r\n \r\n : null } \r\n <span className='text-sm text-gray-600'>\r\n Please complete this section with information about your\r\n organization\r\n </span>\r\n </div>\r\n <div className='grid md:grid-cols-12 md:gap-8 gap-y-8 items-start'>\r\n <div className='sm:col-span-12 col-span-12'>\r\n <div>\r\n <CorporateForm membershipType={membershipType} price={price} />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n );\r\n}\r\n\r\nexport default CorporateMembership;\r\n"],"sourceRoot":""}
Zerion Mini Shell 1.0