@instincthub/react-ui 0.0.2 → 0.0.3

package/dist/assets/js/modals.js

@@ -1,192 +0,0 @@
-import { Images } from "../images/Images";
-import { isValidEmail } from "./helpFunction";
-
-// Import the css in root: import "@/assets/css/modals.css";
-export const openConfirmModal = (message, flag = false) => {
-	return new Promise((resolve) => {
-		let modal_container = document.getElementById("confirmModal");
-		if (!modal_container) {
-			modal_container = document.createElement("div");
-			modal_container.id = "confirmModal";
-		}
-
-		const modalContent = `
-      <section id="myModal" class="modal">
-        <div class="modal-content">
-          <span class="close" onClick={handleCancel()}>&times;</span>
-          <p class=${flag ? "something_bad_flagged" : "something_bad"}>${
-			flag
-				? "Unexpected things will happen if you don’t read this!"
-				: "You are about to submit!"
-		}</p>
-          <p>${
-						message ||
-						"Carefully read the instructions before making a decision. Ready? Hit the continue button!"
-					}</p>
-          <div class="mt-4">
-            <button type="button" class="danger-btn d-inline-block" onClick={handleCancel()}>Cancel</button>
-            <button type="button" class="important-btn confirm-btn" onClick={handleConfirm()}>Ok</button>
-          </div>
-        </div>
-      </section>
-    `;
-
-		modal_container.innerHTML = modalContent;
-		document.body.appendChild(modal_container);
-
-		function cleanup() {
-			modal_container.remove();
-		}
-
-		window.handleCancel = () => {
-			// User canceled!
-			cleanup();
-			resolve(false);
-			console.log("");
-		};
-
-		window.handleConfirm = () => {
-			// User confirmed
-			cleanup();
-			resolve(true);
-		};
-
-		modal_container.addEventListener("click", (e) => {
-			// Close if user clicks outside the content box.
-			const target = e.target;
-			if (target.id === "myModal" || target.id === "confirmModal") {
-				cleanup();
-			}
-		});
-	});
-};
-
-// Default call openToast();
-export const openToast = (message = "", status = 200) => {
-	const msg =
-		status === 200 || status === 201
-			? "Awesome! The update was made."
-			: status === 500
-			? "Sorry, the server can't process your request"
-			: "Hmmm..., Something went wrong. Try again";
-
-	const icons = status === 200 || status === 201 ? Images.valid : Images.error;
-
-	let modal_container = document.getElementById("openToast");
-	if (!modal_container) {
-		modal_container = document.createElement("div");
-		modal_container.id = "openToast";
-	}
-
-	const modalContent = `
-	<div class="toast-wrapper">
-		<div class="slide-in-top">
-			<div class="align-text">
-				<div class="valid_btn">
-					<img src="${icons}" alt="Status Icon" class="valid" />
-					<p
-						class="${status === 200 || status === 201 ? "isDone" : "isError"}"
-					>
-						${message || msg}
-					</p>
-				</div>
-			</div>
-			
-			<svg width="800px" height="800px" viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" 
-			class="close-btn" onClick={cleanupToast()}>
-				<path d="M3 21.32L21 3.32001" stroke="var(--Gunmetal)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-				<path d="M3 3.32001L21 21.32" stroke="var(--Gunmetal)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-			</svg>
-		</div>
-	</div>
-`;
-
-	modal_container.innerHTML = modalContent;
-	document.body.appendChild(modal_container);
-
-	window.cleanupToast = () => {
-		modal_container.remove();
-	};
-
-	setTimeout(() => {
-		cleanupToast();
-	}, 10000);
-};
-
-export const getUserEmailInputModal = (title) => {
-	/* Import the css in root: import "@/assets/css/modal.css";
-	INITIATE:
-	const handleDelete = async (option) => {
-		const endpoint = `${API_HOST_URL}assessments/${handle}/assessment-link-tree-destroy/${option.id}/`;
-		const confirm = await openConfirmDelete(option.title, token, endpoint);
-		if (confirm) {
-			// Update objects
-			const newObjects = data.filter((i) => i.id !== option.id);
-			setData(newObjects);
-		}
-	};
-	*/
-	return new Promise((resolve) => {
-		let modal_container = document.getElementById("confirmModal");
-		if (!modal_container) {
-			modal_container = document.createElement("div");
-			modal_container.id = "confirmModal";
-		}
-		let email_value;
-
-		const modalContent = `
-		<section id="myModal" class="modal">
-			<div class="modal-content">
-			<svg width="800px" height="800px" viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" 
-			class="ih_get_user_email_modal_close_btn" onClick={handleCleanUpInput()}>
-				<path d="M3 21.32L21 3.32001" stroke="var(--Gunmetal)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-				<path d="M3 3.32001L21 21.32" stroke="var(--Gunmetal)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-			</svg>
-			<h4>Enrol for ${title}</h4>
-			<p>Enter a valid Email Address</p>
-
-				<input type="email" name="email" id="userInput" oninput="handleInput(this)"/>
-				
-				<div class="action_btn">
-					<button type="button" disabled="" id="proceedBtn" class="delete_btn important-btn" onClick={handleConfirm()}>Proceed</button
-					>
-				</div>
-			</div>
-		</section>
-		`;
-
-		modal_container.innerHTML = modalContent;
-		document.body.appendChild(modal_container);
-
-		const proceedBtn = document.getElementById("proceedBtn");
-
-		window.handleInput = (e) => {
-			if (isValidEmail(e.value)) {
-				proceedBtn.disabled = false;
-				email_value = e.value;
-			} else {
-				proceedBtn.disabled = true;
-				email_value = "";
-			}
-		};
-
-		function cleanup() {
-			modal_container.remove();
-		}
-
-		window.handleConfirm = () => {
-			// Return valid email
-			if (isValidEmail(email_value)) {
-				cleanup();
-				return resolve(email_value);
-			} else {
-				openToast("You need to enter a valid email!", 400);
-			}
-		};
-
-		window.handleCleanUpInput = (e) => {
-			// Close if user clicks outside the content box.
-			cleanup();
-		};
-	});
-};

