Feat / Refactor perils and add tab navigation

package.json

@@ -32,6 +32,7 @@
     "dotenv": "^6.1.0",
     "emotion": "^10.0.23",
     "emotion-server": "^10.0.17",
+    "framer-motion": "4.1.17",
     "ioredis": "^4.2.0",
     "ip2location-nodejs": "^8.3.0",
     "js-cookie": "^2.2.0",
@@ -64,6 +65,7 @@
     "react-visibility-sensor": "^4.1.3",
     "sitemap": "^2.1.0",
     "source-map-support": "^0.5.9",
+    "tslib": "^2.1.0",
     "typescript": "^4.2.3",
     "typescript-logging": "^0.6.3",
     "uuid": "^8.2.0",

src/blocks/PerilsBlock/PerilsBlock.tsx

@@ -1,69 +1,63 @@
 import styled from '@emotion/styled'
-import React, { useState } from 'react'
+import React, { useMemo } from 'react'
 import { useLocale } from 'context/LocaleContext'
 import { BaseBlockProps } from 'blocks/BaseBlockProps'
 import {
   ContentWrapper as OriginalContentWrapper,
   SectionWrapper,
 } from 'components/blockHelpers'
-import { Perils } from 'components/Perils'
-import { TypeOfContract } from 'components/Perils/types'
-import { Select } from 'components/Select/Select'
+import {
+  Peril,
+  PerilsCollection,
+  TypeOfContract,
+} from 'components/Perils/types'
 import { GlobalStoryContainer } from 'storyblok/StoryContainer'
+import { Perils } from 'components/Perils'
+import { usePerils } from 'components/Perils/data/usePerils'
 
