@bytebrand/fe-ui-core 4.8.26 → 4.8.28

package/source/components/ImageSettings/story.js

@@ -1,1212 +1,1212 @@
-import React from 'react';
-import i18next from 'i18next';
-import {withNamespaces} from 'react-i18next';
-import {Col, Row} from 'react-grid-system';
-import {storiesOf} from '@storybook/react';
-import {action} from '@storybook/addon-actions';
-
-import {PricePlan, OptionsTable, EditableOptionsTable} from './index';
-
-i18next.addResourceBundle('de', 'translation', {
-  optionsTable: {
-    icon: 'Vorchau',
-    category: 'Bilderserie',
-    mandatory: 'Bilder',
-    postProcess: 'davon optimiert',
-    counts: 'Bilderauswahl | davon freigestellt',
-    category_exterior: 'Exterior',
-    category_exterior_opened: 'Exterior opened',
-    category_convertible: 'Convertible',
-    category_interior: 'Interior',
-    category_highlight: 'Highlight',
-    category_custom_highlight: 'Custom',
-    packages_basic: 'BASIC',
-    packages_premium: 'BUSINESS',
-    packages_auto_de_premium: 'auto.de PREMIUM'
-  },
-  pricePlan: {
-    title_basic: 'Basic-Paket',
-    title_premium: 'Business-Paket',
-    title_auto_de_premium: 'auto.de Premium-Paket',
-    name_basic: 'Einsteiger Paket',
-    name_premium: 'Dealer Paket',
-    name_auto_de_premium: 'Super-Dealer Paket',
-    mandatoryCount: '{{count}} Bilder',
-    postProcessCount: '{{count}} freigestellte Bilder',
-    price: '{{price}} € pro Fahrzeug'
-  },
-  editableTable: {
-    choose: 'Bild auswählen',
-    release: 'Bild freistellen',
-    packages_basic: 'BASIC',
-    packages_premium: 'BUSINESS',
-    packages_auto_de_premium: 'auto.de PREMIUM',
-    counts: '{{selected}}/{{possible}}',
-    counts_auto_de_premium: 'ALLE',
-    category_exterior: 'Exterior ({{count}})',
-    category_exterior_opened: 'Exterior opened ({{count}})',
-    category_convertible: 'Convertible ({{count}})',
-    category_interior: 'Interior ({{count}})',
-    category_highlight: 'Highlight ({{count}})',
-    category_custom_highlight: 'Custom ({{count}})'
-  }
-});
-
-const parentImagePackages = [{
-  parentId: null,
-  parentOdooProductId: null,
-  id: 1,
-  type: 'basic',
-  title: 'Basic set',
-  odooProductId: '1231',
-  forAll: false,
-  imagePackageConfigs: [{
-    category: 'exterior',
-    image_code: 'ext_f_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_f_main_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_f_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'ext_feat_engine',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_f_ipanel3',
-    mandatory: true,
-    postProcess: true,
-    priority: 1
-  }, {
-    category: 'custom_highlight',
-    image_code: 'gen_feature',
-    mandatory: false,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior',
-    image_code: 'ext_f_left',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_f_left_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_f_left',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_ipanel1',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_f_ipanel4',
-    mandatory: true,
-    postProcess: true,
-    priority: 2
-  }, {
-    category: 'exterior',
-    image_code: 'ext_l_main',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_l_main_opened',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_l_main',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_ipanel2',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_rims',
-    mandatory: true,
-    postProcess: true,
-    priority: 3
-  }, {
-    category: 'exterior',
-    image_code: 'ext_b_left',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_b_left_opened',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_b_left',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_ipanel5',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_bluetooth',
-    mandatory: false,
-    postProcess: false,
-    priority: 4
-  }, {
-    category: 'exterior',
-    image_code: 'ext_b_main',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_b_main_opened',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_b_main',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_driverseats',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_handsfree',
-    mandatory: false,
-    postProcess: false,
-    priority: 5
-  }, {
-    category: 'exterior',
-    image_code: 'ext_b_right',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_b_right_opened',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_b_right',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_assistantseats',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_headupdisplay',
-    mandatory: false,
-    postProcess: false,
-    priority: 6
-  }, {
-    category: 'exterior',
-    image_code: 'ext_r_main',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_r_main_opened',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_r_main',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_b_rearseats',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_breakassistant',
-    mandatory: false,
-    postProcess: false,
-    priority: 7
-  }, {
-    category: 'exterior',
-    image_code: 'ext_f_right',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_f_right_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_f_right',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_fandrseats',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_parkassistant',
-    mandatory: false,
-    postProcess: false,
-    priority: 8
-  }, {
-    category: 'interior',
-    image_code: 'int_f_driverdashboard',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_auxiliaryheating',
-    mandatory: false,
-    postProcess: false,
-    priority: 9
-  }, {
-    category: 'interior',
-    image_code: 'int_f_doordriverside',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_startstop',
-    mandatory: false,
-    postProcess: false,
-    priority: 10
-  }, {
-    category: 'interior',
-    image_code: 'int_f_stickshift',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_trafficsignrec',
-    mandatory: false,
-    postProcess: false,
-    priority: 11
-  }, {
-    category: 'interior',
-    image_code: 'int_b_trunk',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_seatheating',
-    mandatory: false,
-    postProcess: false,
-    priority: 12
-  }, {
-    category: 'interior',
-    image_code: 'int_t_sunroof',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_cruisecontrol',
-    mandatory: false,
-    postProcess: false,
-    priority: 13
-  }, {
-    category: 'interior',
-    image_code: 'int_t_panorama_sunroof',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_climatization',
-    mandatory: false,
-    postProcess: false,
-    priority: 14
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_lightsensor',
-    mandatory: false,
-    postProcess: false,
-    priority: 15
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_ledlights',
-    mandatory: false,
-    postProcess: false,
-    priority: 16
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_laneassistant',
-    mandatory: false,
-    postProcess: false,
-    priority: 17
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_nightassistant',
-    mandatory: false,
-    postProcess: false,
-    priority: 18
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_rainsensor',
-    mandatory: false,
-    postProcess: false,
-    priority: 19
-  }]
-}, {
-  parentId: null,
-  parentOdooProductId: null,
-  id: 2,
-  type: 'premium',
-  title: 'Premium set',
-  odooProductId: '456',
-  forAll: false,
-  imagePackageConfigs: [{
-    category: 'exterior',
-    image_code: 'ext_f_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_f_main_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_f_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'ext_feat_engine',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_f_ipanel3',
-    mandatory: true,
-    postProcess: true,
-    priority: 1
-  }, {
-    category: 'custom_highlight',
-    image_code: 'gen_feature',
-    mandatory: false,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior',
-    image_code: 'ext_f_left',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_f_left_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_f_left',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_ipanel1',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_f_ipanel4',
-    mandatory: true,
-    postProcess: true,
-    priority: 2
-  }, {
-    category: 'exterior',
-    image_code: 'ext_l_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_l_main_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_l_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_ipanel2',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_rims',
-    mandatory: true,
-    postProcess: true,
-    priority: 3
-  }, {
-    category: 'exterior',
-    image_code: 'ext_b_left',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_b_left_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_b_left',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_ipanel5',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_bluetooth',
-    mandatory: true,
-    postProcess: true,
-    priority: 4
-  }, {
-    category: 'exterior',
-    image_code: 'ext_b_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_b_main_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_b_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_driverseats',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_handsfree',
-    mandatory: true,
-    postProcess: true,
-    priority: 5
-  }, {
-    category: 'exterior',
-    image_code: 'ext_b_right',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_b_right_opened',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_b_right',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_assistantseats',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_headupdisplay',
-    mandatory: true,
-    postProcess: true,
-    priority: 6
-  }, {
-    category: 'exterior',
-    image_code: 'ext_r_main',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_r_main_opened',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_r_main',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_b_rearseats',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_breakassistant',
-    mandatory: false,
-    postProcess: false,
-    priority: 7
-  }, {
-    category: 'exterior',
-    image_code: 'ext_f_right',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_f_right_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_f_right',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_fandrseats',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_parkassistant',
-    mandatory: false,
-    postProcess: false,
-    priority: 8
-  }, {
-    category: 'interior',
-    image_code: 'int_f_driverdashboard',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_auxiliaryheating',
-    mandatory: false,
-    postProcess: false,
-    priority: 9
-  }, {
-    category: 'interior',
-    image_code: 'int_f_doordriverside',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_startstop',
-    mandatory: false,
-    postProcess: false,
-    priority: 10
-  }, {
-    category: 'interior',
-    image_code: 'int_f_stickshift',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_trafficsignrec',
-    mandatory: false,
-    postProcess: false,
-    priority: 11
-  }, {
-    category: 'interior',
-    image_code: 'int_b_trunk',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_seatheating',
-    mandatory: false,
-    postProcess: false,
-    priority: 12
-  }, {
-    category: 'interior',
-    image_code: 'int_t_sunroof',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_cruisecontrol',
-    mandatory: false,
-    postProcess: false,
-    priority: 13
-  }, {
-    category: 'interior',
-    image_code: 'int_t_panorama_sunroof',
-    mandatory: false,
-    postProcess: false,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_climatization',
-    mandatory: false,
-    postProcess: false,
-    priority: 14
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_lightsensor',
-    mandatory: false,
-    postProcess: false,
-    priority: 15
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_ledlights',
-    mandatory: false,
-    postProcess: false,
-    priority: 16
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_laneassistant',
-    mandatory: false,
-    postProcess: false,
-    priority: 17
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_nightassistant',
-    mandatory: false,
-    postProcess: false,
-    priority: 18
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_rainsensor',
-    mandatory: false,
-    postProcess: false,
-    priority: 19
-  }]
-}, {
-  parentId: null,
-  parentOdooProductId: null,
-  id: 3,
-  type: 'auto_de_premium',
-  title: 'Auto.de premium',
-  odooProductId: '77788',
-  forAll: false,
-  imagePackageConfigs: [{
-    category: 'exterior',
-    image_code: 'ext_f_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_f_main_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_f_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'custom_highlight',
-    image_code: 'gen_feature',
-    mandatory: false,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'ext_feat_engine',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_f_ipanel3',
-    mandatory: true,
-    postProcess: true,
-    priority: 1
-  }, {
-    category: 'exterior',
-    image_code: 'ext_f_left',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_f_left_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_f_left',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_ipanel1',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_f_ipanel4',
-    mandatory: true,
-    postProcess: true,
-    priority: 2
-  }, {
-    category: 'exterior',
-    image_code: 'ext_l_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_l_main_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_l_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_ipanel2',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_rims',
-    mandatory: true,
-    postProcess: true,
-    priority: 3
-  }, {
-    category: 'exterior',
-    image_code: 'ext_b_left',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_b_left_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_b_left',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_ipanel5',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_bluetooth',
-    mandatory: true,
-    postProcess: true,
-    priority: 4
-  }, {
-    category: 'exterior',
-    image_code: 'ext_b_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_b_main_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_b_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_driverseats',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_handsfree',
-    mandatory: true,
-    postProcess: true,
-    priority: 5
-  }, {
-    category: 'exterior',
-    image_code: 'ext_b_right',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_b_right_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_b_right',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_assistantseats',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_headupdisplay',
-    mandatory: true,
-    postProcess: true,
-    priority: 6
-  }, {
-    category: 'exterior',
-    image_code: 'ext_r_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_r_main_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_r_main',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_b_rearseats',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_breakassistant',
-    mandatory: true,
-    postProcess: true,
-    priority: 7
-  }, {
-    category: 'exterior',
-    image_code: 'ext_f_right',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'exterior_opened',
-    image_code: 'ext_f_right_opened',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'convertible',
-    image_code: 'conext_f_right',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'interior',
-    image_code: 'int_f_fandrseats',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_parkassistant',
-    mandatory: true,
-    postProcess: true,
-    priority: 8
-  }, {
-    category: 'interior',
-    image_code: 'int_f_driverdashboard',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_auxiliaryheating',
-    mandatory: true,
-    postProcess: true,
-    priority: 9
-  }, {
-    category: 'interior',
-    image_code: 'int_f_doordriverside',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_startstop',
-    mandatory: true,
-    postProcess: true,
-    priority: 10
-  }, {
-    category: 'interior',
-    image_code: 'int_f_stickshift',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_trafficsignrec',
-    mandatory: true,
-    postProcess: true,
-    priority: 11
-  }, {
-    category: 'interior',
-    image_code: 'int_b_trunk',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_seatheating',
-    mandatory: true,
-    postProcess: true,
-    priority: 12
-  }, {
-    category: 'interior',
-    image_code: 'int_t_sunroof',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_cruisecontrol',
-    mandatory: true,
-    postProcess: true,
-    priority: 13
-  }, {
-    category: 'interior',
-    image_code: 'int_t_panorama_sunroof',
-    mandatory: true,
-    postProcess: true,
-    priority: null
-  }, {
-    category: 'highlight',
-    image_code: 'int_feat_climatization',
-    mandatory: true,
-    postProcess: true,
-    priority: 14
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_lightsensor',
-    mandatory: true,
-    postProcess: true,
-    priority: 15
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_ledlights',
-    mandatory: true,
-    postProcess: true,
-    priority: 16
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_laneassistant',
-    mandatory: true,
-    postProcess: true,
-    priority: 17
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_nightassistant',
-    mandatory: true,
-    postProcess: true,
-    priority: 18
-  }, {
-    category: 'highlight',
-    image_code: 'ext_feat_rainsensor',
-    mandatory: true,
-    postProcess: true,
-    priority: 19
-  }]
-}];
-
-const getImageCounts = ({ imagePackageConfigs }) => {
-  let mandatoryCount = 0;
-  let postProcessCount = 0;
-
-  imagePackageConfigs.forEach((config) => {
-    if (config.mandatory) mandatoryCount = mandatoryCount + 1;
-    if (config.postProcess) postProcessCount = postProcessCount + 1;
-  });
-
-  return {
-    mandatoryCount,
-    postProcessCount
-  };
-};
-
-const countsByCustomImagePackages = new WeakMap();
-const countsByParentImagePackages = new WeakMap(parentImagePackages.map((imagePackage) => {
-  return [
-    imagePackage,
-    getImageCounts(imagePackage)
-  ];
-}));
-
-const imageCodesByCategories = new Map();
-parentImagePackages.forEach(({ imagePackageConfigs }) => {
-  imagePackageConfigs.forEach(({ category, image_code }) => {
-    if (!imageCodesByCategories.has(category)) {
-      imageCodesByCategories.set(category, new Set());
-    }
-
-    imageCodesByCategories.get(category).add(image_code);
-  });
-});
-
-const disabledImages = [{
-  imagePackageType: 'auto_de_premium',
-  mandatory: true,
-  postProcess: true
-}, {
-  imageCode: 'ext_f_right',
-  mandatory: true,
-  postProcess: true
-}];
-
-const PricePlanStory = withNamespaces('translation')(({t}) => (
-  <div style={{width: 1024, background: 'white', padding: 20}}>
-    <Row>
-      {parentImagePackages.map((imagePackage, index) => (
-        <Col md={4} key={index}>
-          <PricePlan t={t} imagePackage={imagePackage} imageCounts={getImageCounts(imagePackage)} price={0}/>
-        </Col>
-      ))}
-    </Row>
-  </div>
-));
-
-const OptionsTableStory = withNamespaces('translation')(({t}) => (
-  <div style={{width: 1024, background: 'white', padding: 20}}>
-    <OptionsTable t={t} parentImagePackages={parentImagePackages} imageCodesByCategories={imageCodesByCategories} onShowImages={action('show images')}/>
-  </div>
-));
-
-const EditableOptionsTableStory = withNamespaces('translation')(({t}) => {
-  const props = {
-    t,
-    disabledImages,
-    imageCodesByCategories,
-    countsByParentImagePackages,
-    countsByCustomImagePackages,
-    parentImagePackages,
-    customImagePackages: [],
-    onShowImage: action('show image'),
-    onChangeConfig: action('change config')
-  };
-
-  return (
-    <div style={{width: 1024, background: 'white', padding: 20}}>
-      <EditableOptionsTable {...props}/>
-    </div>
-  );
-});
-
-storiesOf('PricePlan', module).add('default', () => <PricePlanStory/>);
-storiesOf('OptionsTable', module).add('default', () => <OptionsTableStory/>);
-storiesOf('EditableOptionsTable', module).add('default', () => <EditableOptionsTableStory/>);
+import React from 'react';
+import i18next from 'i18next';
+import {withNamespaces} from 'react-i18next';
+import {Col, Row} from 'react-grid-system';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+
+import {PricePlan, OptionsTable, EditableOptionsTable} from './index';
+
+i18next.addResourceBundle('de', 'translation', {
+  optionsTable: {
+    icon: 'Vorchau',
+    category: 'Bilderserie',
+    mandatory: 'Bilder',
+    postProcess: 'davon optimiert',
+    counts: 'Bilderauswahl | davon freigestellt',
+    category_exterior: 'Exterior',
+    category_exterior_opened: 'Exterior opened',
+    category_convertible: 'Convertible',
+    category_interior: 'Interior',
+    category_highlight: 'Highlight',
+    category_custom_highlight: 'Custom',
+    packages_basic: 'BASIC',
+    packages_premium: 'BUSINESS',
+    packages_auto_de_premium: 'auto.de PREMIUM'
+  },
+  pricePlan: {
+    title_basic: 'Basic-Paket',
+    title_premium: 'Business-Paket',
+    title_auto_de_premium: 'auto.de Premium-Paket',
+    name_basic: 'Einsteiger Paket',
+    name_premium: 'Dealer Paket',
+    name_auto_de_premium: 'Super-Dealer Paket',
+    mandatoryCount: '{{count}} Bilder',
+    postProcessCount: '{{count}} freigestellte Bilder',
+    price: '{{price}} € pro Fahrzeug'
+  },
+  editableTable: {
+    choose: 'Bild auswählen',
+    release: 'Bild freistellen',
+    packages_basic: 'BASIC',
+    packages_premium: 'BUSINESS',
+    packages_auto_de_premium: 'auto.de PREMIUM',
+    counts: '{{selected}}/{{possible}}',
+    counts_auto_de_premium: 'ALLE',
+    category_exterior: 'Exterior ({{count}})',
+    category_exterior_opened: 'Exterior opened ({{count}})',
+    category_convertible: 'Convertible ({{count}})',
+    category_interior: 'Interior ({{count}})',
+    category_highlight: 'Highlight ({{count}})',
+    category_custom_highlight: 'Custom ({{count}})'
+  }
+});
+
+const parentImagePackages = [{
+  parentId: null,
+  parentOdooProductId: null,
+  id: 1,
+  type: 'basic',
+  title: 'Basic set',
+  odooProductId: '1231',
+  forAll: false,
+  imagePackageConfigs: [{
+    category: 'exterior',
+    image_code: 'ext_f_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_f_main_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_f_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'ext_feat_engine',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_f_ipanel3',
+    mandatory: true,
+    postProcess: true,
+    priority: 1
+  }, {
+    category: 'custom_highlight',
+    image_code: 'gen_feature',
+    mandatory: false,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior',
+    image_code: 'ext_f_left',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_f_left_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_f_left',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_ipanel1',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_f_ipanel4',
+    mandatory: true,
+    postProcess: true,
+    priority: 2
+  }, {
+    category: 'exterior',
+    image_code: 'ext_l_main',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_l_main_opened',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_l_main',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_ipanel2',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_rims',
+    mandatory: true,
+    postProcess: true,
+    priority: 3
+  }, {
+    category: 'exterior',
+    image_code: 'ext_b_left',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_b_left_opened',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_b_left',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_ipanel5',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_bluetooth',
+    mandatory: false,
+    postProcess: false,
+    priority: 4
+  }, {
+    category: 'exterior',
+    image_code: 'ext_b_main',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_b_main_opened',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_b_main',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_driverseats',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_handsfree',
+    mandatory: false,
+    postProcess: false,
+    priority: 5
+  }, {
+    category: 'exterior',
+    image_code: 'ext_b_right',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_b_right_opened',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_b_right',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_assistantseats',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_headupdisplay',
+    mandatory: false,
+    postProcess: false,
+    priority: 6
+  }, {
+    category: 'exterior',
+    image_code: 'ext_r_main',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_r_main_opened',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_r_main',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_b_rearseats',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_breakassistant',
+    mandatory: false,
+    postProcess: false,
+    priority: 7
+  }, {
+    category: 'exterior',
+    image_code: 'ext_f_right',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_f_right_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_f_right',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_fandrseats',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_parkassistant',
+    mandatory: false,
+    postProcess: false,
+    priority: 8
+  }, {
+    category: 'interior',
+    image_code: 'int_f_driverdashboard',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_auxiliaryheating',
+    mandatory: false,
+    postProcess: false,
+    priority: 9
+  }, {
+    category: 'interior',
+    image_code: 'int_f_doordriverside',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_startstop',
+    mandatory: false,
+    postProcess: false,
+    priority: 10
+  }, {
+    category: 'interior',
+    image_code: 'int_f_stickshift',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_trafficsignrec',
+    mandatory: false,
+    postProcess: false,
+    priority: 11
+  }, {
+    category: 'interior',
+    image_code: 'int_b_trunk',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_seatheating',
+    mandatory: false,
+    postProcess: false,
+    priority: 12
+  }, {
+    category: 'interior',
+    image_code: 'int_t_sunroof',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_cruisecontrol',
+    mandatory: false,
+    postProcess: false,
+    priority: 13
+  }, {
+    category: 'interior',
+    image_code: 'int_t_panorama_sunroof',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_climatization',
+    mandatory: false,
+    postProcess: false,
+    priority: 14
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_lightsensor',
+    mandatory: false,
+    postProcess: false,
+    priority: 15
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_ledlights',
+    mandatory: false,
+    postProcess: false,
+    priority: 16
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_laneassistant',
+    mandatory: false,
+    postProcess: false,
+    priority: 17
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_nightassistant',
+    mandatory: false,
+    postProcess: false,
+    priority: 18
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_rainsensor',
+    mandatory: false,
+    postProcess: false,
+    priority: 19
+  }]
+}, {
+  parentId: null,
+  parentOdooProductId: null,
+  id: 2,
+  type: 'premium',
+  title: 'Premium set',
+  odooProductId: '456',
+  forAll: false,
+  imagePackageConfigs: [{
+    category: 'exterior',
+    image_code: 'ext_f_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_f_main_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_f_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'ext_feat_engine',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_f_ipanel3',
+    mandatory: true,
+    postProcess: true,
+    priority: 1
+  }, {
+    category: 'custom_highlight',
+    image_code: 'gen_feature',
+    mandatory: false,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior',
+    image_code: 'ext_f_left',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_f_left_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_f_left',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_ipanel1',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_f_ipanel4',
+    mandatory: true,
+    postProcess: true,
+    priority: 2
+  }, {
+    category: 'exterior',
+    image_code: 'ext_l_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_l_main_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_l_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_ipanel2',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_rims',
+    mandatory: true,
+    postProcess: true,
+    priority: 3
+  }, {
+    category: 'exterior',
+    image_code: 'ext_b_left',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_b_left_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_b_left',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_ipanel5',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_bluetooth',
+    mandatory: true,
+    postProcess: true,
+    priority: 4
+  }, {
+    category: 'exterior',
+    image_code: 'ext_b_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_b_main_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_b_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_driverseats',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_handsfree',
+    mandatory: true,
+    postProcess: true,
+    priority: 5
+  }, {
+    category: 'exterior',
+    image_code: 'ext_b_right',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_b_right_opened',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_b_right',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_assistantseats',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_headupdisplay',
+    mandatory: true,
+    postProcess: true,
+    priority: 6
+  }, {
+    category: 'exterior',
+    image_code: 'ext_r_main',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_r_main_opened',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_r_main',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_b_rearseats',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_breakassistant',
+    mandatory: false,
+    postProcess: false,
+    priority: 7
+  }, {
+    category: 'exterior',
+    image_code: 'ext_f_right',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_f_right_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_f_right',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_fandrseats',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_parkassistant',
+    mandatory: false,
+    postProcess: false,
+    priority: 8
+  }, {
+    category: 'interior',
+    image_code: 'int_f_driverdashboard',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_auxiliaryheating',
+    mandatory: false,
+    postProcess: false,
+    priority: 9
+  }, {
+    category: 'interior',
+    image_code: 'int_f_doordriverside',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_startstop',
+    mandatory: false,
+    postProcess: false,
+    priority: 10
+  }, {
+    category: 'interior',
+    image_code: 'int_f_stickshift',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_trafficsignrec',
+    mandatory: false,
+    postProcess: false,
+    priority: 11
+  }, {
+    category: 'interior',
+    image_code: 'int_b_trunk',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_seatheating',
+    mandatory: false,
+    postProcess: false,
+    priority: 12
+  }, {
+    category: 'interior',
+    image_code: 'int_t_sunroof',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_cruisecontrol',
+    mandatory: false,
+    postProcess: false,
+    priority: 13
+  }, {
+    category: 'interior',
+    image_code: 'int_t_panorama_sunroof',
+    mandatory: false,
+    postProcess: false,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_climatization',
+    mandatory: false,
+    postProcess: false,
+    priority: 14
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_lightsensor',
+    mandatory: false,
+    postProcess: false,
+    priority: 15
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_ledlights',
+    mandatory: false,
+    postProcess: false,
+    priority: 16
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_laneassistant',
+    mandatory: false,
+    postProcess: false,
+    priority: 17
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_nightassistant',
+    mandatory: false,
+    postProcess: false,
+    priority: 18
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_rainsensor',
+    mandatory: false,
+    postProcess: false,
+    priority: 19
+  }]
+}, {
+  parentId: null,
+  parentOdooProductId: null,
+  id: 3,
+  type: 'auto_de_premium',
+  title: 'Auto.de premium',
+  odooProductId: '77788',
+  forAll: false,
+  imagePackageConfigs: [{
+    category: 'exterior',
+    image_code: 'ext_f_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_f_main_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_f_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'custom_highlight',
+    image_code: 'gen_feature',
+    mandatory: false,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'ext_feat_engine',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_f_ipanel3',
+    mandatory: true,
+    postProcess: true,
+    priority: 1
+  }, {
+    category: 'exterior',
+    image_code: 'ext_f_left',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_f_left_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_f_left',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_ipanel1',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_f_ipanel4',
+    mandatory: true,
+    postProcess: true,
+    priority: 2
+  }, {
+    category: 'exterior',
+    image_code: 'ext_l_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_l_main_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_l_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_ipanel2',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_rims',
+    mandatory: true,
+    postProcess: true,
+    priority: 3
+  }, {
+    category: 'exterior',
+    image_code: 'ext_b_left',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_b_left_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_b_left',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_ipanel5',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_bluetooth',
+    mandatory: true,
+    postProcess: true,
+    priority: 4
+  }, {
+    category: 'exterior',
+    image_code: 'ext_b_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_b_main_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_b_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_driverseats',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_handsfree',
+    mandatory: true,
+    postProcess: true,
+    priority: 5
+  }, {
+    category: 'exterior',
+    image_code: 'ext_b_right',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_b_right_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_b_right',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_assistantseats',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_headupdisplay',
+    mandatory: true,
+    postProcess: true,
+    priority: 6
+  }, {
+    category: 'exterior',
+    image_code: 'ext_r_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_r_main_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_r_main',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_b_rearseats',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_breakassistant',
+    mandatory: true,
+    postProcess: true,
+    priority: 7
+  }, {
+    category: 'exterior',
+    image_code: 'ext_f_right',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'exterior_opened',
+    image_code: 'ext_f_right_opened',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'convertible',
+    image_code: 'conext_f_right',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'interior',
+    image_code: 'int_f_fandrseats',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_parkassistant',
+    mandatory: true,
+    postProcess: true,
+    priority: 8
+  }, {
+    category: 'interior',
+    image_code: 'int_f_driverdashboard',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_auxiliaryheating',
+    mandatory: true,
+    postProcess: true,
+    priority: 9
+  }, {
+    category: 'interior',
+    image_code: 'int_f_doordriverside',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_startstop',
+    mandatory: true,
+    postProcess: true,
+    priority: 10
+  }, {
+    category: 'interior',
+    image_code: 'int_f_stickshift',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_trafficsignrec',
+    mandatory: true,
+    postProcess: true,
+    priority: 11
+  }, {
+    category: 'interior',
+    image_code: 'int_b_trunk',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_seatheating',
+    mandatory: true,
+    postProcess: true,
+    priority: 12
+  }, {
+    category: 'interior',
+    image_code: 'int_t_sunroof',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_cruisecontrol',
+    mandatory: true,
+    postProcess: true,
+    priority: 13
+  }, {
+    category: 'interior',
+    image_code: 'int_t_panorama_sunroof',
+    mandatory: true,
+    postProcess: true,
+    priority: null
+  }, {
+    category: 'highlight',
+    image_code: 'int_feat_climatization',
+    mandatory: true,
+    postProcess: true,
+    priority: 14
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_lightsensor',
+    mandatory: true,
+    postProcess: true,
+    priority: 15
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_ledlights',
+    mandatory: true,
+    postProcess: true,
+    priority: 16
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_laneassistant',
+    mandatory: true,
+    postProcess: true,
+    priority: 17
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_nightassistant',
+    mandatory: true,
+    postProcess: true,
+    priority: 18
+  }, {
+    category: 'highlight',
+    image_code: 'ext_feat_rainsensor',
+    mandatory: true,
+    postProcess: true,
+    priority: 19
+  }]
+}];
+
+const getImageCounts = ({ imagePackageConfigs }) => {
+  let mandatoryCount = 0;
+  let postProcessCount = 0;
+
+  imagePackageConfigs.forEach((config) => {
+    if (config.mandatory) mandatoryCount = mandatoryCount + 1;
+    if (config.postProcess) postProcessCount = postProcessCount + 1;
+  });
+
+  return {
+    mandatoryCount,
+    postProcessCount
+  };
+};
+
+const countsByCustomImagePackages = new WeakMap();
+const countsByParentImagePackages = new WeakMap(parentImagePackages.map((imagePackage) => {
+  return [
+    imagePackage,
+    getImageCounts(imagePackage)
+  ];
+}));
+
+const imageCodesByCategories = new Map();
+parentImagePackages.forEach(({ imagePackageConfigs }) => {
+  imagePackageConfigs.forEach(({ category, image_code }) => {
+    if (!imageCodesByCategories.has(category)) {
+      imageCodesByCategories.set(category, new Set());
+    }
+
+    imageCodesByCategories.get(category).add(image_code);
+  });
+});
+
+const disabledImages = [{
+  imagePackageType: 'auto_de_premium',
+  mandatory: true,
+  postProcess: true
+}, {
+  imageCode: 'ext_f_right',
+  mandatory: true,
+  postProcess: true
+}];
+
+const PricePlanStory = withNamespaces('translation')(({t}) => (
+  <div style={{width: 1024, background: 'white', padding: 20}}>
+    <Row>
+      {parentImagePackages.map((imagePackage, index) => (
+        <Col md={4} key={index}>
+          <PricePlan t={t} imagePackage={imagePackage} imageCounts={getImageCounts(imagePackage)} price={0}/>
+        </Col>
+      ))}
+    </Row>
+  </div>
+));
+
+const OptionsTableStory = withNamespaces('translation')(({t}) => (
+  <div style={{width: 1024, background: 'white', padding: 20}}>
+    <OptionsTable t={t} parentImagePackages={parentImagePackages} imageCodesByCategories={imageCodesByCategories} onShowImages={action('show images')}/>
+  </div>
+));
+
+const EditableOptionsTableStory = withNamespaces('translation')(({t}) => {
+  const props = {
+    t,
+    disabledImages,
+    imageCodesByCategories,
+    countsByParentImagePackages,
+    countsByCustomImagePackages,
+    parentImagePackages,
+    customImagePackages: [],
+    onShowImage: action('show image'),
+    onChangeConfig: action('change config')
+  };
+
+  return (
+    <div style={{width: 1024, background: 'white', padding: 20}}>
+      <EditableOptionsTable {...props}/>
+    </div>
+  );
+});
+
+storiesOf('PricePlan', module).add('default', () => <PricePlanStory/>);
+storiesOf('OptionsTable', module).add('default', () => <OptionsTableStory/>);
+storiesOf('EditableOptionsTable', module).add('default', () => <EditableOptionsTableStory/>);