<turbo-stream action="append" targets="body"><template><dialog id="credit-pack-modal" open="open" class="dialog-modal ez-modal ez-modal--centered" data-action="mousedown-&gt;dialog-modal#close close-dialog-&gt;dialog-modal#close" data-controller="dialog-modal">

  <!-- need tabindex="0" so links further down don't get autofocused when the dialog is opened -->
  <div class="ez-modal__inner-wrap" tabindex="0">
    <div class="ez-modal__modal">
      <div class="ez-close-btn group/close cursor-pointer flex flex-center z-99 whitespace-nowrap overflow-hidden indent-[100%] absolute right-small top-small h-2 w-2" title="Close" data-action="click-&gt;dialog-modal#close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.99 12.99" role="img" class="ez-close-btn__icon pointer-events-none fill-theme-500 group-hover/close:fill-theme-200 group-active/close:fill-theme-30 h-full w-full"><path d="M12.99 1.42 11.57 0 6.49 5.07 1.42 0 0 1.42l5.07 5.07L0 11.57l1.42 1.42 5.07-5.07 5.08 5.07 1.42-1.42-5.07-5.08 5.07-5.07z"></path></svg>
</div>

      <div class="ez-modal__content" data-dialog-modal-target="content">
        <div class="flex flex-col gap-4" data-controller="credit-pack-modal" data-credit-pack-modal-order-api-url-value="/api/internal/order/new" data-credit-pack-modal-selected-plan-value="{&quot;credits&quot;:25,&quot;currency&quot;:&quot;USD&quot;,&quot;description&quot;:&quot;25 AI Credits&quot;,&quot;frequency&quot;:1,&quot;plan_type&quot;:&quot;ai-credit&quot;,&quot;price_in_cents&quot;:1000,&quot;recurring&quot;:false,&quot;free_trial&quot;:false,&quot;title&quot;:&quot;AI Credits 25&quot;,&quot;subtitle&quot;:&quot;25 AI Credits&quot;,&quot;friendly_name&quot;:&quot;AI Credits 25&quot;,&quot;remote_id&quot;:&quot;ai-credits-25&quot;}" data-credit-pack-modal-all-plans-data-value="[{&quot;credits&quot;:25,&quot;currency&quot;:&quot;USD&quot;,&quot;description&quot;:&quot;25 AI Credits&quot;,&quot;frequency&quot;:1,&quot;plan_type&quot;:&quot;ai-credit&quot;,&quot;price_in_cents&quot;:1000,&quot;recurring&quot;:false,&quot;free_trial&quot;:false,&quot;title&quot;:&quot;AI Credits 25&quot;,&quot;subtitle&quot;:&quot;25 AI Credits&quot;,&quot;friendly_name&quot;:&quot;AI Credits 25&quot;,&quot;remote_id&quot;:&quot;ai-credits-25&quot;},{&quot;credits&quot;:50,&quot;currency&quot;:&quot;USD&quot;,&quot;description&quot;:&quot;50 AI Credits&quot;,&quot;frequency&quot;:1,&quot;plan_type&quot;:&quot;ai-credit&quot;,&quot;price_in_cents&quot;:1500,&quot;recurring&quot;:false,&quot;free_trial&quot;:false,&quot;title&quot;:&quot;AI Credits 50&quot;,&quot;subtitle&quot;:&quot;50 AI Credits&quot;,&quot;friendly_name&quot;:&quot;AI Credits 50&quot;,&quot;remote_id&quot;:&quot;ai-credits-50&quot;},{&quot;credits&quot;:100,&quot;currency&quot;:&quot;USD&quot;,&quot;description&quot;:&quot;100 AI Credits&quot;,&quot;frequency&quot;:1,&quot;plan_type&quot;:&quot;ai-credit&quot;,&quot;price_in_cents&quot;:2000,&quot;recurring&quot;:false,&quot;free_trial&quot;:false,&quot;title&quot;:&quot;AI Credits 100&quot;,&quot;subtitle&quot;:&quot;100 AI Credits&quot;,&quot;friendly_name&quot;:&quot;AI Credits 100&quot;,&quot;remote_id&quot;:&quot;ai-credits-100&quot;}]" data-credit-pack-modal-checkout-url-value="/checkout" data-credit-pack-modal-requires-checkout-value="false" data-credit-pack-modal-existing-payment-method-value="true" data-credit-pack-modal-credit-type-value="ai" data-credit-pack-modal-pending-ai-operation-value="false" data-errors="{&quot;invalid_card&quot;:&quot;Invalid card&quot;,&quot;payment_declined&quot;:&quot;Payment Declined&quot;,&quot;payment_failed&quot;:&quot;There was an error processing your payment. Please try again later or try a different payment method. If the problem persists, please contact support.&quot;,&quot;invalid_cvv&quot;:&quot;Invalid CVV&quot;,&quot;plan_not_found&quot;:&quot;Plan not found&quot;}">
  <div class="gradient-ai-mesh rounded-full size-6 self-center flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 8.75 8.75" role="img" class="credit-pack-modal__icon fill-white size-3"><defs><style>.ai-stars-1{fill-rule:evenodd}</style></defs><path d="M2.43.32c.19-.43.8-.43.98 0l.24.54c.26.59.73 1.07 1.33 1.33l.54.24c.43.19.43.8 0 .98l-.54.24c-.59.26-1.07.73-1.33 1.33l-.24.54c-.19.43-.8.43-.98 0l-.24-.54c-.26-.59-.73-1.07-1.33-1.33l-.54-.24c-.43-.19-.43-.8 0-.98l.54-.24c.59-.26 1.07-.73 1.33-1.33zM6.56 5.21c.12-.28.51-.28.63 0l.15.35c.17.38.47.69.85.85l.35.15c.28.12.28.51 0 .63l-.35.15c-.38.17-.69.47-.85.85l-.15.35c-.12.28-.51.28-.63 0l-.15-.35c-.17-.38-.47-.69-.85-.85l-.35-.15a.341.341 0 0 1 0-.63l.35-.15c.38-.17.69-.47.85-.85z" class="ai-stars-1"></path></svg>
