mam sobie komponent 

```
<template>
  <LazyBaseModal
    v-if="isBidModalOpen"
    is-sticky-header
    :is-click-outside="false"
    :is-overlay="false"
    is-nav-visible
    @close-modal="closeBidModal"
  >
    <template #header>
      <ListingStickyHeader
        :collection-name="collectionName"
        :watch-name="watchName"
        :commercial-reference-number="commercialReferenceNumber"
        :count="bidsCount"
        is-auction
        @click-count="showBidHistoryModal"
      />
    </template>
    <template #body>
      <div class="modal-body flex flex-wrap h-full bg-sand flex-col-reverse lg:flex-row">
        <AuctionRibbon v-if="isMobileOrTabletUsed" class="order-1" />

        <div class="w-full lg:w-1/2">
          <div class="lg-inner-container ml-auto px-4 py-10 lg:py-8">
            <div class="lg:max-w-xl xl:max-w-2xl">
              <BaseButton
                v-if="isDesktopUsed"
                :theme="Theme.Secondary"
                :label="$t('common.cta.back')"
                icon-left="arrowLeft"
                :icon-size="20"
                :is-separate-icon="true"
                i18n-key="common.cta.back"
                @click="closeBidModal"
              />

              <p class="modal__title text-h5 md:text-h3 mb-0 lg:mt-6">
                {{ $t('bid.placeABid') }}
              </p>
              <p class="modal__instructions text-base mb-6 pb-6 lg:mb-10 lg:pb-10">
                <i18n-t
                  keypath="bid.legalNote"
                  tag="span"
                >
                  <template #url>
                    <a
                      href="/terms-of-sale"
                      class="underline text-velvet"
                      target="_blank"
                    >{{ t('bid.legalNoteLink') }}</a>
                  </template>
                </i18n-t>
              </p>

              <div class="border border-charcoal border-opacity-20 rounded-lg py-5 px-4 mb-10">
                <div class="flex flex-nowrap justify-between gap-2 mb-4">
                  <ListingTypeInfo :show-price="isResident" />
                  <div>
                    <ListingRemainingTime />
                  </div>
                </div>
                <hr class="border-t-0 border-b border-charcoal border-opacity-20">
                <div
                  class="flex flex-nowrap pt-4 gap-2"
                  :class="[ bids?.data?.length ? 'justify-between' : 'justify-end' ]"
                >
                  <BaseButton
                    v-if="bids?.data?.length"
                    :label="$t('bid.countBid', bidsCount)"
                    :size="Size.Small"
                    :theme="Theme.Secondary"
                    class="history-bids"
                    i18n-key="bid.countBid"
                    @click="showBidHistoryModal"
                  />

                  <time class="text-sm">
                    {{ $t('common.on') }}
                    {{ getFormattedDate(listingEndDate, 'D/M/YY') }}
                    {{ $t('common.at') }}
                    {{ getFormattedDate(listingEndDate, 'h:mm a') }}
                  </time>
                </div>
              </div>

              <div v-if="isProofOfFundsRequired && !isCustomerProofOfFundsValid">
                <p class="text-sm text-charcoal uppercase mb-4">
                  {{ $t('proofOfFunds.title') }}
                </p>
                <p class="text-xs text-charcoal text-opacity-50">
                  {{ $t('proofOfFunds.info') }}
                </p>
                <div class="mt-4">
                  <BaseButton
                    :label="$t('proofOfFunds.card.provideCta')"
                    :size="Size.Medium"
                    :theme="Theme.Primary"
                    class="w-full justify-center md:w-auto md:justify-start"
                    i18n-key="proofOfFunds.card.provideCta"
                    @click="showPOFUploadModal"
                  />
                  <ProofOfFundsUploadModal v-if="isPOFUploadModalOpen" />
                  <QAModal
                    v-if="isPOFQAModalOpen"
                    :modal-name="Modals.PROOF_OF_FUNDS_QA_MODAL"
                    :datasource-name="DataSourceNames.PROOF_OF_FUNDS_QA"
                  />
                  <ProofOfFundsConfirmationModal v-if="isPOFConfirmationModalOpen" />
                </div>
              </div>

              <form v-else @submit.prevent="postBid">
                <p class="text-sm text-charcoal uppercase my-4">
                  {{ $t('bid.enterBid') }}:
                </p>

                <div class="flex gap-2 mb-2">
                  <BaseButton
                    :class="bidInInputStyles(currentValue, minimalBidStep)"
                    :label="formatPriceWithCurrency(getLocale, currentCurrency, Math.ceil(centsToBasic(currentValue) + minimalBidStep))"
                    :size="Size.Small"
                    :theme="Theme.Secondary"
                    i18n-key="bid-step-level-1"
                    @click="setAmount(minimalBidStep)"
                  />
                  <BaseButton
                    :class="bidInInputStyles(currentValue, 300)"
                    :label="formatPriceWithCurrency(getLocale, currentCurrency, Math.ceil(centsToBasic(currentValue) + 300))"
                    :size="Size.Small"
                    :theme="Theme.Secondary"
                    i18n-key="bid-step-level-2"
                    @click="setAmount(300)"
                  />
                  <BaseButton
                    :class="bidInInputStyles(currentValue, 500)"
                    :label="formatPriceWithCurrency(getLocale, currentCurrency, Math.ceil(centsToBasic(currentValue) + 500))"
                    :size="Size.Small"
                    :theme="Theme.Secondary"
                    i18n-key="bid-step-level-3"
                    @click="setAmount(500)"
                  />
                </div>

                <div class="flex gap-3 flex-wrap md:flex-nowrap items-center gap-x-10 mb-12">
                  <form
                    class="flex items-base gap-3 flex-1"
                    @submit.prevent="postBid"
                  >
                    <CurrencyInput
                      v-model="formData.amount"
                      :listing-currency="currentCurrency"
                      :message="{
                        errorMessage: (v$.amount.$error && canCalculateTax) ? $t(v$.amount?.$errors[0]?.$message) : '',
                      }"
                      :error="v$.amount.$error"
                      :placeholder="inputPlaceholder"
                      class="flex-1"
                      @blur="v$.amount.$touch"
                    />

                    <div class="my-2">
                      <BaseButton
                        class="md:px-8"
                        :label="isMobileUsed ? t('common.cta.bid') : $t('bid.placeABid')"
                        :disabled="!formData.amount"
                        type="submit"
                        :i18n-key="isMobileUsed ? 'common.cta.bid' : 'bid.placeABid'"
                      />
                    </div>
                  </form>
                </div>

                <div v-if="bid" class="mb-4">
                  <PaymentDropin
                    :id="bid!._id"
                    :type="WSResources.BID"
                    :on-payment-completed="onPaymentCompleted"
                    :set-payment-loading="setPaymentLoading"
                    location="Bid modal"
                  />
                </div>

                <InfoBox
                  class="mb-4"
                  :title="$t('common.info.payment.title')"
                  icon="payment"
                  link="/"
                >
                  <p class="text-sm">
                    {{ $t('common.info.payment.content') }}
                  </p>
                </InfoBox>
                <InfoBox
                  class="mb-4"
                  :title="$t('common.estimatedTax')"
                  icon="tax"
                  link="/"
                >
                  <span class="flex items-baseline gap-4">
                    <LocalCurrency
                      v-if="canCalculateTax"
                      theme="approx"
                      :price="basicToCents(calculatedTaxNumber)"
                      :base-currency="currentCurrency"
                      is-info-style
                      :is-loading="isLoading"
                      watchable
                    />
                    <span v-else>{{ $t('bid.enterCalculateAmount') }}</span>
                    <span class="text-sm text-charcoal opacity-50">{{ $t('common.taxNotIncludedBid') }}</span>
                  </span>
                </InfoBox>
                <InfoBox
                  :title="$t('common.estimatedShipping')"
                  icon="shipping"
                  link="/"
                >
                  <LocalCurrency
                    theme="approx"
                    :price="estimatedShippingPrice"
                    :base-currency="currentCurrency"
                    is-info-style
                    watchable
                    class="mb-4"
                  />
                  <p class="mb-4 text-xs text-charcoal">
                    {{ $t('common.calculatedFor') }}: {{ countryOfResidency }}
                  </p>
                  <p class="text-xs text-charcoal opacity-50">
                    {{ $t('common.shippingCalculatedResidency') }}
                  </p>
                </InfoBox>

                <div v-if="bid && currentBidChanged && !isBidPlaced && !isLoadingPayment">
                  <BaseDialog v-model:open="currentBidChanged" @update:open="bidChangedDialogClose">
                    <template #main>
                      <div class="text-xl">
                        <p>{{ $t('bidDialog.currentBidJustChanged') }}</p>
                        <p>{{ $t('bidDialog.pleaseUpdateYourBid') }}</p>
                      </div>
                    </template>
                  </BaseDialog>
                </div>
                <div v-if="isLoadingPayment">
                  <BaseDialog v-model:open="isLoadingPayment" hide-close-button>
                    <template #main>
                      <div class="text-3xl">
                        <p>{{ $t('bidDialog.bidProcessing') }}</p>
                        <BaseSpinner />
                      </div>
                    </template>
                  </BaseDialog>
                </div>
                <div v-if="bidPlacedDialogOpen">
                  <BaseDialog v-model:open="bidPlacedDialogOpen" @update:open="postBidDialogClose">
                    <template #main>
                      <div class="text-xl">
                        <p>{{ $t(`bidDialog.title.${userBidStatus}`) }}</p>
                        <p v-if="userBidStatus !== UserBidStatus.HIGHEST">
                          {{ $t(`bidDialog.content.${userBidStatus}`) }}
                        </p>
                      </div>
                    </template>
                  </BaseDialog>
                </div>
              </form>
            </div>
          </div>
        </div>

        <div class="w-full lg:w-1/2 bg-frame-gradient flex items-center relative">
          <div class="lg-inner-container w-full text-left p-4 pb-8 lg:pb-4">
            <ListingFavorites class="px-4 absolute left-0 top-8 z-10" />

            <MainProductSlider
              id="slider-bid"
              :slider="watchImages"
            >
              <template #slide="{ slide }">
                <img
                  :src="slide.url"
                  :alt="slide.filename"
                  :width="isMobileUsed ? 325 : 510"
                  :height="isMobileUsed ? 400 : 624"
                >
              </template>
            </MainProductSlider>
          </div>
        </div>
      </div>
    </template>
  </LazyBaseModal>
</template>

<script setup lang="ts">
import { Size, Theme } from '~/types/ui'
import { Modals } from '~/types/Modal'
import { type BidItem, UserBidStatus } from '~/types/Listing'
import { formatPriceWithCurrency } from '~/utils/formatPriceWithCurrency'
import { getFormattedDate } from '~/utils/getFormattedDate'
import { WSResources } from '~/types/WebSockets'
import { useUserStore } from '~/store/user'
import { AydenResponses } from '~/types/Payment'
import { type ApiError } from '~/types/Error'
import { DataSourceNames } from '~/types/storyblok/Storyblok'

const { isMobileUsed, isDesktopUsed, isMobileOrTabletUsed } = useBreakpointsMediaQueries()
const { currentValue, currentCurrency, isProofOfFundsRequired, isCustomerProofOfFundsValid, listing, watchImages, userBidStatus, listingEndDate } = useListingData()
const { v$, formData, onSubmit, bids, minimalBidStep, currentBidChanged, websockets, bidsCount } = useBids()
const { collectionName, watchName, commercialReferenceNumber } = useProductData()
const { isModalOpen: isBidModalOpen, closeModal: closeBidModal } = useModals(Modals.BID_MODAL)
const { showModal: showBidHistoryModal } = useModals(Modals.BID_HISTORY_MODAL)
const { isModalOpen: isPOFUploadModalOpen, showModal: showPOFUploadModal } = useModals(Modals.PROOF_OF_FUNDS_UPLOAD_MODAL)
const { isModalOpen: isPOFQAModalOpen } = useModals(Modals.PROOF_OF_FUNDS_QA_MODAL)
const { isModalOpen: isPOFConfirmationModalOpen } = useModals(Modals.PROOF_OF_FUNDS_CONFIRMATION_MODAL)
const userStore = useUserStore()

const { getLocale } = useLocalization()
const { getCountryLabel } = useCountrySelector()
const { t } = useI18n()
const { fetchEstimatedTaxRates, resetEstimatedTaxRates, calculatedTaxNumber, fetchEstimatedShippingCost, estimatedShippingPrice } = useTax()
const { isResident } = useAuth()
const { addToast } = useToasts()

const isBidPlaced = ref<boolean>(false)
const bid = ref<BidItem | null>(null)
const isLoading = ref(false)
const isLoadingPayment = ref(false)

const canCalculateTax = computed(() => formData.amount ? String(formData.amount).length > 2 : false)
const inputPlaceholder = computed(() => `${formatPriceWithCurrency(getLocale.value, currentCurrency.value, centsToBasic(currentValue.value! + basicToCents(minimalBidStep)) || 0)} ${t('common.orMore')}`)
const bidPlacedDialogOpen = computed(() => isBidPlaced.value && userBidStatus.value?.length && !isLoadingPayment.value)
const countryOfResidency = computed(() => getCountryLabel(userStore?.user?.custom?.fields?.countryOfResidency))

let timeout: NodeJS.Timeout | null = null

const onPaymentCompleted = async (status: AydenResponses) => {
  currentBidChanged.value = false
  isLoadingPayment.value = false
  if (status === AydenResponses.AUTHORISED) {
    formData.amount = null
  }

  timeout = setTimeout(() => {
    isBidPlaced.value = true
  }, 2000)
}

const setPaymentLoading = (isLoading: boolean) => {
  isLoadingPayment.value = isLoading
}

const setAmount = (amount: number) => {
  if (currentValue?.value) {
    formData.amount = Math.ceil(centsToBasic(currentValue.value) + amount)
    v$.value.$touch()
  }
}

const postBid = async () => {
  const [ data, error ] = await onSubmit() as [BidItem, ApiError]

  if (error) {
    addToast(error)
    console.error('Post bid error', error)
  }

  bid.value = data
}

const calculateTax = async (amount: number | null) => {
  isLoading.value = true
  await fetchEstimatedTaxRates(amount, listing.value.productReference)
  isLoading.value = false
}

const bidInInputStyles = (value: number, addition: number) => formData.amount === Math.ceil(centsToBasic(value) + addition) ? '!bg-charcoal !bg-opacity-10 !border-opacity-100' : ''

const bidChangedDialogClose = (event: any) => {
  if (event) return

  currentBidChanged.value = false
  bid.value = null
  formData.amount = null
}

const postBidDialogClose = (event: any) => {
  if (event) return

  isBidPlaced.value = false
  bid.value = null
}

watchDebounced(() => formData.amount, (value) => {
  if (canCalculateTax.value) {
    calculateTax(value)
  } else {
    resetEstimatedTaxRates()
  }
}, { debounce: 400 })

fetchEstimatedShippingCost()

onMounted(async () => {
  if (websockets.state.connected) return

  await websockets.connect()
})

onUnmounted(() => {
  websockets.disconnect()
  if (timeout) {
    clearTimeout(timeout)
  }
})
</script>

<style lang="scss" scoped>
.modal-body {
  :deep(.history-bids) {
    @apply p-0 border-0 text-xs text-velvet underline capitalize min-h-0;
  }
}

:deep(.main-product-slider) {
  .swiper-pagination {
    @apply lg:absolute lg:left-4 lg:bottom-4;
  }
}
</style>
```

