Revised _customer.js file that blocks the display of cancelled subscriptions along w/ non-ohana boxes.

_customer.js

const rc_container = document.getElementById('recharge_add_to_upcoming')
const sub_form = document.getElementById('upcoming_subscriptions')
const sub_add_btn = document.getElementById('add_to_subscription')
const variant_selector = document.getElementById('productSelect-1')
const adding_loader = document.getElementById('adding_to_')

const available_content = document.getElementById('available-add-on')
const success_content = document.getElementById('add-on-success')
const ohana_skus = [
	'30900',
	'30901',
	'30902',
	'30903',
	'30904',
	'30905',
	'30906',
	'30907',
	'30910',
	'30911',
	'30912',
	'30913',
	'30914',
	'30915',
	'30916',
	'30917'
]

const get_customer_shipdates = async(id, type) => {
	if(!sessionStorage.getItem('rcdt')) {
	await fetch('https://maui-nui.herokuapp.com/web/customers/subscriptions.php?type=get&id=' + id)
		.then(response => response.json())
		.then(data => {
			if(data.customers[0] && data.customers[0].include?.subscriptions.length > 0) {
				sessionStorage.setItem('rcdt', JSON.stringify(data.customers[0].include.subscriptions))
				sessionStorage.setItem('rchash', data.customers[0].hash)
			} else {
				sessionStorage.setItem('rcdt',false)
				rc_container.style.display = "none"
			}
		})
	}
	if(type == 'add-on') setup_forms()
	else determine_ohana()
} 
const determine_ohana = () => {
	const route = window.location.pathname
	const storage_data = sessionStorage.getItem('rcdt')
	let subType = null
	let shipDate = null
	let active_ohana_item = null
	
	//Elements
	const admin_container = document.getElementById("upcoming-order-details")
	const legacy_container = document.getElementById("box-legacy")
	const new_container = document.getElementById("box-new")
	const next_ship_txt = document.getElementById("next-shippment")
	const in_box_text = document.getElementById("ohana-in-box")
	const in_box_message = document.getElementById("in-box-message")
	const product_json = document.getElementById("ProductJson-1")
	
	//console.log(route)
	
	if(storage_data) {
		const subscriptions = JSON.parse(storage_data)
		
		subscriptions.forEach((subscription) => {
			if(ohana_skus.includes(subscription.sku) && subscription.status == 'active' || subscription.product_title == "'Ohana Box" && subscription.status == 'active') {
				if(subscription.sku > 30910) {
					subType = 'new'
				} else {
					subType = 'legacy'
				}
				active_ohana_item = subscription
				shipDate = new Date(subscription.next_charge_scheduled_at).toDateString()
			}
		})
		
		if(route == "/account" && subType != null) {
			if(next_ship_txt)
				next_ship_txt.innerHTML = "Next Shipment: " + shipDate
			
			if(subType == 'legacy') {
				new_container?.remove()
			} else {
				legacy_container?.remove()
			}
			
			if(admin_container)
				admin_container.classList.toggle('hidden')
		}
		
		if(route.includes('products') && product_json) {
			const current_product = JSON.parse(product_json.innerHTML)
			
			if(ob_addons.legacy_special.includes(current_product.handle) 
			|| ob_addons.legacy_premium.includes(current_product.handle) 
			|| ob_addons.new_special.includes(current_product.handle) 
			|| ob_addons.new_premium.includes(current_product.handle)) 
			{
				if(in_box_text) {
					//in_box_message.append('Your next box ships on ' + shipDate)
					in_box_text?.classList.toggle('hidden')
				}
			}
		}
		
		if(route.includes('ohana-impact-sale') && active_ohana_item) {
			const defaultValue = 4
			const impact_cont = document.getElementById('impact-product-container')
			const impact_error = document.getElementById('impact-error')
			const txt_title = document.getElementById('oh--title')
			const txt_addOns = document.getElementById('oh--add-ons')
			const txt_addOnsList = document.getElementById('oh--add-ons-list')
			const intervals = document.getElementById('oh--fieldset')
			const variantdropdown = document.getElementById('productSelect-1')
			
			/*
			 *
			 * Pre-select the users variant
			 *
			 */
			const $options = Array.from(variantdropdown.options)
			const optionToSelect = $options.find(item => item.text === active_ohana_item.variant_title)
			variantdropdown.value = optionToSelect.value
			
			const variantData = variantdropdown.querySelector(':checked')
			document.getElementById('rc--customer').value = active_ohana_item.customer_id
			document.getElementById('rc--address').value = active_ohana_item.address_id
			document.getElementById('rc--sku').value = active_ohana_item.sku
			document.getElementById('rc--date').value = active_ohana_item.next_charge_scheduled_at
			
			/*
			 * Setup Intervals 
			 *
			 */
			intervals.addEventListener('change', function(ev) {
				let adjustedcount = ev.target.value
				const newSavings = adjustedcount * variantData.dataset.savings
				const newTotal = adjustedcount * variantData.dataset.price
				const newMaxPrice = adjustedcount * variantData.dataset.ogprice
				document.getElementById('rc--preorder').value = adjustedcount
				document.getElementById('oh--savings').innerHTML = "$" + newSavings.toFixed(2).toLocaleString("en-US")
				document.getElementById('oh--full-price').innerHTML = "$" + newMaxPrice.toFixed(2).toLocaleString("en-US")
				document.getElementById('oh--disc-price').innerHTML = "$" + newTotal.toFixed(2).toLocaleString("en-US")
			})
			
			document.getElementById('boxcount_' + defaultValue).click()
			
			/*
			 *
			 * Set visibility 
			 *
			 */
			 
			//console.log(active_ohana_item)
			impact_error.remove()
			impact_cont.classList.remove('hidden')
			
			//ADD ONS
			if(active_ohana_item.variant_title != "'Ohana Box") {
				const addons = active_ohana_item.variant_title.split("|")
				let listValues = ''
				addons.forEach((item) => {
					listValues = listValues + '<li>' + item + '</li>'
				})
				txt_addOnsList.innerHTML = listValues
				
			} else {
				txt_addOns.remove()
			}
			
			//PRICE
			const txt_price = document.getElementById('oh--price')
			const priceval = parseInt(active_ohana_item.price) + 30
			txt_price.innerHTML = '$' + priceval + ' / Per Order'
			
			document.getElementById('oh--date').innerHTML = formatDate(active_ohana_item.next_charge_scheduled_at)
			document.getElementById('oh--delivery').innerHTML = active_ohana_item.order_interval_frequency + ' Weeks'
		}
	}
}

