eba-price-list/js/price_list.js

'use strict';

const e = React.createElement;

const PRICE_LIST = [
  {
    "codigo": 1001,
    "producto": "Complex Bio Vitamins A+E+C",
    "contenido": "60 ml",
    "precio": 250,
    "publico": 500
  },
  {
    "codigo": 2001,
    "producto": "Complex Bio Vitamins A+E+C",
    "contenido": "250 ml.",
    "precio": 398,
    "publico": ""
  },
  {
    "codigo": 1002,
    "producto": "Sublime Uvit - Crema Reparadora",
    "contenido": "60 ml.",
    "precio": 250,
    "publico": 500
  },
  {
    "codigo": 2002,
    "producto": "Sublime Uvit - Crema Reparadora",
    "contenido": "250 ml.",
    "precio": 398,
    "publico": ""
  },
  {
    "codigo": 1003,
    "producto": "Audace - Glico Activo",
    "contenido": "50 ml.",
    "precio": 250,
    "publico": 500
  },
  {
    "codigo": 2003,
    "producto": "Audace - Glico Activo",
    "contenido": "120 ml.",
    "precio": 380,
    "publico": ""
  },
  {
    "codigo": 1004,
    "producto": "Bisome Retinol - Fluido Facial",
    "contenido": "50 ml.",
    "precio": 210,
    "publico": 420
  },
  {
    "codigo": 2004,
    "producto": "Bisome Retinol - Fluido Facial",
    "contenido": "120 ml.",
    "precio": 350,
    "publico": ""
  },
  {
    "codigo": 1005,
    "producto": "Emulsión de Higiene",
    "contenido": "120 ml.",
    "precio": 160,
    "publico": 320
  },
  {
    "codigo": 2005,
    "producto": "Emulsión de Higiene",
    "contenido": "500 ml.",
    "precio": 290,
    "publico": ""
  },
  {
    "codigo": 1006,
    "producto": "Repair Eye Contour",
    "contenido": "30 ml.",
    "precio": 280,
    "publico": 560
  },
  {
    "codigo": 1007,
    "producto": "Uvit Serum Defense",
    "contenido": "50 ml.",
    "precio": 220,
    "publico": 440
  },
  {
    "codigo": 2007,
    "producto": "Uvit Serum Defense",
    "contenido": "120 ml.",
    "precio": 380,
    "publico": ""
  },
  {
    "codigo": 2008,
    "producto": "Exfoliating Scrub",
    "contenido": "250 ml.",
    "precio": 290,
    "publico": ""
  },
  {
    "codigo": 2009,
    "producto": "Refreshing Mask",
    "contenido": "250 ml.",
    "precio": 330,
    "publico": ""
  },
  {
    "codigo": 2010,
    "producto": "Specific Mask",
    "contenido": "250 ml.",
    "precio": 350,
    "publico": ""
  },
  {
    "codigo": 1011,
    "producto": "Acne Skin Cleans",
    "contenido": "50 ml.",
    "precio": 180,
    "publico": 360
  },
  {
    "codigo": 2011,
    "producto": "Acne Skin Cleans",
    "contenido": "200 ml.",
    "precio": 320,
    "publico": ""
  },
  {
    "codigo": 2012,
    "producto": "Peeling Bio Regulador",
    "contenido": "30 ml.",
    "precio": 165,
    "publico": ""
  },
  {
    "codigo": 2013,
    "producto": "Micropeeling",
    "contenido": "30 ml.",
    "precio": 170,
    "publico": ""
  },
  {
    "codigo": 1016,
    "producto": "Microdermo Lift",
    "contenido": "20 ml.",
    "precio": 260,
    "publico": 520
  },
  {
    "codigo": 1017,
    "producto": "Hydra Intensive Serum",
    "contenido": "50 ml.",
    "precio": 220,
    "publico": 440
  },
  {
    "codigo": 2017,
    "producto": "Hydra Intensive Serum",
    "contenido": "120 ml.",
    "precio": 380,
    "publico": ""
  },
  {
    "codigo": 1018,
    "producto": "Hydra Intensive Tonico",
    "contenido": "50 ml.",
    "precio": 210,
    "publico": 420
  },
  {
    "codigo": 2018,
    "producto": "Hydra Intensive Tonico",
    "contenido": "120 ml.",
    "precio": 320,
    "publico": ""
  },
  {
    "codigo": 1020,
    "producto": "RENOVATIO Retinol For Men",
    "contenido": "50 ml.",
    "precio": 210,
    "publico": 420
  },
  {
    "codigo": 1021,
    "producto": "RENOVATIO Serum For Men",
    "contenido": "50 ml.",
    "precio": 210,
    "publico": 420
  },
  {
    "codigo": 1022,
    "producto": "RENOVATIO Skin Control For Men",
    "contenido": "50 ml.",
    "precio": 210,
    "publico": 420
  },
  {
    "codigo": 2023,
    "producto": "1 Vitamina C Liposomada",
    "contenido": "130 ml.",
    "precio": 210,
    "publico": ""
  },
  {
    "codigo": 2024,
    "producto": "2 Acido Lipoico",
    "contenido": "130 ml.",
    "precio": 200,
    "publico": ""
  },
  {
    "codigo": 2025,
    "producto": "3 Oligoelementos Marinos +Zn+Cu",
    "contenido": "130 ml.",
    "precio": 190,
    "publico": ""
  },
  {
    "codigo": 2026,
    "producto": "4 Fosfatidilcolina",
    "contenido": "130 ml.",
    "precio": 210,
    "publico": ""
  },
  {
    "codigo": 2027,
    "producto": "5 Centella Asiatica",
    "contenido": "130 ml.",
    "precio": 200,
    "publico": ""
  },
  {
    "codigo": 2028,
    "producto": "6 Espirulina",
    "contenido": "130 ml.",
    "precio": 190,
    "publico": ""
  },
  {
    "codigo": 2029,
    "producto": "7 Cafeina",
    "contenido": "130 ml.",
    "precio": 200,
    "publico": ""
  },
  {
    "codigo": 8000,
    "producto": "Tester de Hidratación",
    "contenido": "",
    "precio": 1590,
    "publico": ""
  },
  {
    "codigo": 1030,
    "producto": "Hydroviton - Monodosis",
    "contenido": "6 x 5 ml.",
    "precio": 540,
    "publico": 1080
  },
  {
    "codigo": 1031,
    "producto": "Vitamina F Pure - Monodosis",
    "contenido": "6 x 5 ml.",
    "precio": 515,
    "publico": 1030
  },
  {
    "codigo": 1032,
    "producto": "Skin Dose - Monodosis",
    "contenido": "6 x 5 ml.",
    "precio": 583,
    "publico": 1166
  },
  {
    "codigo": 1033,
    "producto": "Bio Dose - Monodosis",
    "contenido": "6 x 5 ml.",
    "precio": 500,
    "publico": 1000
  },
  {
    "codigo": 1034,
    "producto": "HSP - 20 - Monodosis",
    "contenido": "6 x 5 ml.",
    "precio": 590,
    "publico": 1180
  },
  {
    "codigo": 1035,
    "producto": "Complex AM 40 - Monodosis",
    "contenido": "6 x 5 ml.",
    "precio": 630,
    "publico": 1260
  },
  {
    "codigo": 1036,
    "producto": "Complex AM 45 - Monodosis",
    "contenido": "6 x 5 ml.",
    "precio": 610,
    "publico": 1220
  },
  {
    "codigo": 1037,
    "producto": "Vitamina C - Monodosis",
    "contenido": "6 x 5 ml.",
    "precio": 600,
    "publico": 1200
  },
  {
    "codigo": 1038,
    "producto": "Argan Bio + - Monodosis",
    "contenido": "6 x 5 ml.",
    "precio": 630,
    "publico": 1260
  },
  {
    "codigo": 1039,
    "producto": "DD Cream",
    "contenido": "50 ml.",
    "precio": 230,
    "publico": 460
  },
  {
    "codigo": 1040,
    "producto": "Whitening Cream",
    "contenido": "50 ml.",
    "precio": 200,
    "publico": 400
  },
  {
    "codigo": 2040,
    "producto": "Whitening Cream",
    "contenido": "200 ml",
    "precio": 340,
    "publico": ""
  },
  {
    "codigo": 1041,
    "producto": "Sensitive Cream",
    "contenido": "50 ml.",
    "precio": 200,
    "publico": 400
  },
  {
    "codigo": 2041,
    "producto": "Sensitive Cream",
    "contenido": "200 ml",
    "precio": 340,
    "publico": ""
  },
  {
    "codigo": 2042,
    "producto": "Dynamic DO ALL – 1",
    "contenido": "200 ml",
    "precio": 370,
    "publico": ""
  },
  {
    "codigo": 2043,
    "producto": "Dynamic DO ALL – 2",
    "contenido": "200 ml",
    "precio": 370,
    "publico": ""
  },
  {
    "codigo": 1044,
    "producto": "PROTECTION TIME  Color  Ác Hialurónico",
    "contenido": "40 ml",
    "precio": 290,
    "publico": 580
  },
  {
    "codigo": 1045,
    "producto": "PROTECTION TIME Sepicalm V.G.",
    "contenido": "40 ml",
    "precio": 280,
    "publico": 560
  },
  {
    "codigo": 2044,
    "producto": "PROTECTION TIME  Color Grosella",
    "contenido": "200 ml",
    "precio": 610,
    "publico": 1220
  },
  {
    "codigo": 2045,
    "producto": "PROTECTION TIME  Aceite de Sésamo",
    "contenido": "200 ml",
    "precio": 600,
    "publico": 1200
  },
  {
    "codigo": 1046,
    "producto": "Crema Antioxidante Corporal",
    "contenido": "200ml.",
    "precio": 190,
    "publico": 380
  },
  {
    "codigo": 2046,
    "producto": "Crema Antioxidante Corporal",
    "contenido": "500 ml.",
    "precio": 370,
    "publico": ""
  },
  {
    "codigo": 2047,
    "producto": "Dermo Corp, Crema de Masajes",
    "contenido": "500ml.",
    "precio": 350,
    "publico": 700
  },
  {
    "codigo": 2048,
    "producto": "Lift Corp, Crema de Masajes",
    "contenido": "500ml.",
    "precio": 360,
    "publico": 720
  },
  {
    "codigo": 1049,
    "producto": "Espuma ACTIVE 7",
    "contenido": "160 ml.",
    "precio": 290,
    "publico": 580
  },
  {
    "codigo": 1050,
    "producto": "Espuma Strialess",
    "contenido": "160 ml.",
    "precio": 300,
    "publico": 600
  },
  {
    "codigo": 1051,
    "producto": "S.O.S Sculpt",
    "contenido": "160ml.",
    "precio": 300,
    "publico": 600
  },
  {
    "codigo": 1052,
    "producto": "S.O.S Extreme",
    "contenido": "160 ml.",
    "precio": 300,
    "publico": 600
  },
  {
    "codigo": 9000,
    "producto": "Therapy Ritual's Coconut",
    "contenido": "150 ml.",
    "precio": 280,
    "publico": ""
  },
  {
    "codigo": 9001,
    "producto": "Therapy Ritual's Sweet Almond Oil",
    "contenido": "150 ml.",
    "precio": 270,
    "publico": ""
  },
  {
    "codigo": 9002,
    "producto": "Therapy Ritual's  - Origins",
    "contenido": "20 ml.",
    "precio": 280,
    "publico": 560
  },
  {
    "codigo": 9003,
    "producto": "Therapy Ritual's - Early Spring",
    "contenido": "20ml.",
    "precio": 220,
    "publico": 440
  },
  {
    "codigo": 9004,
    "producto": "Therapy Ritual's - Soltice",
    "contenido": "20 ml.",
    "precio": 230,
    "publico": 460
  },
  {
    "codigo": 9005,
    "producto": "Therapy Ritual's - Imperial Species",
    "contenido": "20 ml.",
    "precio": 230,
    "publico": 460
  },
  {
    "codigo": 9006,
    "producto": "Therapy Ritual's - Select Lavander",
    "contenido": "20 ml.",
    "precio": 230,
    "publico": 460
  }
];
const HEADERS = ['Cod.', 'Producto', 'Cont.', 'Precio', 'Sug. Público']

const HeaderMaker = () => e(
  'thead',
  null,
  e(
    'tr',
    null,
    HEADERS.map(header => e('th', { key: header }, header))
  )
);

const MkTD = (prop, key) => e(
  'td',
  null,
  prop
);

const formatPrice = price => price ? `$ ${new Intl.NumberFormat('es-ES',{ maximumSignifiantDigits: 2, minimumFractionDigits: 2 }).format(price)}` : '-';

const BodyMaker = () => e(
  'tbody',
  null,
  PRICE_LIST.map((item) => e(  
    'tr',
    { key: item.codigo },
    MkTD(item.codigo),
    MkTD(item.producto),
    MkTD(item.contenido),
    MkTD(formatPrice(item.precio)),
    MkTD(formatPrice(item.publico))
  ))
);

const PriceList = () => e(
  'table',
  {
    className: 'table is-striped is-narrow is-fullwidth'
  },
  HeaderMaker(),
  BodyMaker()
)

const domContainer = document.querySelector('#price_list');
ReactDOM.render(e(PriceList), domContainer);