</div>

  <div class="flex flex-col gap-2 items-center">
    <h1 class="credit-pack-modal__title m-0">Add AI Credits</h1>
    <p class="credit-pack-modal__subtitle m-0">How many credits would you like to add?</p>
  </div>

  <div class="credit-pack-modal__section credit-pack-modal__section--plans">
    <div class="credit-selector-component credit-selector-component--credit" data-extra-credit-pack="false">
  <div class="credit-selector-component__plan ez-btn ez-btn--light ez-btn--medium is-selected" data-action="click-&gt;credit-pack-modal#selectPlan" data-plan="ai-credits-25" data-rendered-plan="{&quot;credits&quot;:25,&quot;currency&quot;:&quot;USD&quot;,&quot;description&quot;:&quot;25 AI Credits&quot;,&quot;frequency&quot;:1,&quot;plan_type&quot;:&quot;ai-credit&quot;,&quot;price_in_cents&quot;:1000,&quot;recurring&quot;:false,&quot;free_trial&quot;:false,&quot;title&quot;:&quot;AI Credits 25&quot;,&quot;subtitle&quot;:&quot;25 AI Credits&quot;,&quot;friendly_name&quot;:&quot;AI Credits 25&quot;,&quot;remote_id&quot;:&quot;ai-credits-25&quot;}" data-btn-text="Buy Now" data-credit-pack-modal-target="planOption">
  <span class="credit-selector-component__plan__title">25 Credits</span>
  <span class="credit-selector-component__plan__price"><sup class="pricing-main__block__price__number--currency">$</sup><span>10</span><sup class="pricing-main__block__price__number--cents">00</sup></span>
</div><div class="credit-selector-component__plan ez-btn ez-btn--light ez-btn--medium" data-action="click-&gt;credit-pack-modal#selectPlan" data-plan="ai-credits-50" data-rendered-plan="{&quot;credits&quot;:50,&quot;currency&quot;:&quot;USD&quot;,&quot;description&quot;:&quot;50 AI Credits&quot;,&quot;frequency&quot;:1,&quot;plan_type&quot;:&quot;ai-credit&quot;,&quot;price_in_cents&quot;:1500,&quot;recurring&quot;:false,&quot;free_trial&quot;:false,&quot;title&quot;:&quot;AI Credits 50&quot;,&quot;subtitle&quot;:&quot;50 AI Credits&quot;,&quot;friendly_name&quot;:&quot;AI Credits 50&quot;,&quot;remote_id&quot;:&quot;ai-credits-50&quot;}" data-btn-text="Buy Now" data-credit-pack-modal-target="planOption">
  <span class="credit-selector-component__plan__title">50 Credits</span>
  <span class="credit-selector-component__plan__price"><sup class="pricing-main__block__price__number--currency">$</sup><span>15</span><sup class="pricing-main__block__price__number--cents">00</sup></span>
