Log events to console

src/CheckoutAPI.ts

@@ -51,6 +51,7 @@ export default function CheckoutAPI(options?: CheckoutConfiguration) {
 
 	// Initialise.
 	if (options) {
+		logger.log("Checkout Instance: Initialising...");
 		initialise(options);
 	}
 
@@ -64,6 +65,8 @@ export default function CheckoutAPI(options?: CheckoutConfiguration) {
 				throw new Error("Invalid component");
 			}
 
+			logger.log(`${DROP_IN_COMPONENTS[component]}: Initialising...`);
+
 			// Invalid or no configuration
 			if (!store.options) throw new Error("No config!");
 
@@ -76,26 +79,30 @@ export default function CheckoutAPI(options?: CheckoutConfiguration) {
 		update(opt: CheckoutConfiguration) {
 			if (!opt || typeof opt !== "object") throw new Error("Invalid configuration!");
 
+			logger.log("Checkout Instance: Updating...");
+
 			const updatedStore = initialise({ ...store.options, ...opt });
 
 			if (updatedStore.options) {
 				Object.keys(elements).forEach((sere) => {
 					elements[sere].update(updatedStore.options);
 				});
 			}
-
-			logger.log("List id updated", updatedStore);
 		},
 		destroy() {
+			logger.log("Checkout Instance: Destroying...");
+
 			// Unmount all registered drop-in-components
 			Object.keys(elements).forEach((el) => {
 				elements[el].unmount();
 			});
 
 			// Clear store data
 			store.options = {} as CheckoutConfiguration;
+			logger.log("Checkout Instance: Destroyed...");
 		},
 		reload() {
+			logger.log("Checkout Instance: Reloading...");
 			// TODO: reload list data from OPG.
 			if (elements && Object.keys(elements).length > 0) {
 				Object.keys(elements).forEach((el) => {

src/DropInComponent.ts

@@ -6,28 +6,42 @@ export default function DropInComponent(
 	options: CheckoutConfiguration & Partial<DropInComponentConfig>,
 	env: Env,
 ) {
+	let newOptions: CheckoutConfiguration & Partial<DropInComponentConfig>;
 	let element: HTMLElement;
 	let parentNode: HTMLElement;
 
-	function updateOptions(updatedOptions: CheckoutConfiguration): void {
-		logger.log({ updatedOptions }, "updated", updatedOptions?.listId);
-		if (updatedOptions?.listId) {
-			element.setAttribute("listurl", env.buildListURL(updatedOptions?.listId));
+	function updateOptions(
+		updatedOptions: CheckoutConfiguration & Partial<DropInComponentConfig>,
+	): void {
+		// eslint-disable-next-line no-underscore-dangle
+		const _newOptions: CheckoutConfiguration & Partial<DropInComponentConfig> = {
+			...options,
+			...updatedOptions,
+		};
+
+		if (_newOptions?.listId) {
+			logger.log(`${name}: Updating options`);
+			element.setAttribute("listurl", env.buildListURL(_newOptions?.listId));
 		}
+
+		newOptions = _newOptions;
+		logger.log(`${name}: Updated...`, newOptions);
 	}
 
 	const initialise = async () => {
 		element = document.createElement(name);
 
 		const script = await loadScript(env.buildCDNLink(name), name);
+
 		// logger.log({ script });
 
 		if (!script.isLoaded) throw new Error("Initialisation failed.");
+		logger.log(`${name}: CDN script injected to DOM head with an id of #${name}-script`);
 
 		element.id = `${name}-component`;
 
 		updateOptions(options);
-		logger.log("Scripts loaded and element is created");
+		logger.log(`${name}: Initialised...`);
 	};
 
 	/**
@@ -37,24 +51,31 @@ export default function DropInComponent(
 
 	return {
 		mount(node: HTMLElement) {
+			logger.log(`${name}: mounting to DOM`);
 			node.appendChild(element);
 			parentNode = node;
+			logger.log(`${name}: mounted to #${node.id}`);
 			return this;
 		},
 		unmount() {
 			// TODO: clear all events as well.
+			logger.log(`${name}: unmounting from DOM`);
 			parentNode.innerHTML = "";
+			logger.log(`${name}: unmounted`);
 			return this;
 		},
 		update(opt: CheckoutConfiguration | undefined): void {
 			if (opt) updateOptions(opt);
 		},
 		reload() {
+			logger.log(`${name}: Reloading...`);
 			initialise();
 		},
 		pay() {
+			logger.log(`${name}: Making payment...`);
 			// TODO: implement pay method.
 			// Check if pay button is hidden from given drop in component.
+			logger.log(`${name}: Payment instruction sent`);
 		},
 	};
 }