i tam mam 

```
<template>
  <BaseDialog v-model:open="isError">
    <template #main>
      <slot name="failure-message">
        <p>
          {{ $t('payment.refused') }}
        </p>

        <template v-if="type === WSResources.BID">
          <p>{{ $t('payment.bidNotPlaced') }}</p>
          <p>{{ $t('payment.tryAgain') }}</p>
        </template>

        <template v-if="type === WSResources.OFFER">
          <p>{{ $t('payment.offerNotPlaced') }}</p>
          <p>{{ $t('payment.tryAgain') }}</p>
        </template>

        <p class="mt-4">
          {{ $t('payment.contactSupport') }}
        </p>

        <ButtonAskQuestion
          class="mt-4"
          :label="$t('common.cta.contactMe')"
        />
      </slot>
    </template>
  </BaseDialog>

  <BaseDialog v-if="!hideSuccessMessage" v-model:open="isSuccess">
    <template #main>
      <slot name="success-message">
        <p>{{ $t('bidDialog.title.offer') }}</p>
      </slot>
      <BaseButton
        v-if="props.type === WSResources.ORDER"
        class="mt-7 w-full"
        :label="$t('checkout.payment.seeSummary')"
        i18n-key="checkout.payment.seeSummary"
        @click="seeSummary"
      />
    </template>
  </BaseDialog>

  <div v-if="isVisible" ref="dropin" />
</template>

<script setup lang="ts">
import { useApi } from '@/composables/useApi'
import type { PaymentMethod, CheckoutSession } from '@adyen/adyen-web/dist/types/types'
import { WSResources } from '~/types/WebSockets'
import AdyenCheckout from '@adyen/adyen-web'
import '@adyen/adyen-web/dist/adyen.css'
import { AydenResponses } from '~/types/Payment'
import { theme } from '@/tailwind.config'
import type { Price } from '~/types/Price'

type Props = {
  id?: string
  type: WSResources.BID | WSResources.OFFER | WSResources.ORDER
  amount?: Price
  onPaymentCompleted: (status: string) => void
  setPaymentLoading?: (isLoading: boolean) => void
  hideSuccessMessage?: boolean
  location?: string
}

const props = withDefaults(defineProps<Props>(), {
  location: 'Adyen Checkout'
})

const emit = defineEmits([ 'click:seeSummary', 'success' ])

const dropin = ref<HTMLElement | null>(null)
const isError = ref<boolean>(false)
const isSuccess = ref<boolean>(false)
const isVisible = ref<boolean>(true)

const config = useAppConfig()
const { public: env } = useRuntimeConfig()
const { $post } = useApi()
const { selectedLanguage, localeCodeForAdyen } = useLanguageSelector()
const { fontFamily: { helvetica }, colors: { charcoal, error } } = theme.extend
const { pushCTAClickEvent } = useGtm()
const { t } = useI18n()

const getEndpointUrl = (id: string, type: string): [string, string] => {
  switch (type) {
  case WSResources.BID:
    return [
      `${config.api.endpoints.auction.myBids}/${id}/pre-authorize`,
      `${config.api.endpoints.auction.myBids}/${id}/pre-authorize/available-payment-methods`
    ]
  case WSResources.OFFER:
    return [
      `${config.api.endpoints.auction.myOffers}/${id}/pre-authorize`,
      `${config.api.endpoints.auction.myOffers}/${id}/pre-authorize/available-payment-methods`
    ]
  case WSResources.ORDER:
    return [
      `${config.api.endpoints.ecommerce.orders}/${id}/payments`,
      `${config.api.endpoints.ecommerce.orders}/available-payment-methods`
    ]
  default:
    throw new Error('Invalid type')
  }
}

const initiateCheckout = async () => {
  const endpoints = getEndpointUrl(props.id, props.type)

  const [ session ] = await $post(endpoints[ 0 ], {
    returnUrl: env.siteUrl,
    ...props.type === WSResources.ORDER && { amount: props.amount!.centAmount, isWireTransfer: false }
  }) as [CheckoutSession, any]

  const [ paymentMethodsResponse ] = await $post(endpoints[ 1 ], {
    shopperLocale: selectedLanguage.value.code,
    ...props.type === WSResources.ORDER && { amount: props.amount!.centAmount, currency: props.amount!.currencyCode }
  }) as [{ paymentMethods: PaymentMethod[] }, any]

  const styleObject = {
    base: {
      fontSize: '14px',
      fontFamily: `${helvetica[ 0 ]}, ${helvetica[ 1 ]}`,
      fontWeight: '400',
      color: charcoal.DEFAULT,
    },
    error: {
      color: error.DEFAULT
    },
    placeholder: {
      color: charcoal[ 50 ]
    },
    validated: {
      color: charcoal.DEFAULT
    }
  }

  const checkout = await AdyenCheckout({
    environment: env.adyenEnv,
    clientKey: env.adyenClientKey,
    setStatusAutomatically: true,
    paymentMethodsResponse,
    locale: localeCodeForAdyen.value,
    session: {
      id: session.id,
      sessionData: session.sessionData,
    },
    paymentMethodsConfiguration: {
      card: {
        styles: styleObject,
      },
      storedCard: {
        styles: styleObject,
      }
    },
    beforeSubmit: (data, _, actions) => {
      actions.resolve(data)
      return props.setPaymentLoading && props.setPaymentLoading(true)
    },
    onActionHandled: (_) => {
      return props.setPaymentLoading && props.setPaymentLoading(false)
    },
    onPaymentCompleted: (data) => {
      if (data.resultCode === AydenResponses.AUTHORISED) {
        props.onPaymentCompleted(data.resultCode)
        isVisible.value = false

        if ([ WSResources.OFFER, WSResources.ORDER ].includes(props.type)) {
          isSuccess.value = true
          emit('success')
        }

        pushCTAClickEvent(
          null,
          {
            label: t('common.payment.pay'),
            location: props.location
          }
        )
        return
      }

      isError.value = true
      props.onPaymentCompleted(data.resultCode)
      checkout.remove('dropin')
      initiateCheckout()
    },
  })

  if (dropin.value) {
    checkout.create('dropin').mount(dropin.value)
  }
}

const seeSummary = () => {
  isSuccess.value = false
  emit('click:seeSummary')
}

onMounted(initiateCheckout)
</script>

<style lang="scss" scoped>
:deep(.adyen-checkout__dropin) {
  @apply bg-beige mb-8 rounded-lg;

  .adyen-checkout__payment-methods-list {
    @apply py-2.5;
  }

  .adyen-checkout__payment-method,
  .adyen-checkout__payment-method--selected {
    @apply bg-transparent border-0;

    &:not(.adyen-checkout__payment-method--selected) {
      .adyen-checkout__payment-method__radio {
        @apply shadow-none;
      }
    }
  }

  .adyen-checkout__payment-method__header {
    > .adyen-checkout__payment-method__brands {
      @apply hidden;
    }

    .adyen-checkout__payment-method__radio {
      @apply w-4 h-4 min-w-4 rounded-full transition-all duration-150 bg-beige bg-center bg-no-repeat border border-charcoal-30;

      &:after {
        @apply left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full m-0 w-0 h-0;
      }

      &.adyen-checkout__payment-method__radio--selected {
        @apply border border-solid border-charcoal;

        &:hover {
          @apply shadow-none;
        }

        &:after {
          @apply bg-charcoal w-2 h-2;
        }
      }
    }

    .adyen-checkout__payment-method__image__wrapper {
      @apply w-6 h-6 mr-3;

      &:after {
        @apply bg-no-repeat border-0 w-6 h-6;
        background-image: url('~/assets/img/icons/payment.svg');
      }

      img {
        @apply hidden;
      }
    }

    .adyen-checkout__payment-method__header__title {
      .adyen-checkout__payment-method__name,
      .adyen-checkout__payment-method__name--selected {
        @apply text-xl font-normal text-charcoal;
      }
    }
  }

  .adyen-checkout__payment-method__details {
    .adyen-checkout-form-instruction {
      @apply text-charcoal-60 text-xs mt-1 mb-5;
    }

    .adyen-checkout__label {
      &.adyen-checkout__label--focused {
        .adyen-checkout__label__text {
          @apply text-charcoal;
        }
      }

      .adyen-checkout__label__text {
        @apply text-base pb-3;
      }

      .adyen-checkout__label__text--error {
        @apply text-charcoal;
      }
    }

    .adyen-checkout__input-wrapper {
      .adyen-checkout__field__exp-date_hint_wrapper,
      .adyen-checkout__card__cvc__hint__wrapper {
        @apply hidden;
      }

      .adyen-checkout__input {
        @apply rounded-[44px] border border-charcoal-30 w-full bg-transparent outline-none text-sm py-0 pl-4 pr-11 shadow-none;

        &.adyen-checkout__input--error {
          @apply border-error;
        }

        &:after {
          @apply bg-no-repeat bg-cover border-0 w-4 h-4 inline-block absolute right-4 top-1/2 -translate-y-1/2;
          content: '';
          background-image: url('~/assets/img/icons/payment.svg');
        }

        img {
          @apply hidden;
        }

        &.adyen-checkout__input--valid {
          &:after {
            @apply hidden;
          }

          img {
            @apply block;
          }
        }
      }

      .adyen-checkout-input__inline-validation {
        @apply hidden;
      }
    }

    .adyen-checkout__card__brands {
      @apply h-auto gap-3 mt-0;

      .adyen-checkout__card__brands__brand-wrapper {
        @apply h-8 bg-beige;
        width: 52px;

        img {
          @apply w-full h-full rounded;
        }
      }
    }
  }

  .adyen-checkout__checkbox {
    .adyen-checkout__checkbox__input {
      + .adyen-checkout__checkbox__label {
        &:after {
          @apply bg-beige border border-charcoal rounded-sm shadow-none;
        }

        &:before {
          @apply top-0 left-0 rotate-0 border-0 rounded-sm w-4 h-4 bg-charcoal bg-no-repeat bg-center bg-[length:12px] shadow-none;
          background-image: url('~/assets/img/icons/check.svg');
        }
      }
    }

    .adyen-checkout__checkbox__label {
      @apply text-base pl-8;
    }
  }

  .adyen-checkout__button--pay {
    @apply h-10 py-2 px-4 bg-sunshine rounded-full border border-sunshine-600 shadow-none
    hover:bg-opacity-50 hover:border-opacity-0
    focus:bg-sunshine-600 focus:border-sunshine-600
    active:bg-sunshine-600 active:border-sunshine-600;

    .adyen-checkout__button__icon {
      @apply hidden;
    }

    .adyen-checkout__button__text {
      @apply text-charcoal text-sm font-normal;
    }
  }

  .adyen-checkout__field--error {
    .adyen-checkout__error-text {
      @apply text-error mt-2;

      &:before {
        @apply w-3 h-3 mr-1 bg-no-repeat bg-center bg-[length:12px];
        content: '';
        background-image: url('~/assets/img/icons/warning-circle.svg');
      }
    }
  }
}

:deep(.adyen-checkout__status--success) {
  @apply bg-beige border-0 rounded-lg;

  .adyen-checkout__status__text {
    @apply text-charcoal text-base;
  }
}
</style>
```

jak widać korzystam tam z websocketów i jak ktoś kupuje przez tego dropina rzecz to zmienia się status 
listing.status

export enum ListingStatuses {
  DRAFT = 'draft',
  IN_PREPARATION_WITH_CPO_TEAM = 'in preparation with CPO Team',
  AWAITING_SELLER_APPROVAL = 'awaiting seller approval',
  SCHEDULED_FOR_ACTIVATION = 'scheduled for activation',
  ACTIVE = 'active',
  ARCHIVED = 'archived',
  CANCELLED = 'cancelled',
  FINISHED = 'finished'
}

a ja muszę zrobić 

```
Whenever an auction ends while the user has an Adyen component opened, we should close the Adyen component, so that the deposit payment can't be authorised. Afterwards, a pop-up message must appear with information: "The auction has ended and your payment has been cancelled".

Whenever a fixed price listing ends while the user has an Adyen component opened, we should close the Adyen component, so that the deposit payment can't be authorised. Afterwards, a pop-up message must appear with information: "The auction has ended and your payment has been cancelled".
```