package/dist/assets/js/oauth_json.js

@@ -1,101 +0,0 @@
-// Checking the data samples returned from auth
-const profile_goggle_provider = {
-	iss: "https://accounts.google.com",
-	azp: "574381222933-fsh7rfl1ldb0p96kqjdis391ec2nkps2.apps.googleusercontent.com",
-	aud: "574381222933-fsh7rfl1ldb0p96kqjdis391ec2nkps2.apps.googleusercontent.com",
-	sub: "116653249749017901927",
-	email: "noaholatoye101@gmail.com",
-	email_verified: true,
-	at_hash: "yPbY_RWFwVagiOLCH166PQ",
-	name: "Noah Olatoye",
-	picture:
-		"https://lh3.googleusercontent.com/a/AAcHTte5gQWmNyaWOUXxP483u9es2HTREi0XCqaaBBpinA=s96-c",
-	given_name: "Noah",
-	family_name: "Olatoye",
-	locale: "en",
-	iat: 1686208695,
-	exp: 1686212295,
-};
-
-const paystackHook = {
-	data: {
-		id: 3144535842,
-		log: null,
-		fees: 300,
-		plan: {},
-		split: {},
-		amount: 20000,
-		domain: "test",
-		paidAt: "2023-09-27T07:43:53.000Z",
-		source: {
-			type: "web",
-			source: "checkout",
-			identifier: null,
-			entry_point: "request_inline",
-		},
-		status: "success",
-		channel: "card",
-		message: null,
-		paid_at: "2023-09-27T07:43:53.000Z",
-		currency: "NGN",
-		customer: {
-			id: 142045862,
-			email: "biodun.shittu@nesgroup.org",
-			phone: "",
-			metadata: null,
-			last_name: "",
-			first_name: "",
-			risk_action: "default",
-			customer_code: "CUS_vns6rjzfc1llauo",
-			international_format_phone: null,
-		},
-		metadata: {
-			user: 174,
-			amount: 200,
-			channel: "07da13e6-fb5e-496c-9a50-56f85b6f3891",
-			payload: {
-				payment_date: "2023-09-14T12:00:00Z",
-				transaction_id: "transaction_id_here",
-				additional_info: "Additional payment details here",
-			},
-			success: true,
-			currency: "NGN",
-			duration: 30,
-			referrer:
-				"https://skills.sandbox.instincthub.com/tracks/enroll/frontend-fech-diversity-beginner",
-			reminder: 0,
-			object_id: "3810262f-5d1b-43be-9cac-64ab915e3a27",
-			reference: "transaction_reference_here",
-			content_type: 112,
-			payment_channel: "Paystack",
-		},
-		order_id: null,
-		reference: "1695800624264",
-		created_at: "2023-09-27T07:43:47.000Z",
-		fees_split: null,
-		ip_address: "41.184.48.186",
-		subaccount: {},
-		authorization: {
-			bin: "408408",
-			bank: "TEST BANK",
-			brand: "visa",
-			last4: "4081",
-			channel: "card",
-			exp_year: "2030",
-			reusable: true,
-			card_type: "visa ",
-			exp_month: "12",
-			signature: "SIG_ZMq8hCbFvj2qiMLwTnNB",
-			account_name: null,
-			country_code: "NG",
-			receiver_bank: null,
-			authorization_code: "AUTH_a72c0wy3fk",
-			receiver_bank_account_number: null,
-		},
-		fees_breakdown: null,
-		gateway_response: "Successful",
-		requested_amount: 20000,
-		pos_transaction_data: null,
-	},
-	event: "charge.success",
-};

