Merge pull request #183 from IQ-tech/feat/add-city-widget

feat: add BRCityWidget

packages/atlas-theme/Widgets/BRCityWidget/hook.js

@@ -0,0 +1,38 @@
+import { useState, useEffect } from "react"
+import stateFormats from "../../constants/state-formats"
+import getCities from "../../services/getCities"
+
+export default function useBRCityWidget({
+  payload,
+  modifyPayloadKeys,
+  stateFieldSlug,
+  stateFormat = "br",
+  slug,
+}) {
+  const [options, setOptions] = useState([])
+  const [isLoading, setIsloading] = useState(false)
+  const provinceValue = payload?.[stateFieldSlug]
+
+  useEffect(_handleStateChange, [provinceValue])
+
+  function _handleStateChange() {
+    const correctStateKey = Object.keys(stateFormats).find(
+      (key) => stateFormats?.[key]?.[stateFormat] === provinceValue
+    )
+    const correctStateNumber = stateFormats?.[correctStateKey]?.uf
+
+    if (correctStateNumber) {
+      setIsloading(true)
+      getCities(correctStateNumber).then((res = []) => {
+        const formatted = res?.map((item) => ({
+          label: item?.nome,
+          value: item?.nome,
+        }))
+        setIsloading(false)
+        setOptions(formatted)
+      })
+    }
+  }
+
+  return { options, isLoading }
+}

packages/atlas-theme/Widgets/BRCityWidget/index.jsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { AutocompleteField } from "iq-blueberry"
+import useBRCityWidget from "./hook"
+import getTooltipConfig from "../../helpers/getTooltipConfig"
+
+export default function BRCityWidget({
+  stateFieldSlug,
+  stateFormat,
+  modifyPayloadKeys,
+  payload,
+  hasError,
+  errorMessage,
+  label,
+  onBlur,
+  onChange,
+  placeholder,
+  slug,
+  value,
+  isOptional,
+  isRequired,
+  meta,
+}) {
+  const { options, isLoading } = useBRCityWidget({
+    stateFieldSlug,
+    stateFormat,
+    modifyPayloadKeys,
+    payload,
+    slug,
+  })
+
+  return (
+    <AutocompleteField
+      required={isRequired}
+      optional={isOptional}
+      invalid={hasError}
+      errorMessage={errorMessage}
+      label={label}
+      onBlur={onBlur}
+      onChange={onChange}
+      placeholder={placeholder}
+      name={`fbt-field-place`}
+      value={value}
+      isLoading={isLoading}
+      suggestionUse="mandatory"
+      tooltipConfig={getTooltipConfig(meta)}
+      options={options}
+    />
+  )
+}

packages/atlas-theme/helpers/getTooltipConfig.js

@@ -0,0 +1,16 @@
+const getTooltipConfig = (fbFieldMetadata) => {
+  const safeFieldMetadata = fbFieldMetadata || {}
+  const tooltipText = safeFieldMetadata["tooltip_text"]
+  const tooltipTitle = safeFieldMetadata["tooltip_title"]
+  const tooltipContainer = safeFieldMetadata["tooltip_container"]
+  return !!tooltipText
+    ? {
+        placement: "top",
+        desc: tooltipText,
+        title: tooltipTitle,
+        tooltipContainer: tooltipContainer,
+      }
+    : false
+}
+
+export default getTooltipConfig

packages/atlas-theme/index.js

@@ -5,6 +5,7 @@ import RadioGroupWidget from "./Widgets/RadioGroupWidget"
 import RadioButtonGroupWidget from "./Widgets/RadioButtonGroupWidget"
 import CurrencyWidget from "./Widgets/CurrencyWidget"
 import CEPWidget from "./Widgets/CEPWidget"
+import BRCityWidget from "./Widgets/BRCityWidget"
 
 const defaultTheme = {
   "Text": TextWidget,
@@ -14,6 +15,7 @@ const defaultTheme = {
   "Radio-Unified": RadioButtonGroupWidget,
   "Currency": CurrencyWidget,
   "CEP": CEPWidget,
+  "BRCity": BRCityWidget,
 }
 
 export default defaultTheme

packages/atlas-theme/services/getCities.js

@@ -0,0 +1,5 @@
+export default async function getCities(stateUfNumber) {
+  const route = `https://servicodados.ibge.gov.br/api/v1/localidades/estados/${stateUfNumber}/municipios`
+  const res = (await fetch(route).then((data) => data.json())) || []
+  return res
+}