{"version":3,"file":"Cq4bZX0Y.js","sources":["../../../../src/complib/components/util/showLessMore.vue","../../../../src/components/shop/checkout/payment/components/sepa-hint.vue","../../../../src/components/shop/checkout/payment/bankDataInput.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-col\">\n    <div\n      class=\"flex flex-row items-center cursor-pointer flex-nowrap\"\n      @click=\"toggleDeliverScope\"\n    >\n      <slot name=\"label\" />\n      <UtilArrowUpDown class=\"ml-sm showMoreLessArrow\" :down=\"!showMore\" />\n    </div>\n    <div :class=\"{ hidden: !showMore }\">\n      <slot name=\"content\"></slot>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { UtilArrowUpDown } from '@/complib';\ndefineProps({\n  withArrows: {\n    type: Boolean,\n    default: true,\n  },\n});\nconst showMore = ref(false);\nfunction toggleDeliverScope() {\n  showMore.value = !showMore.value;\n}\n</script>\n","<template>\n  <div class=\"px-sm md:px-0\">\n    <h5 class=\"text-sm\">\n      {{ t('checkout.review.payment.sepa.consent.title') }}\n    </h5>\n    <div class=\"table text-sm pt-sm\">\n      <div class=\"table-row\">\n        <div class=\"table-cell pr-xs\">\n          {{ t('checkout.review.payment.sepa.creditor.label') }}:\n        </div>\n        <div class=\"table-cell\">\n          {{ t('checkout.review.payment.sepa.creditor.value') }}\n        </div>\n      </div>\n      <div class=\"table-row\">\n        <div class=\"table-cell pr-xs\">\n          {{ t('checkout.review.payment.sepa.creditor.id.label') }}:\n        </div>\n        <div class=\"table-cell\">\n          {{ t('checkout.review.payment.sepa.creditor.id.value') }}\n        </div>\n      </div>\n    </div>\n    <p class=\"text-sm pt-sm leading-xs\">\n      {{ t('checkout.review.payment.sepa.consent.text') }}\n    </p>\n    <div class=\"flex font-roboto shrink-0 pt-sm\">\n      <Icon\n        icon-class=\"fad fa-circle-info\"\n        style=\"\n          --fa-primary-color: var(--thm-text-base);\n          --fa-secondary-color: var(--thm-status-warn-base);\n          --fa-secondary-opacity: 1;\n        \"\n      />\n      <p class=\"text-sm leading-xs pl-[10px] text-grey-dark\">\n        {{ t('checkout.review.payment.sepa.hint') }}\n      </p>\n    </div>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { Icon } from '@/complib';\nconst { t } = useTrans();\n</script>\n","<template>\n  <div>\n    <NotificationBar\n      v-if=\"bankData.error.includes('BANKDATA_INVALID')\"\n      :type=\"NotificationType.ERROR\"\n      class=\"mb-md\"\n    >\n      <template #default>\n        <div class=\"self-center py-xs\">\n          {{ t('bankDataInput.error.general') }}\n        </div>\n      </template>\n    </NotificationBar>\n    <FormKit\n      :id=\"id\"\n      type=\"form\"\n      class=\"max-w-md\"\n      :class=\"{\n        'opacity-50 cursor-wait pointer-events-none':\n          disabled || showDataFromAccount,\n      }\"\n      :disabled=\"disabled || showDataFromAccount\"\n      :actions=\"false\"\n      :incomplete-message=\"false\"\n      spellcheck=\"false\"\n      :config=\"{\n        validationVisibility: bankData.error.includes('BANKDATA_INVALID')\n          ? 'live'\n          : 'blur',\n      }\"\n    >\n      <template #default>\n        <TextInput\n          id=\"bankName\"\n          v-model=\"bankData.bankName\"\n          :disabled=\"disabled || showDataFromAccount\"\n          :name=\"t('bankDataInput.bankName')\"\n          :required-message=\"t('bankDataInput.bankName.required')\"\n          :label=\"t('bankDataInput.bankName')\"\n          :placeholder=\"t('bankDataInput.bankName')\"\n          :required=\"true\"\n          :validation=\"validationRules\"\n          :validation-visibility=\"\n            bankData.error.includes('BANKDATA_INVALID') ? 'live' : 'blur'\n          \"\n          :autofocus=\"autofocus\"\n          @update:model-value=\"checkValidityDebounced\"\n        ></TextInput>\n        <TextInput\n          id=\"iban\"\n          v-model=\"bankData.iban\"\n          :disabled=\"disabled || showDataFromAccount\"\n          name=\"IBAN\"\n          :required-message=\"t('bankDataInput.iban.required')\"\n          :label=\"t('bankDataInput.iban')\"\n          :placeholder=\"t('bankDataInput.iban')\"\n          :required=\"true\"\n          :validation=\"validationRules\"\n          :validation-visibility=\"\n            bankData.error.includes('BANKDATA_INVALID') ? 'live' : 'blur'\n          \"\n          @update:model-value=\"checkValidityDebounced\"\n        ></TextInput>\n        <TextInput\n          id=\"bic\"\n          v-model=\"bankData.bic\"\n          :disabled=\"disabled || showDataFromAccount\"\n          name=\"BIC\"\n          :required-message=\"t('bankDataInput.bic.required')\"\n          :label=\"t('bankDataInput.bic')\"\n          :placeholder=\"t('bankDataInput.bic')\"\n          :required=\"true\"\n          :validation=\"validationRules\"\n          :validation-visibility=\"\n            bankData.error.includes('BANKDATA_INVALID') ? 'live' : 'blur'\n          \"\n          @update:model-value=\"checkValidityDebounced\"\n        ></TextInput>\n        <UtilShowLessMore>\n          <template #label>\n            <div class=\"text-primary-base\">\n              {{ t('bankDataInput.hint.showLegalHint') }}\n            </div>\n          </template>\n          <template #content>\n            <SepaHint class=\"mt-xs\"></SepaHint>\n          </template>\n        </UtilShowLessMore>\n        <CollectiveInvoiceSelect\n          v-if=\"$siteIdent.startsWith('minilu') && !hideCollectiveInvoiceSelect\"\n          class=\"pt-md mb-sm\"\n          :model-value=\"bankData.collectiveInvoice\"\n          :disabled-options=\"disabledOptions\"\n          @set-collective-invoice=\"setCollectiveInvoice\"\n        />\n      </template>\n    </FormKit>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport {\n  TextInput,\n  NotificationBar,\n  NotificationType,\n  UtilShowLessMore,\n} from '@/complib';\nimport { FormKit } from '@formkit/vue';\nimport type { BankData } from './types';\nimport useValidateBankData from '@/composables/payment/useValidateBankData';\nimport { useUserContext } from '~/stores/useUserContext';\nimport { UseStateKeys } from '~/useStateKeys';\nimport SepaHint from '@/components/shop/checkout/payment/components/sepa-hint.vue';\nimport CollectiveInvoiceSelect from './collectiveInvoiceSelect.vue';\n\nconst props = defineProps({\n  /**Keeps the input data until you leave checkout-pages for example\n   * Does not work with modelValue!\n   */\n  keepData: {\n    type: String as PropType<'NEVER' | 'CHECKOUT'>,\n    default: 'NEVER',\n  },\n  /**Shows Masked Bankdata from account - not editable. */\n  showDataFromAccount: {\n    type: Boolean,\n    default: false,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  modelValue: {\n    type: Object as PropType<BankData>,\n    default: null,\n  },\n  disabledOptions: {\n    type: Boolean,\n    default: false,\n  },\n  hideCollectiveInvoiceSelect: {\n    type: Boolean,\n    default: false,\n  },\n  autofocus: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n});\n\nconst { t } = useTrans();\nconst id = 'bankDataInput';\n\nconst value = ref<BankData>(props.modelValue);\nconst bankData = getBankData();\n\nconst emit = defineEmits<{\n  (e: 'bankDataChange', value: { isValid: boolean }): void;\n  (e: 'update:modelValue', value: BankData): void;\n}>();\n\nconst checkValidityDebounced = useDebounceFn(async () => {\n  checkValidity();\n  emit('bankDataChange', { isValid: bankData.value.error.length === 0 });\n}, 200);\n\nconst validationRules = computed(() => {\n  if (bankData.value.error.includes('BANKDATA_INVALID')) {\n    return 'length,9999';\n  } else {\n    return null;\n  }\n});\n\nfunction formatIbanView(str: string) {\n  return str\n    .replace(/[^\\dA-Z]/g, '')\n    .replace(/(.{4})/g, '$1 ')\n    .trim();\n}\n\nfunction checkValidity() {\n  if (props.showDataFromAccount) {\n    bankData.value.error = [];\n    return;\n  }\n  bankData.value.iban = formatIbanView(\n    bankData.value.iban.trim().toUpperCase(),\n  );\n\n  bankData.value.bic = bankData.value.bic.trim();\n\n  const bankDataValidation = useValidateBankData(\n    bankData.value.bankName,\n    bankData.value.iban,\n    bankData.value.bic,\n  );\n\n  if (\n    bankData.value.bankName === '' ||\n    bankData.value.iban === '' ||\n    bankData.value.bic === ''\n  ) {\n    bankData.value.error.push('BANKDATA_INCOMPLETE');\n  } else if (!bankDataValidation.allOK) {\n    bankData.value.error.push('BANKDATA_INVALID');\n  } else {\n    bankData.value.error = [];\n  }\n}\nif (props.modelValue) {\n  watch(\n    () => bankData.value,\n    (newValue) => {\n      value.value = newValue;\n    },\n    { deep: true },\n  );\n  watch(\n    value,\n    (newValue) => {\n      emit('update:modelValue', newValue);\n    },\n    { deep: true },\n  );\n}\n\nfunction getBankData() {\n  if (props.showDataFromAccount) {\n    const bankData = useUserContext().maskedBankData;\n    return ref({\n      bankName: bankData.bankName,\n      iban: bankData.iban,\n      bic: bankData.bic,\n      collectiveInvoice: bankData.collectiveInvoice,\n      error: [],\n    });\n  } else {\n    if (props.modelValue) {\n      return ref(props.modelValue);\n    } else {\n      return props.keepData === 'CHECKOUT'\n        ? useState<BankData>(UseStateKeys.BANKDATA_INPUT_CHECKOUT, () => {\n            return {\n              bankName: '',\n              iban: '',\n              bic: '',\n              error: ['BANKDATA_INCOMPLETE'],\n              collectiveInvoice: false,\n            };\n          })\n        : ref<BankData>({\n            bankName: '',\n            iban: '',\n            bic: '',\n            error: ['BANKDATA_INCOMPLETE'],\n            collectiveInvoice: false,\n          });\n    }\n  }\n}\n\nfunction setCollectiveInvoice(val: boolean) {\n  bankData.value.collectiveInvoice = val;\n}\n</script>\n<style lang=\"postcss\" scoped>\n.checkbox :deep(.checkbox *) {\n  @apply cursor-pointer;\n}\n</style>\n"],"names":["showMore","ref","toggleDeliverScope","t","useTrans","id","props","__props","value","bankData","getBankData","emit","__emit","checkValidityDebounced","useDebounceFn","checkValidity","validationRules","computed","formatIbanView","str","bankDataValidation","useValidateBankData","watch","newValue","useUserContext","useState","UseStateKeys","setCollectiveInvoice","val"],"mappings":"4gBAuBM,MAAAA,EAAWC,EAAI,EAAK,EAC1B,SAASC,GAAqB,CACnBF,EAAA,MAAQ,CAACA,EAAS,KAC7B,iqBCiBM,KAAA,CAAE,EAAAG,GAAMC,0yBC4GRC,GAAK,kaArCX,MAAMC,EAAQC,EAoCR,CAAE,EAAAJ,GAAMC,IAGRI,EAAQP,EAAcK,EAAM,UAAU,EACtCG,EAAWC,IAEXC,EAAOC,EAKPC,EAAyBC,EAAc,SAAY,CACzCC,IACTJ,EAAA,iBAAkB,CAAE,QAASF,EAAS,MAAM,MAAM,SAAW,EAAG,GACpE,GAAG,EAEAO,EAAkBC,EAAS,IAC3BR,EAAS,MAAM,MAAM,SAAS,kBAAkB,EAC3C,cAEA,IAEV,EAED,SAASS,EAAeC,EAAa,CAC5B,OAAAA,EACJ,QAAQ,YAAa,EAAE,EACvB,QAAQ,UAAW,KAAK,EACxB,MACL,CAEA,SAASJ,GAAgB,CACvB,GAAIT,EAAM,oBAAqB,CACpBG,EAAA,MAAM,MAAQ,GACvB,MACF,CACAA,EAAS,MAAM,KAAOS,EACpBT,EAAS,MAAM,KAAK,KAAA,EAAO,YAAY,CAAA,EAGzCA,EAAS,MAAM,IAAMA,EAAS,MAAM,IAAI,OAExC,MAAMW,EAAqBC,EACzBZ,EAAS,MAAM,SACfA,EAAS,MAAM,KACfA,EAAS,MAAM,GAAA,EAIfA,EAAS,MAAM,WAAa,IAC5BA,EAAS,MAAM,OAAS,IACxBA,EAAS,MAAM,MAAQ,GAEdA,EAAA,MAAM,MAAM,KAAK,qBAAqB,EACrCW,EAAmB,MAGpBX,EAAA,MAAM,MAAQ,GAFdA,EAAA,MAAM,MAAM,KAAK,kBAAkB,CAIhD,CACIH,EAAM,aACRgB,EACE,IAAMb,EAAS,MACdc,GAAa,CACZf,EAAM,MAAQe,CAChB,EACA,CAAE,KAAM,EAAK,CAAA,EAEfD,EACEd,EACCe,GAAa,CACZZ,EAAK,oBAAqBY,CAAQ,CACpC,EACA,CAAE,KAAM,EAAK,CAAA,GAIjB,SAASb,GAAc,CACrB,GAAIJ,EAAM,oBAAqB,CACvBG,MAAAA,EAAWe,EAAiB,EAAA,eAClC,OAAOvB,EAAI,CACT,SAAUQ,EAAS,SACnB,KAAMA,EAAS,KACf,IAAKA,EAAS,IACd,kBAAmBA,EAAS,kBAC5B,MAAO,CAAC,CAAA,CACT,CAAA,KAED,QAAIH,EAAM,WACDL,EAAIK,EAAM,UAAU,EAEpBA,EAAM,WAAa,WACtBmB,EAAmBC,EAAa,wBAAyB,KAChD,CACL,SAAU,GACV,KAAM,GACN,IAAK,GACL,MAAO,CAAC,qBAAqB,EAC7B,kBAAmB,EAAA,EAEtB,EACDzB,EAAc,CACZ,SAAU,GACV,KAAM,GACN,IAAK,GACL,MAAO,CAAC,qBAAqB,EAC7B,kBAAmB,EAAA,CACpB,CAGX,CAEA,SAAS0B,EAAqBC,EAAc,CAC1CnB,EAAS,MAAM,kBAAoBmB,CACrC"}