{"version":3,"file":"Dlw6-zCd.js","sources":["../../../../skeleton/components/modal/add-limit.vue"],"sourcesContent":["<template>\n  <vue-final-modal\n    v-model=\"modals.addLimit\"\n    class=\"modal-deposit-limit\"\n    clickToClose\n    :overlayTransition=\"{ mode: 'in-out', duration: 200 }\"\n    :contentTransition=\"{ mode: 'in-out', duration: 200 }\"\n    @click-outside=\"closeModal('addLimit')\"\n  >\n    <div class=\"scroll\">\n      <div class=\"header\">\n        <button-modal-close @click=\"closeModal('addLimit')\"/>\n        <div class=\"title\">\n          {{ props.definition ? titleMapping[props.definition] : '' }}\n        </div>\n      </div>\n\n      <div class=\"modal-deposit-limit__tabs\">\n        <button\n          v-for=\"period in periodOptions\"\n          :key=\"period.id\"\n          class=\"modal-deposit-limit__tabs-item\"\n          :class=\"{'is-active': period.id === selectedTab.id}\"\n          :disabled=\"period.disabled\"\n          @click=\"changeTab(period)\"\n        >\n          {{ getContent(globalComponentsContent, defaultLocaleGlobalComponentsContent, `constants.limitPeriods.${period.id}`) }}\n        </button>\n      </div>\n\n      <form-input-dropdown\n        v-model:value=\"formState.currency\"\n        name=\"currency\"\n        :options=\"currenciesOptions\"\n        :placeholder=\"getContent(popupsData, defaultLocalePopupsData, 'addCashLimit.selectCurrencyPlaceholder')\"\n      />\n\n      <form-input-number\n        v-model:value=\"formState.amount\"\n        :is-required=\"false\"\n        :currency=\"formattedBalance.currency\"\n        :min=\"0\"\n        :max=\"1000000\"\n        label=\"\"\n        name=\"amount\"\n        placeholder=\"0\"\n        :hint=\"amountError ? setError('amount'): undefined\"\n        @blur=\"amountError = false\"\n        @focus=\"focusField('amount')\"\n        @input=\"focusField('amount')\"\n      />\n\n      <p class=\"modal-deposit-limit__description\">{{ getContent(popupsData, defaultLocalePopupsData, 'addCashLimit.hint') }}</p>\n\n      <div class=\"actions\">\n        <button-base\n          type=\"gray\"\n          size=\"md\"\n          @click=\"resetLimit\"\n        >\n          {{ getContent(popupsData, defaultLocalePopupsData, 'addCashLimit.resetButton') }}\n        </button-base>\n        <button-base\n          type=\"primary\"\n          size=\"md\"\n          :is-disabled=\"isAddButtonDisabled\"\n          @click=\"addLimit\"\n        >\n          {{ getContent(popupsData, defaultLocalePopupsData, 'addCashLimit.saveButton') }}\n        </button-base>\n      </div>\n\n    </div>\n  </vue-final-modal>\n</template>\n\n<script setup lang=\"ts\">\n  import { storeToRefs } from 'pinia';\n  import { VueFinalModal } from 'vue-final-modal';\n  import type { ICurrency, IPlayerLimit } from '@skeleton/core/types';\n\n  const props = defineProps<{ definition?: number }>();\n\n  const limitsStore = useLimitsStore();\n  const { getLimits, createLimit, closeModal } = limitsStore;\n  const {\n    limitCashPeriod, activeLimits, limitsContent, defaultLimitsContent, modals,\n  } = storeToRefs(limitsStore);\n  const { showAlert } = useLayoutStore();\n  const globalStore = useGlobalStore();\n  const {\n    currencies,\n    alertsData,\n    defaultLocaleAlertsData,\n    popupsData,\n    defaultLocalePopupsData,\n    globalComponentsContent,\n    defaultLocaleGlobalComponentsContent\n  } = storeToRefs(globalStore);\n  const {\n    formatBalance, getMainBalanceFormat, getContent,\n  } = useProjectMethods();\n\n  const currencyKey = ref(0);\n\n  const titleMapping = computed<Record<number, string>>(() => ({\n    1: getContent(popupsData.value, defaultLocalePopupsData.value, 'addCashLimit.addBetLabel'),\n    2: getContent(popupsData.value, defaultLocalePopupsData.value, 'addCashLimit.addLossLabel'),\n    3: getContent(popupsData.value, defaultLocalePopupsData.value, 'addCashLimit.addDepositLabel'),\n  }));\n\n  const formState = reactive<{\n    definition?: number;\n    period: string|undefined;\n    currency: string;\n    amount: string;\n    showCurrenciesError: boolean\n  }>({\n    definition: props.definition,\n    currency: '',\n    amount: '0',\n    period: undefined,\n    showCurrenciesError: false,\n  });\n\n  const { getFormRules } = useProjectMethods();\n  const limitAmountRules = {};\n  const limitAmountFormRules = getFormRules(limitAmountRules);\n  const {\n    serverFormErrors, v$, onFocus, setError,\n  } = useFormValidation(limitAmountFormRules, formState.amount);\n\n  const amountError = ref<boolean>(false);\n\n  const focusField = (fieldName:string):void => {\n    amountError.value = false;\n    onFocus(fieldName);\n  };\n\n  const isPeriodDisabled = (period: { id: string|number, name: string }) => {\n    const limits = activeLimits?.value.filter((limit: IPlayerLimit) => limit.definition === formState.definition\n      && limit.period === period.id);\n    return (\n      limits?.length && currencies.value.every((currency) => limits?.find((limit: IPlayerLimit) => (\n        limit.definition === formState.definition\n        && limit.period === period.id\n        && limit.currency === currency.code\n      )))\n    );\n  };\n\n  const periodOptions = computed(() => Object.values(limitCashPeriod.value)?.map((period) => {\n    if (isPeriodDisabled(period)) {\n      return {\n        ...period,\n        disabled: true,\n      };\n    }\n    return period;\n  }));\n\n  const isCurrencySelectedInPeriod = (currency: {\n    code: string\n  }) => activeLimits?.value.some((limit: IPlayerLimit) => (\n    limit.definition === formState.definition\n    && limit.period === formState.period\n    && limit.currency === currency.code));\n\n  const isCurrencySelectedInAllPeriods = (currency: { code: string }) => limitCashPeriod.value?.every((period) => activeLimits?.value.some(\n    (limit: IPlayerLimit) => limit.definition === formState.definition\n      && limit.period === period.id\n      && limit.currency === currency.code,\n  ));\n\n  const { iconUrl } = useDynamicIcon('currency');\n\n  const isCurrencyDisabled = (currency: ICurrency):boolean => isCurrencySelectedInPeriod(currency) || isCurrencySelectedInAllPeriods(currency);\n\n  const currenciesOptions = computed(() => currencies.value?.map((currency) => {\n    const option = { ...currency, value: currency.code, mask: `${iconUrl.value}/${currency.code}.svg` };\n    if (isCurrencyDisabled(currency)) {\n      return { ...option, disabled: true };\n    }\n\n    return option;\n  }));\n\n  const selectedPeriod = computed(() => periodOptions.value?.filter((period) => !period.disabled)[0]);\n\n  const formattedBalance = computed(() => formatBalance(formState.currency, Number(formState.amount)));\n\n  const selectedTab = ref<{id:any, name:string}>(selectedPeriod?.value);\n\n  const isAddButtonDisabled = computed(() => !formState.currency);\n\n  const changeTab = (period: { id: string|number; name: string }) => {\n    selectedTab.value = period;\n    formState.period = period.id as string;\n    currencyKey.value += 1;\n  };\n  const resetLimit = () => {\n    formState.currency = '';\n    formState.amount = '0';\n  };\n\n  const addLimit = async () => {\n    if (v$.value.$invalid) return;\n\n    v$.value.$reset();\n    const validFormData = await v$.value.$validate();\n    if (!validFormData) return;\n\n    try {\n      const converted = getMainBalanceFormat(formState.currency, Number(formState.amount));\n\n      await createLimit({\n        period: formState.period,\n        definition: formState.definition as number,\n        amount: converted.amount,\n        currency: converted.currency,\n      });\n\n      await getLimits();\n      closeModal('addLimit');\n      showAlert(alertsData.value?.limit?.cashLimitAdd || defaultLocaleAlertsData.value?.limit?.cashLimitAdd);\n    } catch (error: any) {\n      if (error.response?.status === 422) {\n        serverFormErrors.value = error.data?.error?.fields;\n        amountError.value = true;\n      }\n    }\n  };\n\n  onMounted(() => {\n    changeTab(selectedTab.value);\n  });\n</script>\n\n<style src=\"~/assets/styles/components/modal/add-limit.scss\" lang=\"scss\" />\n"],"names":["props","__props","limitsStore","useLimitsStore","getLimits","createLimit","closeModal","limitCashPeriod","activeLimits","limitsContent","defaultLimitsContent","modals","storeToRefs","showAlert","useLayoutStore","globalStore","useGlobalStore","currencies","alertsData","defaultLocaleAlertsData","popupsData","defaultLocalePopupsData","globalComponentsContent","defaultLocaleGlobalComponentsContent","formatBalance","getMainBalanceFormat","getContent","useProjectMethods","currencyKey","ref","titleMapping","computed","formState","reactive","getFormRules","limitAmountFormRules","serverFormErrors","v$","onFocus","setError","useFormValidation","amountError","focusField","fieldName","isPeriodDisabled","period","limits","limit","currency","periodOptions","_a","isCurrencySelectedInPeriod","isCurrencySelectedInAllPeriods","iconUrl","useDynamicIcon","isCurrencyDisabled","currenciesOptions","option","selectedPeriod","formattedBalance","selectedTab","isAddButtonDisabled","changeTab","resetLimit","addLimit","converted","_b","_d","_c","error","_e","_g","_f","onMounted"],"mappings":"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"}