const setup_forms = () => {
	const storage_data = sessionStorage.getItem('rcdt')
	if(storage_data) {
		//SETUP SELECT OPTION//
		const subscriptions = JSON.parse(storage_data)
		subscriptions.forEach((subscription) => {
			if(subscription.product_title == "'Ohana Box" && subscription.status == 'active') {
				const shortDate = new Date(subscription.next_charge_scheduled_at).toDateString()
				sub_form.options[sub_form.options.length] = new Option(subscription.product_title + ' / ' + shortDate, subscription.id)
			}
		})
		
		if(sub_form.options.length === 0) {
			rc_container.getElementsByTagName('fieldset')[0].remove();
			rc_container.getElementsByTagName('h5')[0].remove();
			rc_container.classList.remove('border')
			sub_add_btn.remove();
			return false;
		}
		
		sub_add_btn.addEventListener('click', function(e) {
			e.preventDefault()
			
			adding_loader.classList.toggle('hidden')
			
			const inx = variant_selector.selectedIndex
			const ixval = variant_selector.options[inx]
			
			const dataEl = subscriptions.find(option => option.id == sub_form.value)
			
			const requestBody = {
				"address_id": dataEl.address_id,
				"next_charge_scheduled_at": dataEl.next_charge_scheduled_at,
				"price": ixval.dataset.price,
				"product_title": ixval.dataset.name,
				"quantity": 1,
				"external_variant_id": variant_selector.value
			}
			
			const formData = new FormData()
			for ( var key in requestBody ) {
				formData.append(key, requestBody[key])
			}
			
			fetch('https://maui-nui.herokuapp.com/web/customers/subscriptions.php?type=add', {
				  method: 'POST',
				  body: formData,
				})
				  .then((response) => response.json())
				  .then((data) => {
					//console.log('Success:', data);
					if(data.data && !data.data.includes('error')) {
						const response = JSON.parse(data.data)
						const cleanDate = new Date(response["onetime"].next_charge_scheduled_at).toDateString()
						//console.log(response["onetime"].product_title)
						let message = response["onetime"].product_title + ' has been added to your upcoming subscription scheduled for ';
							message += cleanDate + '. Your account will be charged $' + response["onetime"].price + ' prior to delivery';
						//console.log(message)
						document.getElementById('add-on-message').innerHTML = message
						adding_loader.classList.toggle('hidden')
						available_content.classList.toggle('hidden')
						success_content.classList.toggle('hidden')
					} else {
						console.error('ERROR:', data.data)
						rc_container.classList.add('border-red-600')
					}
				  })
				  .catch((error) => {
					console.log(error)
					rc_container.classList.add('border-red-600')
				  });
			
			//console.log(requestBody)
		})
	} else {
		rc_container.remove()
	}
}

const formatDate = (inputDate) => {
  let date, month, year;
  inputDate = new Date(inputDate)
  date = inputDate.getDate()
  month = inputDate.getMonth() + 1
  year = inputDate.getFullYear()

	date = date
		.toString()
		.padStart(2, '0');

	month = month
		.toString()
		.padStart(2, '0');

  return `${month}/${date}/${year}`;
}