pricing.ts

import { html, Component, LitElement, css } from '@rxdi/lit-html';

import RedRock from '@client/assets/images/background/red-rock.png';
import BlueWater from '@client/assets/images/background/blue-water.png';
import Atmosphere from '@client/assets/images/background/plant-with-athmosphear.png';

interface PricingTemplate {
  title: string;
  subTitle: string;
  slogan: string;
  button: string;
  buttonColor: string;
  image: string;
  slogan_two?: string;
}

/**
 * @customElement pricing-component
 */
@Component({
  selector: 'pricing-component',
  style: css``,
  template(this: PricingComponent) {
    return html`
      <div style="margin-top: 100px; margin-bottom: 80px;">
        <flex-grid
          .$items=${[this.getTemplate('open_source'), this.getTemplate('pro'), this.getTemplate('enterprise')]}
        ></flex-grid>
        <flex-grid
          .$items=${[
            html`
              <h2 style="color:#359eb6; font-style: italic;">Free 7-day trial available in app</h2>
            `,
          ]}
        ></flex-grid>
      </div>
    `;
  },
})
export class PricingComponent extends LitElement {
  getTemplate(type: 'open_source' | 'pro' | 'enterprise') {
    return html`
      <div
        style="text-align: center;padding-top:0px; padding: 35px;width: 300px;background-image: linear-gradient(red, #1c1f24); background: #282d32; margin-right: 20px; margin-bottom: 20px;"
      >
        ${type === 'open_source'
          ? this.getSingleTemplate({
              title: 'Open source',
              slogan: 'Free',
              subTitle: 'For open source and early stage startups and non-comercial use',
              button: 'Download now',
              image: RedRock,
              buttonColor: '#c2492f',
            })
          : ``}
        ${type === 'pro'
          ? this.getSingleTemplate({
              title: 'Pro',
              slogan: '$49/user/yr',
              subTitle: 'For commercial use and additional features',
              button: 'Buy pro',
              image: BlueWater,
              buttonColor: '#359ec0',
            })
          : ``}
        ${type === 'enterprise'
          ? this.getSingleTemplate({
              title: 'Enterprise',
              slogan: '$99/user/yr',
              subTitle: 'For installation on your servers and use behind a firewall',
              button: 'By pro',
              image: Atmosphere,
              slogan_two: '10 users maximum',
              buttonColor: '#48b696',
            })
          : ``}
      </div>
    `;
  }

  getSingleTemplate({ buttonColor, slogan, slogan_two, subTitle, title, button, image }: PricingTemplate) {
    return html`
      <h1 style="margin-top:0px;color: ${buttonColor}; font-weight: 400">${title}</h1>
      <p style="width: 100%; border: 2px solid ${buttonColor};"></p>
      <p style="color: #bec0c3">${subTitle}</p>
      <img style="width: 220px; height: 220px;" src=${image} />
      <div style="height: 100px;">
        <h1 style="font-weight: 400;color: #b7bab9; margin-top: 0px; margin-bottom: 0px;">${slogan}</h1>
        <p style="color: #b7bab9;margin-top:0px; padding-top:0px; margin-bottom: 35px;">${slogan_two}</p>
      </div>

      <app-button .color=${buttonColor} .text=${button}></app-button>
    `;
  }
}