Shorten Code for Upload Button on Custom Form

Discussion Ask a question
,
1

Hello, I’m new and I need help with shortening my code, I tried global objects but couldn’t get them to work.

It’s a custom form with 6 different paid packages. It works but it’s clunky and a pain to adapt.

This is what the Form looks like without the paid packages.
-This form link is a prop, it works but doesn’t include the Pay API.
-Below is what the package buttons look like on the actual page I’m building.

Requirements for the Form:

  1. Only the first 5 fields are required, the rest are not.

  2. There are 2 Databases, database1 takes all the information and database2 only collects the name and email.

  3. On checkout, a string is uploaded to database1’s item “package.” This string changes according to which button is clicked, such as ‘package 1’. (This informs me of which package was picked)

Code:

import wixData from 'wix-data';
import wixPay from 'wix-pay'
import { package1, package2, package3, package4, package5, package6} from 'backend/BE_PayAPI';
import wixLocation from 'wix-location';

$w.onReady(function () {});

 //Button 1 - 1 Month $5.99 Checkout
export function buy_click1(event, $w) {

 //This checks if required fields are filled, if not, shows & scrolls to error message.
 if ($w('#name').valid === false || $w('#email').valid === false || $w('#business').valid === false || $w('#title').valid === false || $w('#description').valid === false) {
        $w('#error').show();
        $w("#error").scrollTo();
        
 //This checks if the image upload field contains a file, if it DOES NOT, then it starts Pay API and after successful payment the form submits without image upload.
} else if ($w('#image').value.length === 0) {
package1().then(payment => { //Starts payment API for package 1
wixPay.startPayment(payment.id, )
.then((result) => {
 if (result.status === "Successful") //If the package 1 Pay API is a success then...
 $w('#uploadingGif').show() //Shows hidden uploading animation.
 let saveWithoutImage = { //Defines the input values for database.
 "name": $w("#name").value,
 "email": $w("#email").value,
 "title": $w("#title").value,
 "start": $w("#start").value,
 "businessName": $w("#business").value,
 "package": "package 1", //This field needs to change for each package.
 "price": $w("#price").value,
 "description": $w("#description").value,
 "eventStart": $w("#eventStart").value,
 "eventEnd": $w("#eventEnd").value,
 "timeStart": $w("#timeStart").value,
 "timeEnd": $w("#timeEnd").value,
 "weekDays": $w("#weekDays").value,
 "website": $w("#website").value,
 "location": $w("#location").value,
 "phone": $w("#phone").value,
 "notes": $w("#notes").value,
                                };
wixData.save('database1', saveWithoutImage)  //Save to database1
.then((results) => {
 let item = results;
})
.catch((err) => {
 let errorMsg = err;
});
 
 let subscribes = {   //Save to database2
 "email": $w("#email").value,
 "name": $w("#name").value,
};
wixData.save('database2', subscribes)
.then((results) => {
 let item = results;
})
.catch((err) => {
 let errorMsg = err;
});
wixLocation.to("/thankyou"); //Brings to Thank you page after upload.

 // If the upload image field DOES contain a file, the Pay API starts and after a successful payment the form submits with image upload.
} else {
package1().then(payment => {
wixPay.startPayment(payment.id, )
.then((result) => {
 if (result.status === "Successful") {
$w('#uploadingGif').show()
$w("#image").startUpload()//Image upload
.then((uploadedFile) => {
 let url = uploadedFile.url;
 let saveWithImage = {
 "package": "package 1",
 "name": $w("#name").value,
 "email": $w("#email").value,
 "title": $w("#title").value,
 "start": $w("#start").value,
 "businessName": $w("#business").value,
 "image": url, //Image preview sent to database1
 "price": $w("#price").value,
 "description": $w("#description").value,
 "eventStart": $w("#eventStart").value,
 "eventEnd": $w("#eventEnd").value,
 "timeStart": $w("#timeStart").value,
 "timeEnd": $w("#timeEnd").value,
 "weekDays": $w("#weekDays").value,
 "website": $w("#website").value,
 "location": $w("#location").value,
 "phone": $w("#phone").value,
 "notes": $w("#notes").value,
};
wixData.save('database1', saveWithImage)
.then((results) => {
 let item = results;
})
.catch((err) => {
 let errorMsg = err;
});
 let subscribes = {
 "email": $w("#email").value,
 "name": $w("#name").value,
};
wixData.save('database2', subscribes)
.then((results) => {
 let item = results;
})
.catch((err) => {
 let errorMsg = err;
});
wixLocation.to("/thankyou");
})
}
});
});
}
}

I have to write this for every buttons 6 times! Help me shorten it please :grin:.

Thank you so much, let me know if you need more information and I hope this can be of use to other people.