@orangesk/cms-templates 1.0.0-beta.0

package/src/pages/pricelist-tariff.mdx

@@ -0,0 +1,241 @@
+---
+---
+
+import {
+  Accordion,
+  AccordionItem,
+  Alert,
+  AnchorNavigation,
+  Bar,
+  BarBreak,
+  BarItem,
+  BlockAction,
+  BlockActionControl,
+  Breadcrumbs,
+  Button,
+  Buttons,
+  Card,
+  CardSection,
+  Carousel,
+  Container,
+  Cover,
+  Divider,
+  Expander,
+  Field,
+  Grid,
+  GridCol,
+  Group,
+  Icon,
+  IconList,
+  Image,
+  Label,
+  Link,
+  Pagination,
+  Pictogram,
+  Pill,
+  PromoBanner,
+  Section,
+  Select,
+  Table,
+  Tag,
+} from "@orangesk/orange-design-system";
+import Page from "../layouts/DefaultPage";
+import { PageHeadingSimple } from "../components/PageHeading";
+import { FileCard } from "../components/FileCard";
+import { NoSuccess } from "./pricelist.mdx";
+
+export const rows = [
+  {
+    col1: (
+      <p className="text-narrow">Mesačný poplatok (bez Digitálnej odmeny)</p>
+    ),
+    col2: {
+      className: "align-baseline",
+      value: "3,08 €",
+    },
+  },
+  {
+    col1: (
+      <p className="text-narrow">
+        Mesačný poplatok (s Digitálnou odmenou) <sup>18</sup>
+      </p>
+    ),
+    col2: {
+      className: "align-baseline",
+      value: "2,06 €",
+    },
+  },
+  {
+    col1: (
+      <p className="text-narrow">
+        Predplatený kredit <sup>2,3,4</sup>
+      </p>
+    ),
+    col2: {
+      className: "align-baseline",
+      value: "1,02 €",
+    },
+  },
+  {
+    col1: (
+      <p className="text-narrow">
+        Maximálny cenový limit/SR/EÚ/Zóna 1/jedno zúčtovacie obdobie{" "}
+        <sup>6, 7, 8</sup>
+      </p>
+    ),
+    col2: {
+      className: "align-baseline",
+      value: "20,50 €",
+    },
+  },
+  {
+    col1: (
+      <p className="text-narrow">
+        Cena volaní na účastnícke čísla 1 (i) do mobilnej a pevnej siete
+        spoločnosti Orange Slovensko, a.s, do sprístupnených mobilných aj
+        pevných sietí slovenských operátorov v SR, (ii) do sprístupnených
+        mobilných aj pevných telefónnych sietí operátorov v Európskej únii a
+        Zóny 1 (podľa zoznamu krajín v časti Cenníka služieb Medzinárodné
+        hovory) a (iii) v roamingu v rámci EÚ(Zóny 1) do EÚ (Zóny 1) a do
+        sprístupnených mobilných aj pevných telefónnych sietí operátorov v SR
+      </p>
+    ),
+    col2: {
+      className: "align-baseline",
+      value: "0,1230 €/min",
+    },
+  },
+  {
+    col1: (
+      <p className="text-narrow">
+        Cena SMS a MMS správ odoslaných na účastnícke čísla pevných a mobilných
+        sietí (i) slovenských operátorov v SR, (ii) operátorov v Európskej únii
+        a Zóny 1 (podľa zoznamu krajín v časti Cenníka služieb Medzinárodné
+        hovory) a (iii) v roamingu v rámci EÚ(Zóny 1) do EÚ (Zóny 1) a do
+        sprístupnených mobilných aj pevných telefónnych sietí operátorov v SR
+      </p>
+    ),
+    col2: {
+      className: "align-baseline",
+      value: "0,0615 €/SMS resp. MMS",
+    },
+  },
+  {
+    col1: (
+      <p className="text-narrow">
+        Nárok na využívanie služby Online ochrana Basic po bezplatnej aktivácii{" "}
+        <sup>17</sup>
+      </p>
+    ),
+    col2: {
+      className: "align-baseline",
+      value: "áno",
+    },
+  },
+  {
+    col1: (
+      <p className="text-narrow">
+        Objem dát <sup>10</sup>
+      </p>
+    ),
+    col2: undefined,
+  },
+];
+
+export const list = [
+  {
+    title: "Go Safe Mini",
+    id: "gosafemini",
+  },
+  {
+    title: "Doplnkové služby k paušálu Go Safe Mini",
+    id: "doplnkovesluzby",
+  },
+  {
+    title: "Balíky predplatených správ (Go Safe, Go Safe Data)",
+    id: "baliky_predplatenych_sprav",
+  },
+  {
+    title: (
+      <>
+        Jednorazové zvýšenie objemu dát 1 GB (Go Safe Mini)<sup>11</sup>
+      </>
+    ),
+    id: "jednorazove_zvysenie_objemu_dat_1GB",
+  },
+  {
+    title: (
+      <>
+        200 MB v mobile (Go Safe paušály) <sup>1</sup>
+      </>
+    ),
+    id: "vmobile",
+  },
+  {
+    title: "Balíky predplatených správ (Go Safe, Go Safe Data)",
+    id: "baliky_predplatenych_sprav",
+  },
+];
+
+export const Detail = () => (
+  <Section color="background-secondary" spacing="default">
+    <Accordion>
+      {list.map((item, itemIndex) => (
+        <AccordionItem
+          key={itemIndex}
+          renderTitle={() => <h2 className="h4 mb-none">{item.title}</h2>}
+          id={item.id}
+          isActive={item.id === "gosafemini"}
+        >
+          <Table
+            headers={[
+              {
+                key: "col1",
+                label: "Účastnícky program",
+              },
+              {
+                key: "col2",
+                label: (
+                  <span>
+                    Go Safe Mini <sup>5, 9, 12, 13, 14</sup>
+                  </span>
+                ),
+              },
+            ]}
+            rows={rows}
+          />
+          <Expander summary="Vysvetlivky indexov tabuľky">
+            <p>Tu sa nachádzajú vysvetlivky</p>
+          </Expander>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  </Section>
+);
+
+<Page>
+  <Breadcrumbs
+    label="Breadcrumbs"
+    items={[
+      {
+        text: "Domov",
+        url: "#",
+      },
+      {
+        text: "Cenník",
+        url: "#",
+      },
+      {
+        text: "Paušály",
+        url: "#",
+      },
+      {
+        text: "Go Safe Premium",
+        url: "#",
+      },
+    ]}
+  />
+  <PageHeadingSimple title="Go Safe Premium" />
+  <Detail />
+  <NoSuccess />
+</Page>