@kompasid/lit-web-components 0.1.0

package/src/components/kompas-paywall/KompasPaywall.ts

@@ -0,0 +1,398 @@
+import { html, css, LitElement } from 'lit'
+import { property, state, customElement } from 'lit/decorators.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { PaywallProduct } from './types.js'
+import '../kompas-paywall-body/KompasPaywallBody.js'
+import '../kompas-paywall-banner-registration/KompasPaywallBannerRegistration.js'
+import '../kompas-paywall-information-header/KompasPaywallInformationHeader.js'
+
+@customElement('kompas-paywall')
+export class KompasPaywall extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+    `,
+    TWStyles,
+  ]
+
+  /**
+   * Props
+   */
+  /**
+   * property isLogin untuk menghandle apakah user sudah login atau belum
+   * property countdownArticle untuk menghandle count artikel
+   * property type untuk menghandle tipe epaper
+   * property isWithHeader untuk menghandle paywall information header
+   * property textHeader digunakan sebagai text pada paywall information header
+   * property paywallData untuk menghandle data paywall
+   * property userGuid untuk menghandle user Guid
+   * property subscriptionStatus untuk menghandle status subscription user
+   * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak
+   * property paywall_location = The location where user encounter the paywall
+   * property paywall_subscription_package = The name of the subscription package viewed by user
+   * property paywall_subscription_id = The ID of the subscription package viewed by user
+   * property paywall_subscription_price = The price of the subscriprtion package viewed by user
+   * property paywall_position = The position of the subscription package viewed by user
+   * property page_type = Type of the page
+   * property content_id = ID of article (slug)
+   * property content_type = Whether it's free article or paid article
+   * property content_title = The title of article
+   * property tracker_content_categories = The category of the content
+   * property user_type = Type of user based on their subscription
+   * property subscription_status = Status of their subscription
+   * property page_domain = Page Domain
+   * property metered_wall_type = The type of Metered Wall
+   * property metered_wall_balance = The balance of their metered wall
+   * property epaper_edition = The edition of epaper viewed by user
+   * property theme = The theme of the paywall component
+   */
+
+  @state() private paywallData: PaywallProduct = {} as PaywallProduct
+
+  @property({ type: Boolean }) isLogin = false
+  @property({ type: Number }) countdownArticle = 0
+  @property({ type: String }) type: 'epaper' | 'reguler' = 'reguler'
+  @property({ type: Boolean }) isWithHeader = false
+  @property({ type: String }) textHeader = ''
+  @property({ type: String }) userGuid = ''
+  @property({ type: String }) subscriptionStatus = ''
+  @property({ type: Boolean }) swgEnable = false
+  @property({ type: String }) paywall_location = ''
+  @property({ type: String }) paywall_subscription_package = ''
+  @property({ type: Number }) paywall_subscription_id = 0
+  @property({ type: Number }) paywall_subscription_price = 0
+  @property({ type: Number }) paywall_position = 0
+  @property({ type: String }) tracker_page_type = ''
+  @property({ type: String }) tracker_content_id = ''
+  @property({ type: String }) tracker_content_title = ''
+  @property({ type: String }) tracker_content_categories = ''
+  @property({ type: String }) tracker_content_type = ''
+  @property({ type: String }) tracker_user_type = ''
+  @property({ type: String }) tracker_subscription_status = ''
+  @property({ type: String }) tracker_page_domain = ''
+  @property({ type: String }) tracker_metered_wall_type = ''
+  @property({ type: Number }) tracker_metered_wall_balance = 0
+  @property({ type: String }) tracker_epaper_edition = ''
+  @property({ type: String }) theme = ''
+
+  mockResult: PaywallProduct = {
+    informations: {
+      title: 'Langganan untuk Lanjut Membaca',
+      description: [
+        'Akses tak terbatas Kompas.id (web & app)',
+        'Berita digital tanpa iklan pop-up',
+        '30 arsip terbaru ePaper Kompas',
+        'Artikel  Opini eksklusif',
+      ],
+      register: {
+        img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',
+        title: 'Ingin Membaca Artikel Ini Secara Utuh?',
+        subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',
+        label: 'Daftar Sekarang ',
+      },
+      meterred: {
+        maxQuota: 5,
+        label: 'Langganan',
+        maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',
+        url: 'https://kompas.id/berlangganan',
+      },
+    },
+    packages: {
+      title: 'Sekali bayar, tanpa perpanjang otomatis',
+      memberships: [
+        {
+          title: 'Kompas Digital Premium 12 Bulan (Hemat 40%)',
+          percentage: 40,
+          price: 360000,
+          discountPrice: 600000,
+          periode: '1 Tahun',
+          isHighlight: true,
+          url: 'https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=',
+        },
+        {
+          title: 'Kompas Digital Premium 1 Bulan',
+          percentage: 0,
+          discountPrice: 0,
+          price: 50000,
+          periode: '1 Bulan',
+          isHighlight: false,
+          url: 'https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=',
+        },
+      ],
+    },
+    payment: {
+      desktop: [
+        {
+          name: 'gopay',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,
+        },
+        {
+          name: 'ovo',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,
+        },
+        {
+          name: 'mastercard',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,
+        },
+        {
+          name: 'bri',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,
+        },
+        {
+          name: 'bcaklikpay',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,
+        },
+        {
+          name: 'indomaret',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,
+        },
+        {
+          name: 'jcb',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,
+        },
+        {
+          name: 'dana',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,
+        },
+        {
+          name: 'visa',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,
+        },
+        {
+          name: 'mandiri',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,
+        },
+        {
+          name: 'bca',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,
+        },
+        {
+          name: 'bni',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,
+        },
+        {
+          name: 'akulaku',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,
+        },
+      ],
+      mobile: [
+        {
+          name: 'gopay',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,
+        },
+        {
+          name: 'ovo',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,
+        },
+        {
+          name: 'visa',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,
+        },
+        {
+          name: 'mastercard',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,
+        },
+      ],
+      ekstension: [
+        {
+          name: 'dana',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,
+        },
+        {
+          name: 'mandiri',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,
+        },
+        {
+          name: 'bri',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,
+        },
+        {
+          name: 'bcaklikpay',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,
+        },
+        {
+          name: 'akulaku',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,
+        },
+        {
+          name: 'bni',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,
+        },
+        {
+          name: 'indomaret',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,
+        },
+        {
+          name: 'bca',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,
+        },
+        {
+          name: 'jcb',
+          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,
+        },
+      ],
+    },
+  }
+
+  get darkUrl() {
+    return this.theme === 'dark' ? '-dark' : ''
+  }
+
+  override connectedCallback() {
+    super.connectedCallback()
+    this.paywallData = this.mockResult
+  }
+
+  private transitionBox() {
+    return html`
+      <div
+        class="h-20 ${this.theme === 'dark'
+          ? 'transparent-linear-dark'
+          : 'transparent-linear'} -mt-24 z-0 w-full"
+      ></div>
+    `
+  }
+
+  private renderEpaperPaywallSection() {
+    return html`<kompas-paywall-body
+      paywall_location=${this.paywall_location}
+      paywall_subscription_package=${this.paywall_subscription_package}
+      paywall_subscription_id=${this.paywall_subscription_id}
+      paywall_subscription_price=${this.paywall_subscription_price}
+      paywall_position=${this.paywall_position}
+      tracker_page_type=${this.tracker_page_type}
+      tracker_content_id=${this.tracker_content_id}
+      tracker_content_title=${this.tracker_content_title}
+      tracker_content_categories=${this.tracker_content_categories}
+      tracker_user_type=${this.tracker_user_type}
+      tracker_subscription_status=${this.tracker_subscription_status}
+      tracker_page_domain=${this.tracker_page_domain}
+      tracker_metered_wall_type=${this.tracker_metered_wall_type}
+      tracker_epaper_edition=${this.tracker_epaper_edition}
+      tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
+      ?swgEnable=${this.swgEnable}
+      tracker_content_type=${this.tracker_content_type}
+      ?isLogin=${this.isLogin}
+      type=${this.type}
+      countdownArticle=${this.countdownArticle}
+      .paywallData=${this.paywallData}
+      subscriptionStatus=${this.subscriptionStatus}
+      userGuid=${this.userGuid}
+      theme=${this.theme}
+    ></kompas-paywall-body>`
+  }
+
+  private renderRegularPaywallSection() {
+    const defaultHeaderText: string =
+      this.paywallData.informations.meterred.maxQuotaMessage
+    if (this.isWithHeader) {
+      return html`
+        <div>
+          ${this.transitionBox()}
+          <div
+            class="flex flex-col ${this.theme === 'dark'
+              ? 'bg-dark-5'
+              : 'bg-white'} items-center justify-center mx-4 md:mx-0"
+          >
+            <div class="flex flex-col w-full max-w-screen-md my-5">
+              <kompas-paywall-information-header
+                text=${this.textHeader || defaultHeaderText}
+                theme=${this.theme}
+              ></kompas-paywall-information-header>
+              <kompas-paywall-body
+                paywall_location=${this.paywall_location}
+                paywall_subscription_package=${this
+                  .paywall_subscription_package}
+                paywall_subscription_id=${this.paywall_subscription_id}
+                paywall_subscription_price=${this.paywall_subscription_price}
+                paywall_position=${this.paywall_position}
+                tracker_page_type=${this.tracker_page_type}
+                tracker_content_id=${this.tracker_content_id}
+                tracker_content_title=${this.tracker_content_title}
+                tracker_content_categories=${this.tracker_content_categories}
+                tracker_user_type=${this.tracker_user_type}
+                tracker_subscription_status=${this.tracker_subscription_status}
+                tracker_page_domain=${this.tracker_page_domain}
+                tracker_metered_wall_type=${this.tracker_metered_wall_type}
+                tracker_epaper_edition=${this.tracker_epaper_edition}
+                tracker_metered_wall_balance=${this
+                  .tracker_metered_wall_balance}
+                tracker_content_type=${this.tracker_content_type}
+                ?swgEnable=${this.swgEnable}
+                ?isLogin=${this.isLogin}
+                type=${this.type}
+                countdownArticle=${this.countdownArticle}
+                .paywallData=${this.paywallData}
+                subscriptionStatus=${this.subscriptionStatus}
+                userGuid=${this.userGuid}
+                theme=${this.theme}
+              ></kompas-paywall-body>
+            </div>
+          </div>
+        </div>
+      `
+    }
+    return html`
+      <div>
+        ${this.transitionBox()}
+        <div
+          class="flex flex-col ${this.theme === 'dark'
+            ? 'bg-dark-5'
+            : 'bg-white'} items-center justify-center mx-4 md:mx-0"
+        >
+          <div class="flex flex-col w-full max-w-screen-md my-5">
+            <kompas-paywall-banner-registration
+              .bannerData=${this.paywallData.informations.register}
+              theme=${this.theme}
+            ></kompas-paywall-banner-registration>
+            <kompas-paywall-body
+              tracker_content_type=${this.tracker_content_type}
+              paywall_location=${this.paywall_location}
+              paywall_subscription_package=${this.paywall_subscription_package}
+              paywall_subscription_id=${this.paywall_subscription_id}
+              paywall_subscription_price=${this.paywall_subscription_price}
+              paywall_position=${this.paywall_position}
+              tracker_page_type=${this.tracker_page_type}
+              tracker_content_id=${this.tracker_content_id}
+              tracker_content_title=${this.tracker_content_title}
+              tracker_content_categories=${this.tracker_content_categories}
+              tracker_user_type=${this.tracker_user_type}
+              tracker_subscription_status=${this.tracker_subscription_status}
+              tracker_epaper_edition=${this.tracker_epaper_edition}
+              tracker_page_domain=${this.tracker_page_domain}
+              tracker_metered_wall_type=${this.tracker_metered_wall_type}
+              tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
+              ?swgEnable=${this.swgEnable}
+              ?isLogin=${this.isLogin}
+              type=${this.type}
+              countdownArticle=${this.countdownArticle}
+              .paywallData=${this.paywallData}
+              subscriptionStatus=${this.subscriptionStatus}
+              userGuid=${this.userGuid}
+              theme=${this.theme}
+            ></kompas-paywall-body>
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  private selectorTypePaywall = (type: 'epaper' | 'reguler') => {
+    switch (type) {
+      case 'epaper':
+        return this.renderEpaperPaywallSection()
+      case 'reguler':
+        return this.renderRegularPaywallSection()
+      default:
+        return this.renderRegularPaywallSection()
+    }
+  }
+
+  render() {
+    return html`
+      <div class="relative w-full">${this.selectorTypePaywall(this.type)}</div>
+    `
+  }
+}

