{"version":3,"file":"AmountSelection-BlSy2PW_.js","sources":["../../../app/frontend/components/InvestorFlow/v2/Components/LeftContainer/AmountSelection.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import SlideLocalWrapper from 'Components/Common/Transitions/SlideLocalWrapper.svelte';\n  import {\n    amounts,\n    deal,\n    isLessThanMinInvestment,\n    isMoreThanMaxInvestment,\n    patchUpdateInvestor,\n    personalInfo,\n    isPresetSharesExperimentEnabled,\n  } from 'Store/InvestorFlowStore';\n  import {whiteLabeling} from 'Store/WhiteLabelStore';\n\n  import {dollarMask} from 'Utility/formatters/mask';\n  import {numberOfSecurities} from 'Utility/investorFlow/v2/amountSelection';\n\n  import Form from 'Components/Common/Form/Form.svelte';\n  import SwitchVertical from 'Components/Common/icons/Switch.svelte';\n  import MoneyField from 'Components/InvestorFlow/v2/Components/LeftContainer/AmountFields/MoneyField.svelte';\n  import SharesField from 'Components/InvestorFlow/v2/Components/LeftContainer/AmountFields/SharesField.svelte';\n  import PresetAmount from 'Components/InvestorFlow/v2/Components/LeftContainer/AmountFields/PresetAmount.svelte';\n  import SubmitButton from 'Components/InvestorFlow/v2/Components/LeftContainer/SubmitButton.svelte';\n\n  export let minimum_investment: number; // In cents\n  export let maximum_investment: number; // In cents\n  export let price_per_security: number; // In cents\n  export let currency: string;\n  export let customInvestmentAmount: number = $amounts[0] || 0; // In cents\n\n  let numSecurities: number = numberOfSecurities(\n    Number(customInvestmentAmount),\n    price_per_security\n  );\n  let exchangePrice: boolean = !isPresetSharesExperimentEnabled();\n  let lessThanMin: boolean = false;\n  let moreThanMax: boolean = false;\n  let maskedValue: string = String(customInvestmentAmount / 100); // In dollars for display purpose\n  let firstMount: boolean = true;\n\n  $: hideUnitConverter = $deal?.feature_flags?.hide_flow_unit_converter;\n\n  const handlerExchangePrice = () => {\n    exchangePrice = !exchangePrice;\n  };\n\n  const updateNumberOfSecurities = (): void => {\n    const updatedSecurities = numberOfSecurities(\n      Number(maskedValue) * 100,\n      price_per_security\n    );\n\n    numSecurities = updatedSecurities;\n    customInvestmentAmount = numSecurities * price_per_security;\n  };\n\n  const onMoneyClickOrBlur = (amount: number) => {\n    // Update the value displayed on blur for input\n    maskedValue = String(amount / 100);\n    updateNumberOfSecurities();\n  };\n\n  const onHandleMoneyInput = (): void => {\n    updateNumberOfSecurities();\n    firstMount = false;\n  };\n\n  $: lessThanMin = isLessThanMinInvestment(\n    customInvestmentAmount,\n    minimum_investment\n  );\n  $: moreThanMax = isMoreThanMaxInvestment(\n    customInvestmentAmount,\n    maximum_investment\n  );\n\n  $: emptyDealPresets =\n    $deal.preset_amount.primary === null || $deal.preset_amount.primary === 0;\n  $: canShowMinimumError =\n    (emptyDealPresets && !firstMount) || !emptyDealPresets;\n\n  $: customAmountRounded = Math.ceil(customInvestmentAmount) / 100;\n\n  $: disableSendInvitationBtn = !(\n    $personalInfo.investment_amount >= $deal.minimum_investment &&\n    !isMoreThanMaxInvestment(\n      $personalInfo.investment_amount,\n      $deal.maximum_investment\n    ) &&\n    $personalInfo.investment_amount > 0\n  );\n\n  $: if (customInvestmentAmount) {\n    $personalInfo.investment_amount = customInvestmentAmount;\n  }\n\n  const submitInvestor = async (): Promise<void> => {\n    await patchUpdateInvestor();\n  };\n</script>\n\n<Form on:submit={submitInvestor}>\n  <div\n    class=\"amount-container\"\n    style:--primary-color={$whiteLabeling?.primary_color}\n    data-testid=\"amount-selection\"\n  >\n    <div class=\"section-heading\">\n      <div>How much would you like to invest?</div>\n    </div>\n    <div class=\"input-message-container\">\n      {#if exchangePrice}\n        <div class=\"input-container\" data-testid=\"custom-amount-button\">\n          <MoneyField\n            bind:maskedValue\n            {numSecurities}\n            {customInvestmentAmount}\n            {hideUnitConverter}\n            forceDecimals={false}\n            on:input={() => setTimeout(onHandleMoneyInput)}\n          />\n\n          {#if !hideUnitConverter}\n            <div\n              class=\"switch-container pointer\"\n              data-testid=\"switch-button\"\n              on:click={() => handlerExchangePrice()}\n              on:keydown={() => handlerExchangePrice()}\n              tabindex=\"0\"\n              role=\"button\"\n            >\n              <SwitchVertical />\n            </div>\n          {/if}\n        </div>\n      {:else}\n        <div class=\"input-container\" data-testid=\"shares-input-container\">\n          <SharesField\n            bind:customInvestmentAmount\n            bind:maskedValue\n            bind:numSecurities\n            {price_per_security}\n          />\n          <div\n            class=\"switch-container pointer\"\n            data-testid=\"switch-button\"\n            on:click={() => handlerExchangePrice()}\n            on:keydown={() => handlerExchangePrice()}\n            tabindex=\"0\"\n            role=\"button\"\n          >\n            <SwitchVertical />\n          </div>\n        </div>\n      {/if}\n    </div>\n    {#if lessThanMin && canShowMinimumError}\n      <SlideLocalWrapper>\n        <div\n          class=\"invalid-amount-message\"\n          data-testid=\"minimum-amount-reached-message\"\n        >\n          Please enter at least the minimum investment required.\n        </div>\n      </SlideLocalWrapper>\n    {:else if moreThanMax}\n      <SlideLocalWrapper>\n        <div\n          class=\"invalid-amount-message\"\n          data-testid=\"maximum-amount-reached-message\"\n        >\n          Maximum investment amount is {currency}\n          {dollarMask(maximum_investment / 100, $deal.currency_symbol)}.\n        </div>\n      </SlideLocalWrapper>\n    {:else if exchangePrice && customAmountRounded !== Number(maskedValue)}\n      <div class=\"invalid-amount-message\" data-testid=\"invalid-amount-message\">\n        Your investment amount will be rounded down to <b class=\"amount\"\n          >{currency}\n          {dollarMask(customAmountRounded, $deal.currency_symbol)}</b\n        >\n      </div>\n    {/if}\n    <div class=\"amounts\" data-testid=\"preset-amount-input\">\n      {#each $amounts as a}\n        <PresetAmount\n          currencySymbol={$deal.currency_symbol}\n          amount={a}\n          pricePerSecurity={price_per_security}\n          {hideUnitConverter}\n          {exchangePrice}\n          on:click={() => onMoneyClickOrBlur(a)}\n        />\n      {/each}\n    </div>\n  </div>\n\n  <SubmitButton bind:disabled={disableSendInvitationBtn} />\n</Form>\n\n<style lang=\"postcss\">\n  .input-message-container {\n    padding: 1rem;\n  }\n\n  .invalid-amount-message {\n    text-align: center;\n    text-wrap: balance;\n    font-weight: 400;\n    font-size: 1rem;\n    line-height: 1.25rem;\n    color: var(--dm-text-secondary-color, #667085);\n  }\n\n  .amount {\n    color: var(--dm-text-secondary-color, #f04438);\n  }\n\n  .amount-container {\n    & .section-heading {\n      font-weight: 600;\n      font-size: 1.4rem;\n      line-height: 2rem;\n      color: var(--dm-text-primary-color, #101828);\n      margin-bottom: 1.2rem;\n      text-align: center;\n      text-transform: none;\n    }\n  }\n  .amounts {\n    display: flex;\n    gap: 0.5rem;\n    white-space: nowrap;\n    margin-top: 1.2rem;\n    align-items: center;\n    flex-direction: column;\n  }\n\n  .switch-container {\n    width: 2.25rem;\n    height: 2.25rem;\n    background: var(--dm-bg-secondary-color, #f2f4f7);\n    border-radius: 4px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: 1rem;\n\n    & svg {\n      color: var(--dm-text-secondary-color, #667085);\n    }\n  }\n\n  .input-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    gap: 0.5rem;\n\n    & :global(input) {\n      box-sizing: border-box;\n      padding: 0.625rem 0.875rem;\n      gap: 0.5rem;\n      background: var(--dm-bg-primary-color, #ffffff);\n      color: var(--dm-text-primary-color, #353331);\n      border: 1px solid var(--dm-input-border-color, #d0d5dd);\n      box-shadow: 0px 1px 2px rgb(16 24 40 / 5%);\n      border-radius: 4px;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n      text-align: center;\n      width: 12.5rem;\n      height: 2.75rem;\n      font-size: 1.25rem;\n      min-width: 0;\n    }\n  }\n</style>\n"],"names":["insert","target","div1","anchor","append","div0","ctx","create_if_block_4","div","t3_value","dollarMask","b","dirty","set_data","t3","presetamount_changes","show_if","i","set_style","div4","_a","div2","div3","each_blocks","__awaiter","thisArg","_arguments","P","generator","minimum_investment","$$props","maximum_investment","price_per_security","currency","customInvestmentAmount","$amounts","numSecurities","numberOfSecurities","exchangePrice","isPresetSharesExperimentEnabled","lessThanMin","moreThanMax","maskedValue","firstMount","handlerExchangePrice","$$invalidate","updateNumberOfSecurities","updatedSecurities","onMoneyClickOrBlur","amount","onHandleMoneyInput","submitInvestor","patchUpdateInvestor","input_handler","click_handler_2","disableSendInvitationBtn","value","hideUnitConverter","$deal","isLessThanMinInvestment","isMoreThanMaxInvestment","emptyDealPresets","canShowMinimumError","customAmountRounded","$personalInfo"],"mappings":"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"}