</div><div class="credit-selector-component__plan ez-btn ez-btn--light ez-btn--medium" data-action="click-&gt;credit-pack-modal#selectPlan" data-plan="ai-credits-100" data-rendered-plan="{&quot;credits&quot;:100,&quot;currency&quot;:&quot;USD&quot;,&quot;description&quot;:&quot;100 AI Credits&quot;,&quot;frequency&quot;:1,&quot;plan_type&quot;:&quot;ai-credit&quot;,&quot;price_in_cents&quot;:2000,&quot;recurring&quot;:false,&quot;free_trial&quot;:false,&quot;title&quot;:&quot;AI Credits 100&quot;,&quot;subtitle&quot;:&quot;100 AI Credits&quot;,&quot;friendly_name&quot;:&quot;AI Credits 100&quot;,&quot;remote_id&quot;:&quot;ai-credits-100&quot;}" data-btn-text="Buy Now" data-credit-pack-modal-target="planOption">
  <span class="credit-selector-component__plan__title">100 Credits</span>
  <span class="credit-selector-component__plan__price"><sup class="pricing-main__block__price__number--currency">$</sup><span>20</span><sup class="pricing-main__block__price__number--cents">00</sup></span>
</div>
</div>
  </div>

  <div class="credit-pack-modal__purchase-section hidden" data-credit-pack-modal-target="purchaseSection"><form class="flex flex-col gap-3" data-action="credit-pack-modal#lockForm credit-pack-modal#submitPurchase" action="/api/internal/order" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="IESrnXgTbj8NWyzcEaE1njhymQ2yK970P_i24PHiTcq5cvYGLTPXHF6EwRHLmCSWKtEV5YlBxr1uN1XWrcX_Qw" autocomplete="off" /><input type="hidden" name="checkout[plan_id]" id="checkout_plan_id" value="ai-credits-25" data-credit-pack-modal-target="planId" autocomplete="off" /><input type="hidden" name="checkout[payment_method_token]" id="checkout_payment_method_token" value="3kfbakkf" autocomplete="off" /><input type="hidden" name="checkout[purchase_location]" id="checkout_purchase_location" value="ExistingUser-AICredits-PurchaseModal" data-credit-pack-modal-target="purchaseLocationField" autocomplete="off" /><input type="hidden" name="checkout[purchase_attempt_id]" id="checkout_purchase_attempt_id" data-credit-pack-modal-target="purchaseAttemptIdField" autocomplete="off" /><div class="credit-pack-modal__section"><div class="purchase-modal__payment-method">
  <h3 class="purchase-modal__subheader">Payment Method</h3>

  <div class="purchase-modal__card-info">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 48" role="img" class="ez-credit-card-icon purchase-modal__card-info__card-icon" data-type=""><rect width="64" height="48" rx="6" fill="url(#paint0_linear_9_76)"></rect><path d="M18.6123 39.9299v-2.1237c0-.8124-.5044-1.3444-1.3703-1.3444-.433 0-.9037.1403-1.2274.6021-.2522-.3876-.6137-.6021-1.1559-.6021-.3615 0-.723.1073-1.0088.4949v-.4247h-.7566v3.3979h.7566v-1.8763c0-.6021.3236-.8866.828-.8866s.7566.3175.7566.8866v1.8763h.7566v-1.8763c0-.6021.3615-.8866.8281-.8866.5044 0 .7566.3175.7566.8866v1.8763h.8365Zm11.223-3.3979h-1.2274v-1.0269h-.7566v1.0269h-.6852v.6721h.6852v1.5588c0 .7794.3236 1.2371 1.1895 1.2371.3237 0 .6852-.1072.9374-.2474l-.2186-.6392c-.2186.1402-.4708.1773-.6515.1773-.3615 0-.5044-.2144-.5044-.5649v-1.5217h1.2273v-.6721h.0043Zm6.4227-.0743c-.433 0-.723.2145-.9037.4949v-.4248h-.7566v3.398h.7566v-1.9134c0-.565.2522-.8866.7229-.8866.143 0 .3237.0371.4708.0701l.2186-.7093c-.1513-.0289-.3657-.0289-.5086-.0289Zm-9.7056.3547c-.3615-.2475-.8659-.3547-1.4081-.3547-.8659 0-1.4418.4248-1.4418 1.0969 0 .565.433.8866 1.1896.9897l.3615.0371c.3951.0701.6137.1774.6137.3547 0 .2474-.2901.4247-.7945.4247s-.9037-.1773-1.1559-.3546l-.3615.5649c.3951.2846.9374.4248 1.4796.4248 1.0088 0 1.5889-.4619 1.5889-1.0969 0-.6021-.4708-.9196-1.1896-1.0268l-.3615-.0372c-.3236-.0371-.5758-.1072-.5758-.3175 0-.2474.2522-.3876.6515-.3876.433 0 .8659.1773 1.0845.2845l.3194-.602Zm20.1299-.3547c-.4329 0-.7229.2145-.9037.4949v-.4248h-.7566v3.398h.7566v-1.9134c0-.565.2522-.8866.723-.8866.1429 0 .3236.0371.4708.0701l.2185-.7011c-.1471-.0371-.3615-.0371-.5086-.0371Zm-9.6677 1.7732c0 1.0268.723 1.7691 1.8411 1.7691.5044 0 .8659-.1072 1.2274-.3876l-.3615-.6021c-.2901.2144-.5759.3175-.9038.3175-.6137 0-1.0466-.4247-1.0466-1.0969 0-.6392.4329-1.0639 1.0466-1.0969.3237 0 .6137.1072.9038.3175l.3615-.602c-.3615-.2846-.723-.3877-1.2274-.3877-1.1181-.0041-1.8411.7423-1.8411 1.7691Zm6.9986 0V36.532h-.7566v.4247c-.2522-.3175-.6137-.4949-1.0845-.4949-.9752 0-1.7318.7423-1.7318 1.7691S41.1969 40 42.1721 40c.5044 0 .8659-.1773 1.0845-.4949v.4248h.7566v-1.699Zm-2.7784 0c0-.602.3951-1.0969 1.0466-1.0969.6137 0 1.0466.4619 1.0466 1.0969 0 .6021-.4329 1.0969-1.0466 1.0969-.6473-.0371-1.0466-.4989-1.0466-1.0969Zm-9.0541-1.7732c-1.0088 0-1.7318.7093-1.7318 1.7691 0 1.0639.723 1.7691 1.7697 1.7691.5044 0 1.0088-.1402 1.4081-.4619l-.3615-.5319c-.29.2144-.6515.3546-1.0088.3546-.4708 0-.9374-.2144-1.0466-.8124h2.5598v-.2845c.0336-1.0928-.6179-1.8021-1.5889-1.8021Zm0 .6392c.4708 0 .7945.2845.8659.8124h-1.8032c.0714-.4578.3951-.8124.9373-.8124Zm18.7975 1.134v-3.0433h-.7566v1.7691c-.2522-.3175-.6137-.4949-1.0845-.4949-.9752 0-1.7318.7423-1.7318 1.7691S48.1619 40 49.1371 40c.5044 0 .8659-.1773 1.0845-.4949v.4248h.7566v-1.699Zm-2.7785 0c0-.602.3952-1.0969 1.0467-1.0969.6137 0 1.0466.4619 1.0466 1.0969 0 .6021-.4329 1.0969-1.0466 1.0969-.6515-.0371-1.0467-.4989-1.0467-1.0969Zm-25.3294 0V36.532h-.7566v.4247c-.2522-.3175-.6137-.4949-1.0845-.4949-.9752 0-1.7318.7423-1.7318 1.7691S20.054 40 21.0292 40c.5044 0 .8659-.1773 1.0845-.4949v.4248h.7566v-1.699Zm-2.8121 0c0-.602.3951-1.0969 1.0467-1.0969.6137 0 1.0466.4619 1.0466 1.0969 0 .6021-.4329 1.0969-1.0466 1.0969-.6516-.0371-1.0467-.4989-1.0467-1.0969Z" fill="#000"></path><path d="M37.6662 10.7258H26.3003v20.033h11.3659v-20.033Z" fill="#FF5A00"></path><path d="M27.0568 20.7423c0-4.0701 1.9504-7.6825 4.9432-10.0165C29.7974 9.0268 27.019 8 23.9884 8 16.809 8 11 13.699 11 20.7423s5.809 12.7422 12.9884 12.7422c3.0306 0 5.809-1.0268 8.0116-2.7257-2.997-2.3011-4.9432-5.9464-4.9432-10.0165Z" fill="#EB001B"></path><path d="M53 20.7423c0 7.0433-5.809 12.7422-12.9884 12.7422-3.0306 0-5.809-1.0268-8.0116-2.7257 3.0306-2.3382 4.9432-5.9464 4.9432-10.0165 0-4.0701-1.9504-7.6825-4.9432-10.0165C34.1984 9.0268 36.9768 8 40.0074 8 47.191 8 53 13.7361 53 20.7423Z" fill="#F79E1B"></path><defs><linearGradient id="paint0_linear_9_76" x1="0" y1="0" x2="64" y2="48" gradientUnits="userSpaceOnUse"><stop stop-color="#F5F7F8"></stop><stop offset="1" stop-color="#E4E5E7"></stop></linearGradient></defs></svg>


    <div class="purchase-modal__card-info__num-exp">
      <span class="purchase-modal__card-info__num-exp__extended">•••• •••• •••• 3538</span>
    </div>

    <a class="ez-btn ez-btn--small ez-btn--light min-w-[auto] ml-auto" data-action="credit-pack-modal#editInCheckout" data-turbo-stream="true" href="/checkout/ai-credits-25">Edit</a>
  </div>
</div>
</div><div class="credit-pack-modal__section"><div class="purchase-modal__order-summary">
  <h3 class="purchase-modal__subheader">Order Summary</h3>

  <div class="purchase-modal__order-summary__loading is-hidden"
       data-credit-pack-modal-target="orderSummaryLoading">
    <div class="ez-spinner ez-spinner--sm"></div>
  </div>

  <div class="purchase-modal__order-summary__table">
    <div class="purchase-modal__order-summary__table__row purchase-modal__order-summary__table__row--plan-selector"><span class="purchase-modal__order-summary__table__col">Plan</span><span class="purchase-modal__order-summary__table__col" data-credit-pack-modal-target="planSelector"><div class="ez-form-select-field ez-form-select-field--plan ez-form-select-field--disabled"
     data-controller="ez-form-select"
     data-ez-form-select-select-submit-value="false"
     data-select-key="plan_id">

  <div class="ez-form-select-field__wrapper">
    

    <div class="ez-form-select-field__field-wrapper" data-action="click-&gt;ez-form-select#handleSelectClick focusin-&gt;ez-form-select#handleSelectClick"><div class="ez-input" data-test-id="plan_id"><div class="ez-form-select-field__input-wrapper"><input class="ez-input__field ez-input__field--basic ez-form-select-field__input  ez-input__field--text" readonly="readonly" autocomplete="" type="text" data-ez-form-select-target="inputField" data-action="credit-pack-modal#updatePlan focus-&gt;form-analytics#sendFormFieldFocusEvent" data-credit-pack-modal-target="planSelect" data-english-label="plan_id" value="AI Credits 25" form="none" name="checkout[plan_id]" id="checkout_plan_id" /><div class="ez-form-select-field__arrow ez-input__field-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.2 4" role="img"><path d="M3.1 3.8L.1 1C0 .9 0 .7.1.6L.6.1c.1-.1.3-.1.4 0l2.4 2.2c.1.1.3.1.5 0L6.3.1c0-.1.2-.1.4 0l.5.4c.1.1.1.3 0 .4L4.1 3.8c-.3.3-.7.3-1 0z"></path></svg>
</div></div><input value="ai-credits-25" data-ez-form-select-target="valueField" autocomplete="off" type="hidden" name="checkout[plan_id]" id="checkout_plan_id" /></div></div>

    <ul class="ez-form-select-field__options">
      
      <li class="ez-form-select-field__item ez-form-select-field__item--ai_credits_25" data-ez-form-select-value-param="ai-credits-25" data-action="click-&gt;ez-form-select#handleSelectOptionClick">AI Credits 25</li><li class="ez-form-select-field__item ez-form-select-field__item--ai_credits_50" data-ez-form-select-value-param="ai-credits-50" data-action="click-&gt;ez-form-select#handleSelectOptionClick">AI Credits 50</li><li class="ez-form-select-field__item ez-form-select-field__item--ai_credits_100" data-ez-form-select-value-param="ai-credits-100" data-action="click-&gt;ez-form-select#handleSelectOptionClick">AI Credits 100</li>
    </ul>
  </div>

  
</div>
</span></div>

    

    <div class="purchase-modal__order-summary__table__row"><span class="purchase-modal__order-summary__table__col">Subtotal</span><span class="purchase-modal__order-summary__table__col" data-credit-pack-modal-target="orderSubtotal">$10.00</span></div>

    

    <div class="purchase-modal__order-summary__table__row"><span class="purchase-modal__order-summary__table__col">Tax</span><span class="purchase-modal__order-summary__table__col" data-credit-pack-modal-target="orderTax">$0.00</span></div>

    <div class="purchase-modal__order-summary__table__row"><span class="purchase-modal__order-summary__table__col">Amount Due Today</span><span class="purchase-modal__order-summary__table__col" data-credit-pack-modal-target="orderTotal">$10.00</span></div>

    
  </div>
</div>
</div><div class="purchase-modal__errors is-hidden" data-credit-pack-modal-target="errorContainer"></div><button name="button" type="submit" class="credit-pack-modal__submit ez-btn ez-btn--primary self-center" data-credit-pack-modal-target="formSubmitBtn" data-disable-with="Confirm">Confirm</button></form></div>
</div>
      </div>
</div>  </div>
</dialog></template></turbo-stream>