package/src/components/kompas-paywall/readme.md

@@ -0,0 +1,166 @@
+# kompas-paywall
+
+Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](https://epaper.kompas.id) dan [kompas.id](https://kompas.id).  Penggunaan komponen ini dapat dibedakan berdasarkan type productnya ( epaper atau reguler(kompas.id)). 
+
+## Pemasangan
+
+### - CDN
+
+Selalu menggunakan versi terbaru:
+```html
+<script src="https://unpkg.com/@kompasid/web-components@latest" type="module" async defer></script>
+```
+atau menggunakan versi tertentu, saat ini belum disarankan:
+```html
+<script src="https://unpkg.com/@kompasid/web-components@0.0.1-alpha-5" type="module" async defer></script>
+```
+
+### - NPM
+```bash
+npm i -D @kompasid/web-components
+```
+
+### - Yarn
+```bash
+yarn add -D @kompasid/web-components
+```
+
+## Penggunaan
+
+### - Vue.js
+Apabila menggunakan Vue.js sebagai kerangka kerja Javascript, Anda perlu menambahkan konfigurasi berikut di `./src/main.js`:
+
+```javascript
+import Vue from "vue";
+import App from "./App.vue";
+
+import {
+  applyPolyfills,
+  defineCustomElements,
+} from "@kompasid/web-components/loader";
+
+Vue.config.productionTip = false;
+
+// Perintahkan Vue untuk mengabaikan komponen dengan prefiks 'kompas-'
+Vue.config.ignoredElements = [/kompas-\w*/];
+
+// Bebat komponen kustom ke obyek window
+applyPolyfills().then(() => {
+  defineCustomElements();
+});
+
+new Vue({
+  render: (h) => h(App),
+}).$mount("#app");
+```
+
+### - NuxtJS
+Apabila menggunakan NuxtJS, Anda bisa menggunakan pustaka [Gomah/nuxt-stencil](https://github.com/Gomah/nuxt-stencil). Tugas selanjutnya adalah menambahkan konfigurasi berikut di `nuxt.config.js`:
+
+```javascript
+export default {
+  modules: [
+    'nuxt-stencil'
+  ],
+  stencil: {
+    lib: '@kompasid/web-components',
+    prefix: 'kompas-',
+    renderOptions: {},
+    hydratePath: '@kompasid/web-components/hydrate',
+    loaderPath: '@kompasid/web-components/loader',
+    ignoredElements: null
+  },
+}
+```
+
+### Standar
+Anda perlu meletakkan _tag_ komponen `<kompas-paywall />` pada halaman anda.
+
+Contoh:
+
+<img width="500" alt="" src="https://i.ibb.co/BwdhYsJ/Screenshot-2022-04-07-151048.png">
+
+
+### Elemen
+```javascript
+<kompas-paywall 
+  type="reguler" 
+  is-with-header="true"
+  header-text="this is defult text message"
+/>
+```
+
+### Catatan
+
+Kompas Paywall ini terdiri dari beberapa sub-komponen sebagai berikut : 
+
+1. kompas-paywall-body <br>
+  sub-komponen ini merupakan bagian paywall body yang memiliki dua tipe yaitu _epaper_ dan _reguler_ 
+  <br>
+    * epaper <br>
+  <img width="300" src="https://user-images.githubusercontent.com/43400392/162157850-b82cd11a-a15e-4a44-9f7e-b5b9bab62ee9.png">
+    * reguler <br>
+  <img width="300" src="https://user-images.githubusercontent.com/43400392/162159351-9dbef0ce-0113-4cbb-a8a6-9709fbaf1974.png">
+
+2. kompas-paywall-banner-registration <br>
+  sub-komponen ini merupakan komponen banner registration user <br>
+  <img width="300" src="https://user-images.githubusercontent.com/43400392/162159659-3bbc12ca-78bb-4985-baf6-0df35a5e89a2.png">
+  
+3. kompas-paywall-information-header <br>
+  sub-komponen ini merupakan komponen yang digunakan pada mettered paywall ketika mencapai kuota maksimal <br>
+  <img width="300" src="https://user-images.githubusercontent.com/43400392/162159671-39462ffd-8dd8-4cf5-93ed-fb3bd8751d89.png">
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                       | Attribute                      | Description | Type                    | Default     |
+| ------------------------------ | ------------------------------ | ----------- | ----------------------- | ----------- |
+| `countdownArticle`             | `countdown-article`            |             | `number`                | `0`         |
+| `isLogin`                      | `is-login`                     |             | `boolean`               | `false`     |
+| `isWithHeader`                 | `is-with-header`               |             | `boolean`               | `false`     |
+| `paywall_location`             | `paywall_location`             |             | `string`                | `''`        |
+| `paywall_position`             | `paywall_position`             |             | `number`                | `0`         |
+| `paywall_subscription_id`      | `paywall_subscription_id`      |             | `number`                | `0`         |
+| `paywall_subscription_package` | `paywall_subscription_package` |             | `string`                | `''`        |
+| `paywall_subscription_price`   | `paywall_subscription_price`   |             | `number`                | `0`         |
+| `subscriptionStatus`           | `subscription-status`          |             | `string`                | `''`        |
+| `swgEnable`                    | `swg-enable`                   |             | `boolean`               | `false`     |
+| `textHeader`                   | `text-header`                  |             | `string`                | `''`        |
+| `theme`                        | `theme`                        |             | `string`                | `''`        |
+| `tracker_content_categories`   | `tracker_content_categories`   |             | `string`                | `''`        |
+| `tracker_content_id`           | `tracker_content_id`           |             | `string`                | `''`        |
+| `tracker_content_title`        | `tracker_content_title`        |             | `string`                | `''`        |
+| `tracker_content_type`         | `tracker_content_type`         |             | `string`                | `''`        |
+| `tracker_epaper_edition`       | `tracker_epaper_edition`       |             | `string`                | `''`        |
+| `tracker_metered_wall_balance` | `tracker_metered_wall_balance` |             | `number`                | `0`         |
+| `tracker_metered_wall_type`    | `tracker_metered_wall_type`    |             | `string`                | `''`        |
+| `tracker_page_domain`          | `tracker_page_domain`          |             | `string`                | `''`        |
+| `tracker_page_type`            | `tracker_page_type`            |             | `string`                | `''`        |
+| `tracker_subscription_status`  | `tracker_subscription_status`  |             | `string`                | `''`        |
+| `tracker_user_type`            | `tracker_user_type`            |             | `string`                | `''`        |
+| `type`                         | `type`                         |             | `"epaper" \| "reguler"` | `'reguler'` |
+| `userGuid`                     | `user-guid`                    |             | `string`                | `''`        |
+
+
+## Dependencies
+
+### Depends on
+
+- [kompas-paywall-body](../kompas-paywall-body)
+- [kompas-paywall-information-header](../kompas-paywall-information-header)
+- [kompas-paywall-banner-registration](../kompas-paywall-banner-registration)
+
+### Graph
+```mermaid
+graph TD;
+  kompas-paywall --> kompas-paywall-body
+  kompas-paywall --> kompas-paywall-information-header
+  kompas-paywall --> kompas-paywall-banner-registration
+  style kompas-paywall fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*

package/src/components/kompas-paywall/types.ts

@@ -0,0 +1,53 @@
+export interface Product {
+  title: string
+  percentage: number
+  price: number
+  discountPrice: number
+  periode: string
+  isHighlight: boolean
+  url: string
+}
+export interface Metered {
+  maxQuota: number
+  label: string
+  maxQuotaMessage: string
+  url: string
+}
+export interface PaymentImage {
+  name: string
+  link: string
+}
+export interface Registration {
+  img: string
+  title: string
+  subtitle: string
+  label: string
+}
+export interface Informations {
+  title: string
+  description: Array<string>
+  register: {
+    img: string
+    title: string
+    subtitle: string
+    label: string
+  }
+}
+export interface Packages {
+  title: string
+  memberships: Array<Product>
+}
+export interface PaywallProduct {
+  informations: {
+    title: string
+    description: Array<string>
+    register: Registration
+    meterred: Metered
+  }
+  packages: Packages
+  payment: {
+    desktop: Array<PaymentImage>
+    mobile: Array<PaymentImage>
+    ekstension: Array<PaymentImage>
+  }
+}