Boilerplate for custom functionality for any page

Here is a boilerplate for creating new custom functionality, y'all can copy and paste this page and callback from all page modules.

I coded this page for the Valuemed client, and it looks functional, clean and makes our work more efficient, and makes it a booster.

It has jsDoc based comment blocks and inline comments for every important step.

import axios from 'axios';
import $ from 'jquery';
import endpoint from './endpoint.json';
import swal from "sweetalert2";

const App = {
    const: {
        $body: $('body'),
        $productId: $('[name="product_id"]').val(),
        $orderId: $('[name="order_id"]').val(),
        $productSKUs: [],
        $headers: {
            headers: {
                Authorization: null,
            },
        },
        $pauseButton: '.pause-subscription--Button',
        $cancelButton: '.cancel-subscription--Button',
        $activeButton: '.active-subscription--Button',
    },
    func: {
        /**
         * Authorization for the OPT7 API
         * @function auth
         * @returns {Boolean} Returns success or fail
         */
        auth: async () => {
            return axios.post(endpoint.URL)
                .then((res) => {
                    App.const.$headers.headers.Authorization = `Bearer ${res.data.token}`;
                    return true;
                })
                .catch((err) => {
                    console.log(err.response)
                    return false;
                })
        },

        /**
         * Async API Request Sample.
         * @function _asyncAPIRequest
         * @param {string} id The product id for the API response
         * @returns {Object} Returns success or fail.
         */
        _asyncAPIRequest: (id) => {
            return axios.get(`${endpoint.URL}`, App.const.$headers)
                .then((response) => {
                    return response;
                })
                .catch((err) => {
                    return err.response;
                })
        },

        /**
         * Pause and Cancel Subscription button click Apps.
         * @function _actionButtonsApp
         * @returns {Object} Returns success or fail.
         */
        _actionButtonsApp: () => {
            console.log('Action Buttons are ready...');
            App.const.$body.on('click', App.const.$pauseButton, async (event) => {
                // Action some stuff for click event
            })
            App.const.$body.on('click', App.const.$cancelButton, async (event) => {
                // Action some stuff for click event
            })
            App.const.$body.on('click', App.const.$activeButton, async (event) => {
                // Action some stuff for click event
            })

        }
    },
    init: async () => {
        console.log(`%cApp is Ready!`, 'font-size:11.5px; background-color:#cc0000; color:#ffffff; padding: 5px 9px 3px 9px; border-radius:3px;');

        // Authorization Process with async/await function...
        let [authResponse] = await Promise.all([App.func.auth()]);

        // Action buttons init App.
        App.func._actionButtonsApp();

        if (authResponse) {
           // If passes the authorization, do some stuff.
        }
    }
}

export default async function () {
    // Start the functionality...
    await App.init();
}

Y'all can import it and call like that;

import customFunctionality from "./custom/customFunctionality";
//...
//...
//...
customFunctionality();

Happy Hacking! 🧡