{"version":3,"file":"rtYV8YDR.js","sources":["../../../../components/product/sizes/SizesInfo.vue","../../../../components/product/sizes/SizesInfoDialog.vue"],"sourcesContent":["<template>\n  <div class=\"osk-sizes-info\">\n    <div class=\"osk-sizes-info__content\">\n      <div class=\"osk-sizes-info__title\">\n        {{ $t('components.product.sizes.sizesInfo.title') }}\n      </div>\n\n      <div class=\"osk-sizes-info__subtitle\">\n        {{ $t('components.product.sizes.sizesInfo.subtitle') }}\n      </div>\n\n      <UikitLoader\n        v-if=\"pending\"\n        class=\"osk-sizes-info__loader\"\n      />\n\n      <template v-else>\n        <div class=\"osk-sizes-info__size-name\">\n          {{ currentType?.sizeTypeDescription }} - {{ currentType?.sizeType }}\n        </div>\n\n        <div class=\"osk-sizes-info__buttons\">\n          <div\n            v-for=\"size in currentTypeSizes\"\n            :key=\"size.id\"\n            :class=\"{\n              'osk-sizes-info__button': true,\n              'osk-sizes-info__button_in-stock': size.isInStock,\n              'osk-sizes-info__button_active': sizeChosenId === size.id,\n            }\"\n            @click=\"chooseSize(size.id)\"\n          >\n            {{ size.name }}\n          </div>\n        </div>\n\n        <div\n          v-if=\"comparedSizes?.length\"\n          class=\"osk-sizes-info__compared\"\n        >\n          <div class=\"osk-sizes-info__compared-title\">\n            {{ $t('components.product.sizes.sizesInfo.comparedTitle') }}\n          </div>\n\n          <div\n            v-for=\"(comparedSize, index) in comparedSizes\"\n            :key=\"index\"\n            class=\"osk-sizes-info__compared-item\"\n          >\n            <div class=\"osk-sizes-info__compared-item-name\">\n              {{ comparedSize.sizeTypeDescription }} <span>({{ comparedSize.sizeType }})</span>\n            </div>\n\n            <div class=\"osk-sizes-info__compared-item-size\">\n              {{ comparedSize.values[0].name }}\n            </div>\n          </div>\n        </div>\n      </template>\n    </div>\n\n    <div class=\"osk-sizes-info__footer\">\n      <UikitButton\n        full-width\n        :disabled=\"(!chosenInStock || pending)\"\n        @click=\"handleApply\"\n      >\n        {{ $t('common.ready') }}\n      </UikitButton>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  SizeValueDTORes, SizeTypeDTO, SizeDTO, OrderPositionDTORes,\n} from '~/restAPI/data-contracts';\nimport { SizeWithStockFlag } from '~/types/components/sizeModal';\nimport { useProductService } from '~/services/product';\n\nconst props = defineProps<{\n  product?: OrderPositionDTORes\n  size?: SizeValueDTORes\n  sizeTypes?: SizeTypeDTO[] | null\n}>();\n\nconst emits = defineEmits<{\n  (e: 'apply', value: SizeValueDTORes): void,\n}>();\n\nconst categoryId = computed(() => props.product?.categoryId);\nconst sizes = computed(() => props.product?.sizes ?? []);\nconst sizeChosen = computed(() => props.size ?? (props.product?.sizes && props.product?.sizes[0]));\n\nconst sizeChosenId = ref(sizeChosen.value ? sizeChosen.value.id : sizes.value[0].id);\n\nconst { getSizes } = useProductService();\n\nconst {\n  data: sizeTypes,\n  pending,\n  execute: getSizesRequest,\n} = useLazyAsyncData(() => {\n  if (props.sizeTypes) return Promise.resolve(props.sizeTypes);\n  if (!categoryId.value) return Promise.resolve([]);\n\n  return getSizes(categoryId.value);\n}, { immediate: false });\n\nconst currentTypeId = computed(() => sizes.value[0].categorySizeType);\nconst currentType = computed(() => sizeTypes.value?.find(({ sizeType }: SizeTypeDTO) => sizeType === currentTypeId.value));\nconst currentTypeSizes = computed<SizeWithStockFlag[]>(() => (currentType.value?.values\n  ? currentType.value.values // .filter((typeSize: SizeDTO) => typeSize.name !== 'U')\n    .map((typeSize: SizeDTO) => {\n      const currentSize = sizes.value.find((size) => size.id === typeSize.id);\n\n      const isInStock = (currentSize?.count ?? 0) > 0;\n\n      return {\n        ...typeSize,\n        isInStock,\n      };\n    })\n  : []));\n\nconst comparedSizes = computed(\n  () => sizeTypes.value\n    ?.map((sizeType:SizeTypeDTO) => {\n      const filtered = sizeType!.values!.filter((size:SizeDTO) => size.id === sizeChosenId.value); // && size.name !== 'U'\n\n      return {\n        ...sizeType,\n        values: filtered,\n      };\n    })\n    .filter((sizeType:SizeTypeDTO) => sizeType.sizeType !== currentTypeId.value && sizeType.values?.length),\n);\n\nconst chosenInStock = computed(\n  () => sizes.value.find((size) => size.id === sizeChosenId.value && (size.count ?? 0) > 0),\n);\n\nfunction chooseSize(sizeId?: number) {\n  sizeChosenId.value = sizeId;\n}\n\nfunction handleApply() {\n  emits('apply', chosenInStock.value!);\n}\n\nwatch(() => categoryId.value, async () => {\n  if (!categoryId.value) return;\n\n  getSizesRequest();\n}, { immediate: true });\n</script>\n\n<style scoped lang=\"scss\">\n@import \"~/assets/scss/settings/index\";\n\n.osk-sizes-info {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  padding-top: 50px;\n\n  @include media-query(md-and-up) {\n    padding-top: 100px;\n  }\n\n  &__content {\n    overflow-y: scroll;\n    height: 100%;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n\n    @include media-query(md-and-up) {\n      padding: 0 52px;\n      max-width: 504px;\n    }\n  }\n\n  &__loader {\n    margin: $indent-xlarge auto 0;\n  }\n\n  &__footer {\n    padding-top: $indent-medium;\n\n    @include media-query(md-and-up) {\n      padding: $indent-medium 52px $indent-mmedium;\n    }\n  }\n\n  &__title {\n    @include font-style($font-size-heading, $line-height-heading, $font-weight-bold);\n    margin-bottom: 18px;\n\n    @include media-query(md-and-up) {\n      margin-bottom: $indent-compact;\n    }\n  }\n\n  &__subtitle {\n    @include font-style($font-size-caption, $line-height-caption, $font-weight-medium);\n    margin-bottom: 49px;\n    color: $grey;\n\n    @include media-query(md-and-up) {\n      margin-bottom: 42px;\n    }\n  }\n\n  &__size-name {\n    @include font-style($font-size-heading, $line-height-heading, $font-weight-bold);\n    font-weight: $font-weight-bold;\n    margin-bottom: 26px;\n\n    @include media-query(md-and-up) {\n      @include font-style($font-size-body, $line-height-body, $font-weight-bold);\n    }\n  }\n\n  &__buttons {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n    margin-bottom: 34px;\n\n    @include media-query(md-and-up) {\n      margin-right: 0;\n      margin-bottom: 42px;\n    }\n  }\n\n  &__button {\n    width: 62px;\n    height: 52px;\n    border: 0.5px solid $grey-2;\n    border-radius: 2px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n\n    @include media-query(md-and-up) {\n      width: 52px;\n    }\n\n    &_in-stock {\n      border-color: $black;\n    }\n\n    &_active {\n      background: $black;\n      color: $white;\n    }\n  }\n\n  &__compared {\n    width: 100%;\n  }\n\n  &__compared-title {\n    @include font-style($font-size-heading, $line-height-heading, $font-weight-bold);\n    margin-bottom: 18px;\n\n    @include media-query(md-and-up) {\n      @include font-style($font-size-body, $line-height-body, $font-weight-bold);\n      margin-bottom: 10px;\n    }\n  }\n\n  &__compared-item {\n    padding: $indent-medium 0;\n    display: flex;\n    justify-content: space-between;\n\n    &:not(:last-child) {\n      border-bottom: 0.5px solid $grey-3;\n    }\n  }\n}\n</style>\n","<template>\n  <UikitDialog\n    :model-value=\"modelValue\"\n    position=\"right\"\n    full-height\n    content-class=\"osk-sizes-info-dialog\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <ProductSizesInfo\n      :product=\"product\"\n      :size=\"size\"\n      :size-types=\"sizeTypes\"\n      @apply=\"handleApply\"\n    />\n  </UikitDialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { OrderPositionDTORes, SizeValueDTORes, SizeTypeDTO } from '~/restAPI/data-contracts';\n\nconst props = defineProps<{\n  modelValue: boolean,\n  product?: OrderPositionDTORes\n  size?: SizeValueDTORes\n  sizeTypes?: SizeTypeDTO[] | null\n}>();\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void,\n  (e: 'update:size', value: SizeValueDTORes): void,\n}>();\n\nfunction handleApply(size: SizeValueDTORes) {\n  emits('update:size', size);\n  emits('update:modelValue', false);\n}\n</script>\n\n<style lang=\"scss\">\n@import \"~/assets/scss/settings/index\";\n\n.osk-sizes-info-dialog {\n  .osk-dialog__close {\n    top: 16px;\n    right: 16px;\n\n    @include media-query(md-and-up) {\n      top: 44px;\n      right: 44px;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","categoryId","computed","_a","sizes","sizeChosen","_b","sizeChosenId","ref","getSizes","useProductService","sizeTypes","pending","getSizesRequest","useLazyAsyncData","currentTypeId","currentType","sizeType","currentTypeSizes","typeSize","currentSize","size","isInStock","comparedSizes","filtered","chosenInStock","chooseSize","sizeId","handleApply","watch"],"mappings":"uoCAgFA,MAAMA,EAAQC,EAMRC,EAAQC,EAIRC,EAAaC,EAAS,IAAA,OAAM,OAAAC,EAAAN,EAAM,UAAN,YAAAM,EAAe,WAAU,EACrDC,EAAQF,EAAS,IAAM,OAAA,QAAAC,EAAAN,EAAM,UAAN,YAAAM,EAAe,QAAS,CAAA,EAAE,EACjDE,EAAaH,EAAS,IAAM,SAAA,OAAAL,EAAM,SAASM,EAAAN,EAAM,UAAN,YAAAM,EAAe,UAASG,EAAAT,EAAM,UAAN,YAAAS,EAAe,MAAM,KAAG,EAE3FC,EAAeC,EAAIH,EAAW,MAAQA,EAAW,MAAM,GAAKD,EAAM,MAAM,CAAC,EAAE,EAAE,EAE7E,CAAE,SAAAK,GAAaC,IAEf,CACJ,KAAMC,EACN,QAAAC,EACA,QAASC,CACX,EAAIC,EAAiB,IACfjB,EAAM,UAAkB,QAAQ,QAAQA,EAAM,SAAS,EACtDI,EAAW,MAETQ,EAASR,EAAW,KAAK,EAFF,QAAQ,QAAQ,CAAA,CAAE,EAG/C,CAAE,UAAW,EAAO,EAAA,aAAA,EAEjBc,EAAgBb,EAAS,IAAME,EAAM,MAAM,CAAC,EAAE,gBAAgB,EAC9DY,EAAcd,EAAS,WAAM,OAAAC,EAAAQ,EAAU,QAAV,YAAAR,EAAiB,KAAK,CAAC,CAAE,SAAAc,CAAS,IAAmBA,IAAaF,EAAc,OAAM,EACnHG,EAAmBhB,EAA8B,IAAO,OAAA,OAAAC,EAAAa,EAAY,QAAZ,MAAAb,EAAmB,OAC7Ea,EAAY,MAAM,OACjB,IAAKG,GAAsB,CACpB,MAAAC,EAAchB,EAAM,MAAM,KAAMiB,GAASA,EAAK,KAAOF,EAAS,EAAE,EAEhEG,IAAaF,GAAA,YAAAA,EAAa,QAAS,GAAK,EAEvC,MAAA,CACL,GAAGD,EACH,UAAAG,CAAA,CACF,CACD,EACD,CAAG,EAAA,EAEDC,EAAgBrB,EACpB,IAAA,OAAM,OAAAC,EAAAQ,EAAU,QAAV,YAAAR,EACF,IAAKc,GAAyB,CACxB,MAAAO,EAAWP,EAAU,OAAQ,OAAQI,GAAiBA,EAAK,KAAOd,EAAa,KAAK,EAEnF,MAAA,CACL,GAAGU,EACH,OAAQO,CAAA,CAEX,GACA,OAAQP,GAAA,OAAyB,OAAAA,EAAS,WAAaF,EAAc,SAASZ,EAAAc,EAAS,SAAT,YAAAd,EAAiB,UAAM,EAGpGsB,EAAgBvB,EACpB,IAAME,EAAM,MAAM,KAAMiB,GAASA,EAAK,KAAOd,EAAa,QAAUc,EAAK,OAAS,GAAK,CAAC,CAAA,EAG1F,SAASK,EAAWC,EAAiB,CACnCpB,EAAa,MAAQoB,CACvB,CAEA,SAASC,GAAc,CACf7B,EAAA,QAAS0B,EAAc,KAAM,CACrC,CAEM,OAAAI,EAAA,IAAM5B,EAAW,MAAO,SAAY,CACnCA,EAAW,OAEAY,GAAA,EACf,CAAE,UAAW,EAAA,CAAM,gyCC/HtB,MAAMd,EAAQC,EAKd,SAAS4B,EAAYP,EAAuB,CAC1CtB,EAAM,cAAesB,CAAI,EACzBtB,EAAM,oBAAqB,EAAK,CAClC"}