From 32c3a7149c8d8eb8f816b143aadcddd4f6b30c84 Mon Sep 17 00:00:00 2001
From: Oriol Raventos <o.raventos.89@gmail.com>
Date: Wed, 18 Dec 2024 13:28:59 +0100
Subject: [PATCH] refactor(botonic-react): split in diferents files Header
 component an use typescript

---
 packages/botonic-react/src/webchat/header.jsx | 149 ------------------
 .../src/webchat/header/default-header.tsx     |  75 +++++++++
 .../src/webchat/header/index.tsx              |  37 +++++
 .../src/webchat/header/styles.ts              |  62 ++++++++
 4 files changed, 174 insertions(+), 149 deletions(-)
 delete mode 100644 packages/botonic-react/src/webchat/header.jsx
 create mode 100644 packages/botonic-react/src/webchat/header/default-header.tsx
 create mode 100644 packages/botonic-react/src/webchat/header/index.tsx
 create mode 100644 packages/botonic-react/src/webchat/header/styles.ts

diff --git a/packages/botonic-react/src/webchat/header.jsx b/packages/botonic-react/src/webchat/header.jsx
deleted file mode 100644
index e67ed3c508..0000000000
--- a/packages/botonic-react/src/webchat/header.jsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import React, { forwardRef, useContext } from 'react'
-import styled from 'styled-components'
-
-import { COLORS, ROLES, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
-import { Scale } from '../shared/styles'
-import { resolveImage } from '../util/environment'
-import { ConditionalWrapper } from '../util/react'
-import { BotonicContainerId } from './constants'
-
-const Header = styled.div`
-  display: flex;
-  background: linear-gradient(
-    90deg,
-    ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
-    ${props => props.color} 100%
-  );
-  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
-  z-index: 2;
-  height: inherit;
-`
-
-const ImageContainer = styled.div`
-  padding: 10px;
-  align-items: center;
-`
-
-const Image = styled.img`
-  width: 32px;
-  border-radius: 50%;
-`
-
-const TextContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1 1 auto;
-`
-
-const Title = styled.div`
-  display: flex;
-  font-family: inherit;
-  font-size: 15px;
-  font-weight: bold;
-  color: ${COLORS.SOLID_WHITE};
-`
-
-const Subtitle = styled.div`
-  display: flex;
-  font-family: inherit;
-  font-size: 11px;
-  color: ${COLORS.SOLID_WHITE};
-`
-
-const CloseHeader = styled.div`
-  padding: 0px 16px;
-  cursor: pointer;
-  color: ${COLORS.SOLID_WHITE};
-  font-family: inherit;
-  font-size: 36px;
-`
-
-export const DefaultHeader = props => {
-  const { getThemeProperty } = props
-  const animationsEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
-    true
-  )
-  const headerImage = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.headerImage,
-    getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.brandImage,
-      WEBCHAT.DEFAULTS.LOGO
-    )
-  )
-
-  const headerTitle = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.headerTitle,
-    WEBCHAT.DEFAULTS.TITLE
-  )
-  const headerSubtitle = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle,
-    ''
-  )
-
-  return (
-    <Header
-      role={ROLES.HEADER}
-      color={props.color}
-      style={{ ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle) }}
-    >
-      {headerImage && (
-        <ImageContainer>
-          <Image src={resolveImage(headerImage)} />
-        </ImageContainer>
-      )}
-      <TextContainer ml={headerImage ? '0px' : '16px'}>
-        <Title mb={headerSubtitle ? '6px' : '0px'}>{headerTitle}</Title>
-        <Subtitle>{headerSubtitle}</Subtitle>
-      </TextContainer>
-      <ConditionalWrapper
-        condition={animationsEnabled}
-        wrapper={children => <Scale>{children}</Scale>}
-      >
-        <CloseHeader onClick={props.onCloseClick}>⨯</CloseHeader>
-      </ConditionalWrapper>
-    </Header>
-  )
-}
-
-const StyledWebchatHeader = styled.div`
-  border-radius: 8px 8px 0px 0px;
-  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
-  height: 55px;
-  flex: none;
-`
-
-export const WebchatHeader = forwardRef((props, ref) => {
-  const { webchatState, getThemeProperty } = useContext(WebchatContext)
-
-  const handleCloseWebchat = event => {
-    props.onCloseClick(event.target.value)
-  }
-
-  const CustomHeader = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customHeader)
-  if (CustomHeader) {
-    return (
-      <div id={BotonicContainerId.Header} ref={ref}>
-        <CustomHeader onCloseClick={handleCloseWebchat} />
-      </div>
-    )
-  }
-
-  return (
-    <StyledWebchatHeader id={BotonicContainerId.Header} ref={ref}>
-      <DefaultHeader
-        webchatState={webchatState}
-        getThemeProperty={getThemeProperty}
-        color={getThemeProperty(
-          WEBCHAT.CUSTOM_PROPERTIES.brandColor,
-          COLORS.BOTONIC_BLUE
-        )}
-        onCloseClick={handleCloseWebchat}
-      />
-    </StyledWebchatHeader>
-  )
-})
-
-WebchatHeader.displayName = 'WebchatHeader'
diff --git a/packages/botonic-react/src/webchat/header/default-header.tsx b/packages/botonic-react/src/webchat/header/default-header.tsx
new file mode 100644
index 0000000000..23a9c3d7ba
--- /dev/null
+++ b/packages/botonic-react/src/webchat/header/default-header.tsx
@@ -0,0 +1,75 @@
+import React, { useContext } from 'react'
+
+import { COLORS, ROLES, WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { Scale } from '../../shared/styles'
+import { resolveImage } from '../../util/environment'
+import { ConditionalWrapper } from '../../util/react'
+import {
+  CloseHeader,
+  HeaderContainer,
+  ImageContainer,
+  Subtitle,
+  TextContainer,
+  Title,
+} from './styles'
+
+export const DefaultHeader = () => {
+  const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)
+
+  const animationsEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
+    true
+  )
+
+  const headerImage = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerImage,
+    getThemeProperty(
+      WEBCHAT.CUSTOM_PROPERTIES.brandImage,
+      WEBCHAT.DEFAULTS.LOGO
+    )
+  )
+
+  const headerTitle = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerTitle,
+    WEBCHAT.DEFAULTS.TITLE
+  )
+
+  const headerSubtitle = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle,
+    ''
+  )
+
+  const handleCloseWebchat = () => {
+    toggleWebchat(false)
+  }
+
+  const color = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.brandColor,
+    COLORS.BOTONIC_BLUE
+  )
+
+  return (
+    <HeaderContainer
+      role={ROLES.HEADER}
+      color={color}
+      style={{ ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle) }}
+    >
+      {headerImage && (
+        <ImageContainer>
+          <img src={resolveImage(headerImage)} />
+        </ImageContainer>
+      )}
+      <TextContainer>
+        <Title>{headerTitle}</Title>
+        {headerSubtitle ? <Subtitle>{headerSubtitle}</Subtitle> : null}
+      </TextContainer>
+      <ConditionalWrapper
+        condition={animationsEnabled}
+        wrapper={children => <Scale>{children}</Scale>}
+      >
+        <CloseHeader onClick={handleCloseWebchat}>⨯</CloseHeader>
+      </ConditionalWrapper>
+    </HeaderContainer>
+  )
+}
diff --git a/packages/botonic-react/src/webchat/header/index.tsx b/packages/botonic-react/src/webchat/header/index.tsx
new file mode 100644
index 0000000000..70796a620d
--- /dev/null
+++ b/packages/botonic-react/src/webchat/header/index.tsx
@@ -0,0 +1,37 @@
+import React, { ForwardedRef, forwardRef, useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { BotonicContainerId } from '../constants'
+import { DefaultHeader } from './default-header'
+import { StyledWebchatHeader } from './styles'
+
+export const WebchatHeader = forwardRef(
+  (_, ref: ForwardedRef<HTMLDivElement>) => {
+    const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)
+
+    const handleCloseWebchat = () => {
+      toggleWebchat(false)
+    }
+
+    const CustomHeader = getThemeProperty(
+      WEBCHAT.CUSTOM_PROPERTIES.customHeader
+    )
+
+    if (CustomHeader) {
+      return (
+        <div id={BotonicContainerId.Header} ref={ref}>
+          <CustomHeader onCloseClick={handleCloseWebchat} />
+        </div>
+      )
+    }
+
+    return (
+      <StyledWebchatHeader id={BotonicContainerId.Header} ref={ref}>
+        <DefaultHeader />
+      </StyledWebchatHeader>
+    )
+  }
+)
+
+WebchatHeader.displayName = 'WebchatHeader'
diff --git a/packages/botonic-react/src/webchat/header/styles.ts b/packages/botonic-react/src/webchat/header/styles.ts
new file mode 100644
index 0000000000..9f7101490d
--- /dev/null
+++ b/packages/botonic-react/src/webchat/header/styles.ts
@@ -0,0 +1,62 @@
+import styled from 'styled-components'
+
+import { COLORS, WEBCHAT } from '../../constants'
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  background: linear-gradient(
+    90deg,
+    ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
+    ${props => props.color} 100%
+  );
+  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
+  z-index: 2;
+  height: inherit;
+`
+
+export const ImageContainer = styled.div`
+  padding: 10px;
+  align-items: center;
+
+  img {
+    width: 32px;
+    border-radius: 50%;
+  }
+`
+
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+`
+
+export const Title = styled.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: bold;
+  color: ${COLORS.SOLID_WHITE};
+`
+
+export const Subtitle = styled.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 11px;
+  color: ${COLORS.SOLID_WHITE};
+`
+
+export const CloseHeader = styled.div`
+  padding: 0px 16px;
+  cursor: pointer;
+  color: ${COLORS.SOLID_WHITE};
+  font-family: inherit;
+  font-size: 36px;
+`
+
+export const StyledWebchatHeader = styled.div`
+  border-radius: 8px 8px 0px 0px;
+  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
+  height: 55px;
+  flex: none;
+`