feat: Added send lead payload

.env.example

@@ -0,0 +1,2 @@
+REACT_APP_GOOGLE_MAPS_API_KEY=
+REACT_APP_API_URL=

src/pages/EnergyCalculator/EnergyCalculatorPage.tsx

@@ -12,7 +12,12 @@ import FuelForm from './components/form/FuelForm';
 import './styles.scss';
 import { FormSchema, FormStep, ResultRouteState } from './types/form';
 import { useMultistepForm } from './utils/useMultistepForm';
-import { calculateEnergies, CalculateEnergyParams, CalculateEnergyResultUI } from './utils/fuel';
+import {
+    calculateEnergies,
+    CalculateEnergyParams,
+    CalculateEnergyResultUI,
+    SelectedFuel
+} from './utils/fuel';
 
 
 const INITIAL_DATA: FormSchema = {
@@ -54,6 +59,15 @@ const FORM_STEPS: FormStep[] = [
     },
 ]
 
+type SendLeadPayload = {
+    submissionDate?: string;
+    companyName?: string
+    email?: string;
+    phoneNumber?: string;
+    selectedFuels?: SelectedFuel[]
+    city?: string
+}
+
 const EnergyCalculatorPage = () => {
     const [isCalculating, setIsCalculating] = useState<boolean>(false)
     const {
@@ -80,34 +94,64 @@ const EnergyCalculatorPage = () => {
         return back()
     }
 
-    // TODO: Wire submit form to BE API
     function onSubmit(data: FormSchema) {
-        if (isLastStep) {
-            setIsCalculating(true)
-            setTimeout(() => {
-                const calculatorParams: CalculateEnergyParams[] = [];
-
-                data.energyUsages.forEach((item) => {
-                    if (item.name && item.unit && item.usageValue) {
-                        calculatorParams.push({
-                            name: item.name,
-                            unit: item.unit,
-                            usageValue: item.usageValue,
-                        })
-                    }
-                })
+        if (!isLastStep) {
+            return;
+        }
 
-                const calculatorResult: CalculateEnergyResultUI = calculateEnergies(calculatorParams);
+        setIsCalculating(true)
 
-                console.log('FORM RESULT', { data, calculatorResult });
-                setIsCalculating(false)
+        const calculatorParams: CalculateEnergyParams[] = [];
 
+        data.energyUsages.forEach((item) => {
+            if (item.name && item.unit && item.usageValue) {
+                calculatorParams.push({
+                    name: item.name,
+                    unit: item.unit,
+                    usageValue: item.usageValue,
+                })
+            }
+        })
+
+        const calculatorResult: CalculateEnergyResultUI = calculateEnergies(calculatorParams);
+
+        // TODO: Hit real endpoint
+        fetch(
+            `${process.env.REACT_APP_API_URL}/post-lead`,
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(constructPayload(data, calculatorResult)),
+            }
+        )
+            .then(response => response.json())
+            .then(() => {
                 const resultRouteState: ResultRouteState = {
                     formData: data,
                     calculatorResult,
                 }
+
                 navigate('/energy-calculator/result', { state: resultRouteState })
-            }, 1000);
+            }).catch((error) => {
+                console.log('Failed to send lead data');
+                console.log(error);
+
+            })
+            .finally(() => {
+                setIsCalculating(false)
+            })
+    }
+
+    const constructPayload = (data: FormSchema, calculatorResult: CalculateEnergyResultUI): SendLeadPayload => {
+        return {
+            submissionDate: new Date().toDateString(),
+            companyName: data.companyName,
+            email: data.email,
+            phoneNumber: data.phone,
+            selectedFuels: calculatorResult.selectedFuels,
+            city: data.location?.city
         }
     }
 

src/pages/EnergyCalculator/utils/fuel.ts

@@ -69,7 +69,15 @@ export type CalculateEnergyParams = {
   usageValue: number
 }
 
+export type SelectedFuel = {
+  name: string
+  unit: string
+  amount: number
+  naturalGasVolume: number
+}
+
 export type CalculateEnergyResultUI = {
+  selectedFuels: SelectedFuel[]
   currentExpenditurePerYear: number
   naturalGasExpenditurePerYear: number
   fuelTaxPerYear: number
@@ -225,6 +233,15 @@ export function calculateEnergy({
   // console.log(co2EmissionReductionPercentage)
   // console.log(co2EmissionReductionPerYear)
 
+  // For Leads purpose
+  const selectedFuels: SelectedFuel[] = []
+  selectedFuels.push({
+    name,
+    unit,
+    amount: unit === 'Rupiah' ? volume : usageValue,
+    naturalGasVolume: volumeM3,
+  })
+
   return {
     volume,
     volumeM3,
@@ -239,6 +256,7 @@ export function calculateEnergy({
     taxSaving,
     co2EmissionReduction,
     totalSaving,
+    selectedFuels,
     currentExpenditurePerYear,
     naturalGasExpenditurePerYear,
     fuelTaxPerYear,
@@ -260,6 +278,8 @@ export function calculateEnergy({
 export function calculateEnergies(
   data: CalculateEnergyParams[]
 ): CalculateEnergyResultUI {
+  let selectedFuels: SelectedFuel[] = []
+
   let currentExpenditurePerYear = 0
   let naturalGasExpenditurePerYear = 0
 
@@ -276,6 +296,8 @@ export function calculateEnergies(
   data.forEach((item) => {
     const result = calculateEnergy(item)
     if (result) {
+      selectedFuels.push(...result.selectedFuels)
+
       currentExpenditurePerYear += result.currentExpenditurePerYear
       naturalGasExpenditurePerYear += result.naturalGasExpenditurePerYear
 
@@ -309,6 +331,7 @@ export function calculateEnergies(
   // console.log(co2EmissionReductionPerYear)
 
   return {
+    selectedFuels,
     currentExpenditurePerYear,
     naturalGasExpenditurePerYear,
     totalSavingPercentage,