-export interface ContractOption {
+export type ContractOption = {
   label: string
   value: TypeOfContract
 }
 
-interface PerilsBlockProps extends BaseBlockProps {
+export type PerilsBlockProps = BaseBlockProps & {
   insurance_types: ContractOption[]
 }
 
 const ContentWrapper = styled(OriginalContentWrapper)`
   max-width: calc(784px + 2rem);
 `
 
-const SelectInsurance = styled(Select)`
-  max-width: 16rem;
-  margin: 0 auto 5rem;
-`
-
 export const PerilsBlock: React.FC<PerilsBlockProps> = ({
-  _uid,
   color,
   index,
   size,
   insurance_types,
 }) => {
   const { currentLocale } = useLocale()
-  const [currentInsurance, setCurrentInsurance] = useState<TypeOfContract>(
-    insurance_types[0].value,
+  const insuranceTypes = useMemo(
+    () => insurance_types.map((insuranceType) => insuranceType.value),
+    [insurance_types],
   )
 
-  const onChangeHandler = (option: any) => {
-    setCurrentInsurance(option.value)
-  }
+  const perils = usePerils(insuranceTypes, currentLocale.iso)
+  const perilsCollections = perils.map(
+    (perilItems: Peril[], i: number): PerilsCollection => ({
+      id: insurance_types[i].value,
+      label: insurance_types[i].label,
+      items: perilItems,
+    }),
+  )
 
   return (
     <GlobalStoryContainer>
       {({ globalStory }) => (
         <SectionWrapper colorComponent={color} size={size} brandPivot>
           <ContentWrapper brandPivot index={index}>
-            {insurance_types.length > 1 && (
-              <SelectInsurance
-                instanceId={_uid}
-                defaultValue={insurance_types[0]}
-                options={insurance_types}
-                color={color?.color}
-                onChange={onChangeHandler}
-              />
-            )}
-            {currentInsurance && (
+            {perilsCollections.length > 0 && (
               <Perils
                 color={color?.color}
-                insuranceType={currentInsurance}
-                localeIsoCode={currentLocale.iso}
+                perilsCollections={perilsCollections}
                 story={globalStory}
               />
             )}

src/components/Perils/PerilCollection/PerilCollection.tsx

@@ -1,63 +1,37 @@
-import styled from '@emotion/styled'
-import React from 'react'
-import { LAPTOP_BP_UP, TABLET_BP_UP } from 'components/blockHelpers'
-import { PerilItem } from 'components/Perils/PerilItem/PerilItem'
-import { minimalColorComponentColors } from 'src/blocks/BaseBlockProps'
-import { Peril } from '../types'
+import React, { useState } from 'react'
+import { minimalColorComponentColors } from 'blocks/BaseBlockProps'
+import { GlobalStory } from 'storyblok/StoryContainer'
+import { PerilList } from 'components/Perils/PerilList/PerilList'
+import { PerilModal } from 'components/Perils/PerilModal/PerilModal'
+import { Peril } from 'components/Perils/types'
 
-interface Props {
+type Props = {
   color: minimalColorComponentColors
-  perils: ReadonlyArray<Peril>
-  setCurrentPeril: (index: number) => void
-  setIsShowingPeril: (isShowingPeril: boolean) => void
+  perils: Peril[]
+  story: GlobalStory
 }
 
-const Wrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-left: -0.5rem;
-
-  ${TABLET_BP_UP} {
-    margin-left: -1rem;
-  }
-
-  & > * {
-    width: calc(50% - 0.5rem);
-    margin-left: 0.5rem;
-    margin-bottom: 0.5rem;
-
-    ${TABLET_BP_UP} {
-      width: calc(100% / 3 - 1rem);
-      margin-left: 1rem;
-      margin-bottom: 1rem;
-    }
-
-    ${LAPTOP_BP_UP} {
-      width: calc(25% - 1rem);
-    }
-  }
-`
-
-export const PerilCollection: React.FC<Props> = ({
-  color,
-  perils,
-  setCurrentPeril,
-  setIsShowingPeril,
-}) => (
-  <Wrapper>
-    {perils.map((peril, perilIndex) => (
-      <PerilItem
-        key={peril.title?.toString() || 'unknown'}
+export const PerilCollection: React.FC<Props> = ({ perils, story, color }) => {
+  const [isShowingPeril, setIsShowingPeril] = useState(false)
+  const [currentPeril, setCurrentPeril] = useState(0)
+  return (
+    <>
+      <PerilList
         color={color}
-        title={peril.title}
-        icon={peril.icon}
-        onClick={() => {
-          setCurrentPeril(perilIndex)
-          setIsShowingPeril(true)
-        }}
+        perils={perils}
+        setCurrentPeril={setCurrentPeril}
+        setIsShowingPeril={setIsShowingPeril}
       />
-    ))}
-  </Wrapper>
-)
+      {perils.length > 0 && (
+        <PerilModal
+          perils={perils}
+          currentPerilIndex={currentPeril}
+          setCurrentPeril={setCurrentPeril}
+          isVisible={isShowingPeril}
+          story={story}
+          onClose={() => setIsShowingPeril(false)}
+        />
+      )}
+    </>
+  )
+}

src/components/Perils/PerilItem/PerilItem.stories.tsx

@@ -14,14 +14,14 @@ export default {
   },
 }
 
-const perilProps = brfPerils[1]
+const peril = brfPerils[0].items[0]
 
 export const Default = () => (
   <div style={{ maxWidth: '290px' }}>
     <PerilItem
-      title={perilProps.title}
+      title={peril.title}
       color="standard"
-      icon={perilProps.icon}
+      icon={peril.icon}
       onClick={action('click')}
     />
   </div>

src/components/Perils/PerilCollection/PerilCollection.stories.tsx → src/components/Perils/PerilList/PerilList.stories.tsx

@@ -1,11 +1,11 @@
 import { withKnobs } from '@storybook/addon-knobs'
 import React from 'react'
 import { brfPerils } from '../perilMockData/brf'
-import { PerilCollection } from './PerilCollection'
+import { PerilList } from './PerilList'
 
 export default {
   title: 'Components/Perils/PerilCollection',
-  component: PerilCollection,
+  component: PerilList,
   decorators: [withKnobs],
   parameters: {
     paddings: [
@@ -16,9 +16,9 @@ export default {
 }
 
 export const Default = () => (
-  <PerilCollection
+  <PerilList
     color="standard"
-    perils={brfPerils}
+    perils={brfPerils[0].items}
     setCurrentPeril={() => 1}
     setIsShowingPeril={() => true}
   />

src/components/Perils/PerilList/PerilList.tsx

@@ -0,0 +1,63 @@
+import styled from '@emotion/styled'
+import React from 'react'
+import { LAPTOP_BP_UP, TABLET_BP_UP } from 'components/blockHelpers'
+import { PerilItem } from 'components/Perils/PerilItem/PerilItem'
+import { minimalColorComponentColors } from 'blocks/BaseBlockProps'
+import { Peril } from '../types'
+
+type Props = {
+  color: minimalColorComponentColors
+  perils: ReadonlyArray<Peril>
+  setCurrentPeril: (index: number) => void
+  setIsShowingPeril: (isShowingPeril: boolean) => void
+}
+
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-left: -0.5rem;
+
+  ${TABLET_BP_UP} {
+    margin-left: -1rem;
+  }
+
+  & > * {
+    width: calc(50% - 0.5rem);
+    margin-left: 0.5rem;
+    margin-bottom: 0.5rem;
+
+    ${TABLET_BP_UP} {
+      width: calc(100% / 3 - 1rem);
+      margin-left: 1rem;
+      margin-bottom: 1rem;
+    }
+
+    ${LAPTOP_BP_UP} {
+      width: calc(25% - 1rem);
+    }
+  }
+`
+
+export const PerilList = ({
+  color,
+  perils,
+  setCurrentPeril,
+  setIsShowingPeril,
+}: Props) => (
+  <Wrapper>
+    {perils.map((peril, perilIndex) => (
+      <PerilItem
+        key={peril.title?.toString() || 'unknown'}
+        color={color}
+        title={peril.title}
+        icon={peril.icon}
+        onClick={() => {
+          setCurrentPeril(perilIndex)
+          setIsShowingPeril(true)
+        }}
+      />
+    ))}
+  </Wrapper>
+)

src/components/Perils/Perils.stories.tsx

@@ -1,46 +1,31 @@
-import { select, withKnobs } from '@storybook/addon-knobs'
+import { withKnobs } from '@storybook/addon-knobs'
 import React from 'react'
 import { globalStoryMock } from 'utils/storybook'
-import { locales } from 'l10n/locales'
-import { fallbackLocale } from 'l10n/l10n-utils'
-import { TypeOfContract } from './types'
-import { Perils } from './'
+import { mockPerils } from './perilMockData/multiplePromises'
+import { brfPerils } from './perilMockData/brf'
+import { Perils } from '.'
 
 export default {
   title: 'Components/Perils/Perils',
   component: Perils,
   decorators: [withKnobs],
   parameters: {
     paddings: [
-      { name: 'Medium', value: '16px', default: true },
-      { name: 'Medium', value: '32px' },
+      { name: 'Medium', value: '16px' },
+      { name: 'Medium', value: '32px', default: true },
     ],
+    layout: 'centered',
   },
 }
 
-const types: TypeOfContract[] = [
-  'SE_HOUSE',
-  'SE_APARTMENT_BRF',
-  'SE_APARTMENT_RENT',
-  'SE_APARTMENT_STUDENT_BRF',
-  'SE_APARTMENT_STUDENT_RENT',
-  'NO_HOME_CONTENT_OWN',
-  'NO_HOME_CONTENT_RENT',
-  'NO_HOME_CONTENT_YOUTH_OWN',
-  'NO_HOME_CONTENT_YOUTH_RENT',
-  'NO_TRAVEL',
-  'NO_TRAVEL_YOUTH',
-  'NO_HOUSE',
-  'DK_HOME_CONTENT',
-]
-
-const localesArr = Object.values(locales)
-const localeIsoCodes = localesArr.map((obj) => obj.iso)
-
 export const Default = () => (
-  <Perils
-    localeIsoCode={select('Language', localeIsoCodes, fallbackLocale.iso)}
-    insuranceType={select('Type of insurance', types, 'SE_HOUSE')}
-    story={globalStoryMock}
-  />
+  <div style={{ maxWidth: '800px', margin: 'auto' }}>
+    <Perils perilsCollections={brfPerils} story={globalStoryMock} />
+  </div>
+)
+
+export const MultiplePromises = () => (
+  <div style={{ maxWidth: '800px', margin: 'auto' }}>
+    <Perils perilsCollections={mockPerils} story={globalStoryMock} />
+  </div>
 )