package/dist/assets/js/paystack.js

@@ -1,228 +0,0 @@
-import {
-  API_HOST_URL,
-  calculateAmountAfterDeduction,
-  reqOptions,
-  setCookie,
-} from "./helpFunction";
-import { getUserEmailInputModal, openConfirmModal, openToast } from "./modals";
-
-/*
-    const obj = {
-        authorization_code:
-            paymentMethod.authorization.authorization_code,
-        email: paymentMethod.authorization.email,
-        first_name: name.first_name,
-        last_name: name.last_name,
-        amount: option.price_object?.price[interval.id.toLowerCase()],
-        user_id: name.id,
-        channel_id: props.channelID,
-        content_type: option.content_object.content_type,
-        object_id: option.content_object.object_id,
-    };
-    const dataset = paystackDataConfig(obj);
- */
-export const paystackDataConfig = (obj) => ({
-  authorization_code: obj.authorization_code,
-  reference: new Date().getTime().toString(),
-  email: obj.email,
-  first_name: obj.first_name,
-  last_name: obj.last_name,
-  amount: obj.amount * 100, //Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200
-  publicKey: process.env.NEXT_PUBLIC_PAYSTACK_SECRET_KEY,
-  key: process.env.NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY,
-  callback_url: window.location.href,
-  metadata: obj.metadata,
-});
-
-export const chargeAuthorization = async (data) => {
-  // This function try to charge user with existing card
-  const url = "https://api.paystack.co/transaction/charge_authorization";
-  const options = {
-    method: "POST",
-    body: JSON.stringify(data),
-    headers: {
-      Authorization: `Bearer ${process.env.NEXT_PUBLIC_PAYSTACK_SECRET_KEY}`,
-      "Content-Type": "application/json",
-    },
-  };
-  const req = await fetch(url, options);
-  const res = await req.json();
-
-  if (res.data?.status === "success") {
-    openToast("Payment was successful with reference: " + res.data.reference);
-  } else {
-    openToast("Payment was failed with reference:", 400);
-  }
-
-  return res.data;
-};
-
-export const payWithPaystack = (config) => {
-  return new Promise(async (resolve) => {
-    let handler = await window.PaystackPop.setup({
-      ...config,
-      callback: (response) => {
-        //this happens after the payment is completed successfully
-        openToast("Payment complete! Reference: " + response.reference);
-        resolve(response);
-      },
-      onClose: () => {
-        openToast("Transaction was not completed, window closed.", 400);
-        resolve({ canceled: true });
-      },
-    });
-    handler.openIframe();
-  });
-};
-
-/*
-	Evoking the function with the following context params.
-	const contexts = {
-		e:"",
-		objects:props.objects,
-		configObj,
-		paymentMethod,
-		setStatus,
-		handleDBAction,
-		defaultConfirm : true,
-		label : props.objects.title,
-		coupon : "",
-		defaultMsg:`By clicking okay, you are enrolling for ${props.objects.title} with id ${props.applicationID}.`,
-		gatwayCharges: 2.5
-	}
-	handlePaymentSubmit(contexts)
-*/
-
-export async function handlePaymentSubmit(contexts) {
-  if (contexts.e) contexts.e.preventDefault();
-
-  if (contexts.defaultConfirm) {
-    let msg = `By clicking okay, you are enrolling for ${
-      contexts.label
-    } with id ${contexts.objects.object_type?.content_type || ""}.`;
-    const confirm = await openConfirmModal(contexts.defaultMsg || msg);
-    if (!confirm) return;
-  }
-  const makePayment = async () => {
-    contexts.setStatus(0);
-
-    // console.log('objects.amount: ', contexts.configObj.amount);
-
-    // Check if contexts.coupon is valid
-    let discount, mewConfigObj;
-    if (contexts.coupon) {
-      const handle = contexts.configObj.metadata.channel_username;
-      const couponObj = JSON.stringify({
-        code: contexts.coupon,
-        email: contexts.configObj.email,
-        content_type: contexts.configObj.content_type,
-        object_id: contexts.configObj.object_id,
-      });
-      const requestOptions = reqOptions("POST", couponObj, null, "json");
-      const url = `${API_HOST_URL}coupons/${handle}/validate-coupon/`;
-      const dataset = await fetch(url, requestOptions);
-      const res = await dataset.json();
-
-      discount = res.discount || 0;
-      if (res.detail) {
-        openToast(res.detail, 400);
-      } else if (res.id) {
-        openToast(`${discount}% token was applied.`);
-      }
-    }
-
-    // Remove the discount from actual amount.
-    if (discount) {
-      if (discount === 100) {
-        contexts.handleDBAction({ reference: `COUPON__${contexts.coupon}` });
-        contexts.setStatus();
-        return;
-      }
-      const amount = calculateAmountAfterDeduction(
-        contexts.configObj["amount"],
-        discount
-      );
-      openToast(amount.detail, 400);
-      mewConfigObj = {
-        ...contexts.configObj,
-        ...amount,
-      };
-    } else {
-      mewConfigObj = contexts.configObj;
-    }
-
-    // Add paystack charges
-    if (contexts.gatwayCharges) {
-      const fee = contexts.gatwayCharges / 100;
-      // Calculate the amount to charge so that after the fee deduction, it matches the intended amount
-      const totalAmount = mewConfigObj["amount"] / (1 - fee);
-      // Returns the amount rounded to 2 decimal places
-      const decimalAmount = totalAmount.toFixed(2);
-
-      // Local transactions fees are capped at ₦2000, meaning that's the absolute maximum you'll ever pay in fees per transaction
-      const localCharges = decimalAmount - mewConfigObj["amount"];
-      // console.log("localCharges: ", localCharges);
-
-      // Only charge 2k if charges exceed threshold.
-      const noMoreThan2k =
-        localCharges > 2000 ? mewConfigObj["amount"] + 2000 : decimalAmount;
-      // console.log("noMoreThan2k: ", noMoreThan2k);
-
-      mewConfigObj["amount"] = noMoreThan2k;
-    }
-
-    const dataset = paystackDataConfig(mewConfigObj);
-
-    if (contexts.configObj["amount"]) {
-      if (mewConfigObj.authorization_code) {
-        // console.log(mewConfigObj);
-        // Charge user existing payment method
-        msg = `Would you prefer we charge your existing ${contexts.paymentMethod.card_type} card that ends with ${contexts.paymentMethod.last4}?`;
-        const confirm = await openConfirmModal(msg, true);
-        if (confirm) {
-          // Charge user with existing card.
-          const res = await chargeAuthorization(dataset);
-          if (res.status === "success") {
-            contexts.handleDBAction(res);
-          }
-        } else {
-          // Request for user card details.
-          const payActivate = await payWithPaystack(dataset);
-          if (payActivate.status === "success") {
-            contexts.handleDBAction(res);
-          }
-        }
-      } else {
-        // Request for user card details if payment method doesn't exist.
-        console.log("Pay with paystack: ");
-        const payActivate = await payWithPaystack(dataset);
-        if (payActivate.status === "success") {
-          contexts.handleDBAction(payActivate);
-        }
-      }
-    } else {
-      // If cohort is free, don't request for payment.
-      contexts.handleDBAction();
-    }
-    contexts.setStatus();
-  };
-
-  // Get user email input if doesn't exist
-  const checkEmailInConfig = async () => {
-    if (!contexts.configObj.email) {
-      const emailValue = await getUserEmailInputModal(contexts.label);
-      if (emailValue) {
-        contexts.configObj.email = emailValue;
-        setCookie("email", emailValue); // store for signup use.
-        makePayment();
-      } else {
-        openToast("You need to enter a valid email!", 400);
-        await checkEmailInConfig();
-      }
-    } else {
-      setCookie("email", contexts.configObj.email); // store for signup use.
-      makePayment();
-    }
-  };
-  checkEmailInConfig();
-}

