${data.email}
\n${data.display}
\n${data.phone_number || ''}
\n${data.date_of_birth || ''}
\nRecommended to have the best experiences in one month.
Cost per troche.
Rugiet Ready recommends startingwith half a troche to see if that'senough to get the job done.
Cost per month.
You'll be billed for the full price ofyour plan and the number of dosesand shipped, whether it's a 30-Day Plan(Monthly) or 90-Day plan (Quarterly).
Preview not Available
\";\n } else {\n image = document.createElement('img');\n image.className = 'p-1 border border-black rounded-md col-span-1 flex place-self-center h-[60px] md:h-[80px] w-[60px] md:w-[80px]';\n image.src = reader.result;\n }\n\n return [div, fallbackContainer, image];\n }\n\n addRemoveIcon(file, thumbnailContainer) {\n const removeIcon = document.createElement('i');\n removeIcon.className = 'hover:cursor-pointer fas fa-times-circle block text-xl mt-px -my-1';\n removeIcon.onclick = () => {\n this.removeFileFromFileList(file);\n thumbnailContainer.remove();\n this.updateAfterRemoval();\n };\n\n return removeIcon;\n }\n\n updateAfterRemoval() {\n if (this.imgPreviewContainerTarget.querySelector('.thumbnail-container')) return;\n\n this.imgPreviewContainerTarget.classList.add('hidden');\n this.fileInputLabelTarget.classList.remove('hidden');\n this.imgPreviewContainerTarget.closest('.collapsible-content').style.maxHeight = '600px';\n }\n\n validateFiles() {\n const { files } = this.fileInputTarget;\n const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'heic', 'heif'];\n const sizeLimit = 5 * 1024 * 1024; // 5 megabytes\n\n if (files.length > 10) {\n this.showToast({\n text: 'Please select 10 or fewer files.',\n type: 'error',\n duration: 5000,\n });\n this.clearFileInputValue();\n return;\n }\n\n const invalidFile = Array.from(files).find((file) => {\n const fileExtension = file.name.split('.').pop().toLowerCase();\n const isInvalidType = !allowedExtensions.includes(fileExtension);\n const isOversized = file.size > sizeLimit;\n\n if (isInvalidType) {\n this.showToast({\n text: 'One of your files has an invalid file type. Please select files with a valid type.',\n type: 'error',\n duration: 5000,\n });\n } else if (isOversized) {\n this.showToast({\n text: 'One of your files exceeds 5 MB in size. Please select files smaller than 5 MB.',\n type: 'error',\n duration: 5000,\n });\n }\n\n return isInvalidType || isOversized;\n });\n\n if (invalidFile) this.clearFileInputValue();\n }\n\n clearFileInputValue() {\n this.fileInputTarget.value = '';\n }\n\n removeFileFromFileList(fileToRemove) {\n const dt = new DataTransfer();\n const { files } = this.fileInputTarget;\n\n Array.from(files).forEach((file) => {\n if (file.name !== fileToRemove.name) {\n dt.items.add(file);\n }\n });\n\n this.fileInputTarget.files = dt.files;\n }\n\n removeFilePreviews() {\n this.imgPreviewContainerTarget.querySelectorAll('.thumbnail-container').forEach((thumbnail) => thumbnail.remove());\n this.imgPreviewContainerTarget.classList.add('hidden');\n if (this.fileInputTarget.files.length) this.fileInputLabelTarget.classList.add('hidden');\n }\n\n toggleCollapse(event) {\n const content = event.currentTarget.parentElement.querySelector('.collapsible-content');\n const chevron = event.currentTarget.querySelector('img');\n\n if (content.classList.contains('expanded')) {\n content.style.maxHeight = '0';\n } else {\n content.style.maxHeight = `${content.scrollHeight}px`;\n }\n\n chevron.classList.toggle('rotate-180');\n content.classList.toggle('expanded');\n }\n\n promoUpdate() {\n const promoCode = document.getElementById('promo_code').value;\n if (!!promoCode) {\n this.callStimulusAction({\n cb: () => {\n this.stimulate('Store::MembersPortal::PromoUpdateReflex#update', promoCode);\n },\n });\n }\n }\n\n toggleWeightHistory() {\n document.querySelectorAll('.card.toggle-target').forEach(el => el.classList.toggle('!hidden'));\n }\n}\n","import ApplicationController from \"../../application_controller\";\n\nexport default class extends ApplicationController {\n connect() {\n super.connect();\n }\n\n initialize() {\n $(this.element).select2({\n templateSelection: this.formatState,\n minimumResultsForSearch: Infinity,\n });\n }\n\n formatState(state) {\n if (!state.id) {\n return state.text;\n }\n\n if (window.location.pathname !== state.id) {\n window.location = state.id;\n }\n\n const $state = $(\n ''\n );\n\n $state.find(\"span\").text(state.text);\n\n return $state;\n }\n}\n","import ApplicationController from '../../application_controller';\nimport { hideLoadingSpinner, showLoadingSpinner } from '../../utilities/loading_spinner';\nimport { handlePromoSuccess, handlePromoError } from '../../utilities/order_summary_promo_application';\n\nexport default class extends ApplicationController {\n connect() {\n super.connect();\n\n document.addEventListener('promo-update-success', this.handlePromoSuccess);\n document.addEventListener('promo-update-error', this.handlePromoError);\n }\n\n disconnect() {\n super.disconnect();\n\n document.removeEventListener('promo-update-success', this.handlePromoSuccess);\n document.removeEventListener('promo-update-error', this.handlePromoError);\n }\n\n orderMore(event) {\n event.preventDefault();\n showLoadingSpinner();\n this.stimulate('Store::MembersPortal::OrderNow#set_order_now_details').then(hideLoadingSpinner);\n }\n\n confirmOrderMore(event) {\n event.preventDefault();\n event.currentTarget.style = 'pointer-events: none;';\n event.currentTarget.classList.add('bg-gray-light');\n event.target.textContent = 'Processing...';\n this.stimulate('Store::MembersPortal::OrderNow#set_order_now_details');\n }\n\n handlePromoSuccess(event) {\n const { result } = event.detail;\n const promoTextField = document.getElementById('promo_code');\n const resultTag = document.getElementById('promo-code-result');\n handlePromoSuccess(result, promoTextField, resultTag);\n }\n\n handlePromoError(event) {\n const { result } = event.detail;\n const resultTag = document.getElementById('promo-code-result');\n handlePromoError(result, resultTag);\n }\n}\n","import ApplicationController from \"../../application_controller\";\n\nexport default class extends ApplicationController {\n static targets = [\"imageContainer\", \"toggleButton\", \"smsMessage\"];\n\n connect() {\n super.connect();\n }\n\n disconnect() {\n if (!this.imageContainerTarget.classList.contains(\"invisible\")) {\n this.toggleId();\n }\n }\n\n smsMessageTargetConnected() {\n setTimeout(() => {\n $(this.smsMessageTarget).remove();\n }, 2000);\n }\n\n toggleId() {\n this.imageContainerTarget.classList.toggle(\"invisible\");\n this.imageContainerTarget.classList.toggle(\"h-0\");\n this.imageContainerTarget.classList.toggle(\"opacity-0\");\n this.imageContainerTarget.classList.toggle(\"scale-0\");\n this.toggleButtonText();\n }\n\n toggleButtonText() {\n const buttonText = this.toggleButtonTarget.innerText.toLowerCase();\n\n if (buttonText.includes(\"show\")) {\n this.toggleButtonTarget.innerText = \"Hide ID\";\n } else {\n this.toggleButtonTarget.innerText = \"Show ID\";\n }\n }\n}\n","import ApplicationController from '../../application_controller';\n\nexport default class extends ApplicationController {\n static targets = ['fill', 'currentstep', 'tooltip', 'success', 'fail'];\n\n // Check if progress bar has a failure step\n HAS_FAILED = false;\n\n // Progress bar can be default or refill\n TYPE = $(this.currentstepTarget).data('type');\n\n // Steps for the regular progress bar\n PROGRESS_BAR_STEPS = {\n 1: {\n title: 'Order Placed',\n tooltip: '',\n display: true,\n },\n 2: {\n title: 'Dr Review',\n tooltip:\n 'Your doctor is reviewing your medical questionnaire. Please check your secure inbox for any messages from your doctor.',\n display: true,\n },\n 3: {\n title: 'Rx Approved',\n tooltip:\n 'Your doctor has approved your prescription. Please check your secure inbox for any messages from your doctor.',\n display: true,\n },\n 4: {\n title: 'RX Approved & Filed in Rx',\n tooltip: '',\n display: false,\n },\n 5: {\n title: 'Order Filled & Shipped',\n tooltip:\n 'Shipping information has been sent to you. Please check your secure inbox for any messages from your doctor.',\n display: true,\n },\n 6: {\n title: 'Delivered',\n tooltip:\n 'Your order has been delivered. Tracking number is available on the My Orders page.',\n display: true,\n },\n };\n\n // Steps for the refill progress bar\n REFILL_PROGRESS_BAR_STEPS = {\n 1: {\n title: 'Order Processed',\n tooltip: '',\n display: true,\n },\n 2: {\n title: 'Rx Approved',\n tooltip:\n 'Your doctor has authorized your prescription. Your medication will now be filled and shipped to you.',\n display: true,\n },\n 3: {\n title: 'Order Filled & Shipped',\n tooltip:\n 'Your order has been shipped. Tracking number is available on the My Orders page.',\n display: true,\n },\n 4: {\n title: 'Delivered',\n tooltip:\n 'Click Order More or Start Subscription to receive a new order.\"',\n display: true,\n },\n };\n\n // Errors that are displayed on the progress bar\n ERRORS = {\n 7: {\n title: 'Rx Discontinued',\n tooltip: 'Your doctor has discontinued your prescription.',\n },\n 8: {\n title: 'Rx Declined',\n tooltip:\n 'Your doctor was unable to approve your order request. Please check your secure inbox for details. Your credit card will not be charged and your pre-authorized hold will be released.',\n },\n 9: {\n title: 'Not Delivered',\n tooltip:\n 'Your order was not delivered. Please review your tracking number which is available on the My Orders page. For any questions or inquiries, please reach out to customer care for assistance.',\n },\n 10: {\n title: 'Order Cancelled',\n tooltip: '',\n },\n 11: {\n title: 'Payment Failed',\n tooltip: '',\n },\n };\n\n connect() {\n super.connect();\n }\n\n initialize() {\n this.setupProgressBar();\n this.initTooltips();\n }\n\n disconnect() {\n $('.progress-bar__step').remove();\n }\n\n initTooltips() {\n $(this.tooltipTargets).on('mouseenter', (event) => {\n event.preventDefault();\n\n if (!event.target.dataset.title.length) return;\n\n const tooltip = $(\n ``,\n );\n\n $(event.target.parentNode).append(tooltip);\n });\n\n $(this.tooltipTargets).on('mouseleave', (event) => {\n $(event.target.parentNode).find('.progress-bar__tooltip').remove();\n });\n }\n\n /*\n Create progress bar steps depending on type of progress bar\n Also adds any error state if needed.\n */\n setupProgressBar() {\n const currentstep = +$(this.currentstepTarget).val();\n\n let completedSteps = 0;\n\n const refillSteps = Array.from(\n Array(Object.keys(this.REFILL_PROGRESS_BAR_STEPS).length),\n (_, i) => i + 1,\n );\n\n const defaultSteps = Array.from(\n Array(Object.keys(this.PROGRESS_BAR_STEPS).length),\n (_, i) => i + 1,\n );\n\n if (this.TYPE === 'default') {\n completedSteps = defaultSteps;\n } else {\n completedSteps = refillSteps;\n }\n\n completedSteps.forEach((step) => {\n if (this.ERRORS[currentstep]?.title === 'Not Delivered' && step === 4) {\n this.appendError(currentstep);\n this.HAS_FAILED = true;\n } else if (\n (this.ERRORS[currentstep]?.title === 'Order Cancelled' ||\n this.ERRORS[currentstep]?.title === 'Payment Failed') &&\n step === 1\n ) {\n this.appendError(currentstep);\n this.HAS_FAILED = true;\n } else if (\n (this.ERRORS[currentstep]?.title === 'Rx Declined' ||\n this.ERRORS[currentstep]?.title === 'Rx Discontinued') &&\n step === 2\n ) {\n this.appendError(currentstep);\n this.HAS_FAILED = true;\n } else {\n this.addProgressBarStep(completedSteps, currentstep, step);\n }\n });\n }\n\n /*\n Add a step to the progress bar\n Adds blue fill to the progress bar if the step is completed\n Adds a half filled blue fill if the step is current one\n */\n addProgressBarStep(completedSteps, currentstep, step) {\n const foundStep =\n this.TYPE === 'refill'\n ? this.REFILL_PROGRESS_BAR_STEPS[step]\n : this.PROGRESS_BAR_STEPS[step];\n\n if (!foundStep.display) return;\n\n const stepDiv = $(\n ``,\n );\n\n $(this.fillTarget).append(stepDiv);\n\n if (currentstep >= step && !this.HAS_FAILED) {\n const completed = $('');\n\n stepDiv.append(completed);\n\n const isDelivered =\n (this.TYPE === 'default' && step === 6) ||\n (this.TYPE === 'refill' && step === 4);\n\n if (step === currentstep && !isDelivered) {\n completed.addClass('completed halfway');\n } else {\n completed.addClass('completed');\n }\n\n this.appendCheck(stepDiv, 'success', step);\n }\n }\n\n // Appends error icon to the progress bar\n appendError(currentstep) {\n const stepDiv = $(\n ``,\n );\n\n $(this.fillTarget).append(stepDiv);\n\n const completed = $('');\n\n stepDiv.append(completed);\n\n completed.addClass('completed halfway');\n\n this.appendCheck(stepDiv, 'error', currentstep);\n }\n\n // Appends check icon to the progress bar\n appendCheck(div, type, step) {\n const image = $(\"