package/dist/assets/js/permissions.js

@@ -1,22 +0,0 @@
-import { getSession } from "next-auth/react";
-
-export const headerUsernamePermission = async (req) => {
-	const session = await getSession({ req });
-	const customHeader = await req.headers["x-instincthub-next-header"];
-	const headerUsername = await req.headers["username"];
-
-	if (
-		!session?.user?.name?.username === headerUsername ||
-		customHeader !== process.env.NEXT_PUBLIC_X_INSTINCTHUB_NEXT_HEADER
-	) {
-		return false;
-	} else return true;
-};
-
-export const headerKeyPermission = async (req) => {
-	const customHeader = await req.headers["x-instincthub-next-header"];
-
-	if (customHeader !== process.env.NEXT_PUBLIC_X_INSTINCTHUB_NEXT_HEADER) {
-		return false;
-	} else return true;
-};

package/dist/assets/js/utils.js

@@ -1,107 +0,0 @@
-export const CREDENTIALS = {
-  username: {
-    label: "Email",
-    type: "email",
-    placeholder: "example@gmail.com",
-  },
-  password: { label: "Password", type: "password" },
-  first_name: { label: "First Name", type: "text", placeholder: "John" },
-  last_name: { label: "Last Name", type: "text", placeholder: "Smith" },
-  mobile: { label: "Last Name", type: "tel", placeholder: "+2347000032123" },
-  date_of_birth: { label: "Last Name", type: "date" },
-  password: { label: "Password", type: "password" },
-  password2: { label: "Confirm Password", type: "password" },
-  coupon: { label: "Coupon Code (Optional)", type: "text" },
-  name: { label: "Business Name", type: "text" },
-  channel: { label: "Channel", type: "text" },
-  company_size: { label: "Company Size", type: "text" },
-  description: { label: "Description", type: "text" },
-  industry: { label: "Industry", type: "text" },
-};
-
-export const COMPANY_SIZES_CHOICES = [
-  "1-10",
-  "11-50",
-  "51-200",
-  "201-500",
-  "501-1000",
-  "1001-5000",
-  "5001-10,000",
-  "10,001+",
-];
-export const PROGRAM_LEVELS = ["100", "200", "300", "400", "500"];
-export const INDUSTRIES = [
-  "Information Technology",
-  "Finance",
-  "Healthcare",
-  "Education",
-  "Manufacturing",
-  "Retail",
-  "Hospitality",
-  "Transportation",
-  "Media",
-  "Telecommunications",
-  "Real Estate",
-  "Construction",
-  "Energy",
-  "Automotive",
-  "Food and Beverage",
-  "Agriculture",
-  "Pharmaceutical",
-  "Entertainment",
-  "Sports",
-  "Fashion",
-  "Art and Design",
-  "Government",
-  "Non-profit",
-  "Other",
-];
-
-export const gaugeData = [
-  { rating: 1, level: 10 },
-  { rating: 2, level: 20 },
-  { rating: 3, level: 0 },
-  { rating: 4, level: 2 },
-  { rating: 5, level: 21 },
-];
-
-export const SCOREBOARD_DURATION = [
-  { id: 0, title: "All" },
-  { id: 1, title: "7 Days" },
-  { id: 4, title: "One  Month" },
-  { id: 12, title: "Three Month" },
-  { id: 24, title: "Six Month" },
-  { id: 48, title: "One Year" },
-];
-
-export const CURRENCY_SYMBOL = {
-  USD: "$",
-  AUD: "$",
-  BRL: "R$",
-  CAD: "$",
-  CLP: "$",
-  COP: "$",
-  EGP: "£",
-  EUR: "€",
-  GBP: "£",
-  IDR: "Rp",
-  ILS: "₪",
-  INR: "₹",
-  JPY: "¥",
-  KRW: "₩",
-  MXN: "$",
-  MYR: "RM",
-  NGN: "₦",
-  NOK: "kr",
-  PEN: "S/",
-  PHP: "₱",
-  PLN: "zł",
-  RON: "RON",
-  RUB: "₽",
-  SGD: "$",
-  THB: "฿",
-  TRY: "₺",
-  TWD: "NT$",
-  VND: "₫",
-  ZAR: "R",
-};

package/dist/assets/json/Courses.json

@@ -1,40 +0,0 @@
-{
-  "courses": [
-    {
-      "id": 1,
-      "title": "Introduction to React",
-      "description": "Learn the basics of React and how to build web applications using this popular JavaScript library.",
-      "tags": ["Beginner", "React", "JavaScript"]
-    },
-    {
-      "id": 2,
-      "title": "Advanced React Techniques",
-      "description": "Take your React skills to the next level with this advanced course on advanced techniques like server-side rendering and hooks.",
-      "tags": ["Advanced", "React", "JavaScript"]
-    },
-    {
-      "id": 3,
-      "title": "React Native Fundamentals",
-      "description": "Discover how to build cross-platform mobile apps using React Native, a powerful and popular framework for mobile development.",
-      "tags": ["Beginner", "React", "Mobile"]
-    },
-    {
-      "id": 4,
-      "title": "Node.js for Beginners",
-      "description": "Learn how to build scalable and efficient server-side applications using Node.js, a popular and powerful JavaScript runtime.",
-      "tags": ["Beginner", "Node.js", "JavaScript"]
-    },
-    {
-      "id": 5,
-      "title": "Advanced Node.js Concepts",
-      "description": "Take your Node.js skills to the next level with this advanced course on topics like concurrency, event loops, and memory management.",
-      "tags": ["Advanced", "Node.js", "JavaScript"]
-    },
-    {
-      "id": 6,
-      "title": "JavaScript Fundamentals",
-      "description": "Master the basics of JavaScript and learn how to build web applications and interactive user interfaces using this powerful programming language.",
-      "tags": ["Beginner", "JavaScript"]
-    }
-  ]
-}