{"version":3,"file":"AddVirtualDeviceWizard-728b3d76.js","sources":["../../src/components/Homes/AddVirtualDevice/AddVirtualDeviceForm.tsx","../../src/components/Homes/AddVirtualDevice/AddVirtualDeviceWizard.tsx"],"sourcesContent":["import { FormEvent, useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\n\nimport { useFetchDeviceCount } from \"src/data/devices/queries/deviceQueries\"\nimport { HardwareType } from \"src/data/devices/types/deviceTypes\"\nimport { usePostVirtualDevice } from \"src/data/homes/queries/virtualDeviceQueries\"\nimport { useOrganization } from \"src/data/organizations/hooks/useOrganization\"\nimport { useFetchHome } from \"src/data/organizations/queries/homeQueries\"\nimport { brandText } from \"src/ui/colors\"\nimport { MBanner } from \"src/ui/MBanner/MBanner\"\nimport { MSelect } from \"src/ui/MSelect/MSelect\"\nimport { BodyMixin, Heading2Mixin } from \"src/ui/MText\"\nimport { MTextField } from \"src/ui/MTextField/MTextField\"\nimport { spacing } from \"src/ui/spacing\"\nimport { slugify } from \"src/utils/genericUtil\"\n\nconst DEVICE_NAME = \"description\"\nconst HARDWARE_TYPE = \"hardwareType\"\nconst SOUND_DURATION = \"soundDuration\"\nconst DEVICE_MAC_ADDRESS = \"deviceMacAddress\"\n\ninterface AddVirtualDeviceFormData {\n  [DEVICE_NAME]: { value: string }\n  [HARDWARE_TYPE]: { value: HardwareType }\n  [SOUND_DURATION]: { value: string }\n}\n\nexport function AddVirtualDeviceForm({\n  formId,\n  homeId,\n  afterSubmitSuccess,\n}: {\n  formId: string\n  homeId: string\n  afterSubmitSuccess: () => void\n}) {\n  const { orgId } = useOrganization()\n  const postVirtualDevice = usePostVirtualDevice()\n  const [hardwareType, setHardwareType] = useState(HardwareType.P3)\n  const [name, setName] = useState<string>(\"\")\n  const shouldShowSoundDuration = hardwareType !== HardwareType.WLD\n  const [soundDuration, setSoundDuration] = useState<number | null>(30)\n  const [deviceMacAddress, setDeviceMacAddress] = useState<string | null>(null)\n\n  const fetchHome = useFetchHome({ orgId, homeId })\n  const fetchDeviceCount = useFetchDeviceCount({\n    orgId,\n    filter: { home_ids: [homeId] },\n  })\n\n  // Set a useful default name, when fetches are done and when hardware type is changed.\n  useEffect(() => {\n    const homeName: string = fetchHome.data?.name ?? \"home\"\n    const deviceCount: number = fetchDeviceCount.data ?? 0\n    const defaultDeviceName = `${slugify(homeName)}:${hardwareType}-${deviceCount}`\n    setName(defaultDeviceName)\n  }, [fetchDeviceCount.data, fetchHome.data?.name, hardwareType])\n\n  if (fetchHome.isLoading || fetchDeviceCount.isLoading) {\n    return null\n  }\n  if (fetchHome.isError || fetchDeviceCount.isError) {\n    return null\n  }\n\n  return (\n    <FormBox\n      id={formId}\n      onSubmit={(e: FormEvent<HTMLFormElement & AddVirtualDeviceFormData>) => {\n        e.preventDefault()\n\n        soundDuration &&\n          postVirtualDevice.mutate(\n            {\n              orgId,\n              homeId,\n              description: name,\n              hardwareType,\n              soundDuration,\n              mac: deviceMacAddress ?? undefined,\n            },\n            { onSuccess: () => afterSubmitSuccess() }\n          )\n      }}\n    >\n      <Title>Add a virtual device</Title>\n      <Description>\n        This device will appear in your home as any real device would, and upon\n        creation you'll get a control panel at the bottom of the screen that you\n        can use to control the virtual environment around the device.\n      </Description>\n\n      <MSelect\n        label=\"Hardware type\"\n        autoFocus\n        required\n        name={HARDWARE_TYPE}\n        id=\"hardwareType\"\n        value={hardwareType}\n        onChange={(value) => {\n          setHardwareType(value as HardwareType)\n        }}\n        options={Object.values(HardwareType)\n          .filter((hw) => hw !== HardwareType.NONE && hw !== HardwareType.P1)\n          .map((gen) => ({\n            value: gen,\n            label: getShortname(gen),\n          }))}\n      />\n\n      <MTextField\n        label=\"Device name\"\n        name={DEVICE_NAME}\n        value={name}\n        onChange={(value) => setName(value)}\n      />\n\n      {shouldShowSoundDuration && (\n        <MTextField\n          label=\"Sound duration in seconds\"\n          name={SOUND_DURATION}\n          type=\"number\"\n          min={30}\n          max={900}\n          value={soundDuration ? String(soundDuration) : \"\"}\n          onChange={(value) => {\n            setSoundDuration(value ? parseInt(value) : null)\n          }}\n          required\n        />\n      )}\n      {!!soundDuration && soundDuration < 300 && shouldShowSoundDuration && (\n        <MBanner type=\"warning\">\n          The sound duration value chosen here will update the noise profile of\n          the home that the virtual device is part of. If you have real devices\n          on this home, they might not function as expected if the duration is\n          set below 300 seconds.\n        </MBanner>\n      )}\n      {hardwareType === HardwareType.WLD && (\n        <MTextField\n          label=\"Device mac address\"\n          name={DEVICE_MAC_ADDRESS}\n          value={deviceMacAddress ?? \"\"}\n          onChange={(value) => setDeviceMacAddress(value)}\n        />\n      )}\n    </FormBox>\n  )\n}\n\nconst FormBox = styled.form`\n  display: grid;\n  gap: ${spacing.L};\n  grid-template-columns: 1fr;\n  padding: ${spacing.XS2};\n`\n\nconst Title = styled.div`\n  margin-bottom: ${spacing.M};\n  ${Heading2Mixin};\n`\n\nconst Description = styled.div`\n  margin-bottom: ${spacing.XL2};\n  ${BodyMixin};\n  color: ${brandText};\n`\n\nfunction getShortname(hw: HardwareType): string {\n  switch (hw) {\n    case HardwareType.A1:\n      return \"A1 (Eureka)\"\n    case HardwareType.P2:\n      return \"M2 (P2)\"\n    case HardwareType.P3:\n      return \"M3 (Amarillo)\"\n    case HardwareType.WLD:\n      return \"WLD (Water leak detection)\"\n    default:\n      return \"Unknown device type\"\n  }\n}\n","import { AddVirtualDeviceForm } from \"src/components/Homes/AddVirtualDevice/AddVirtualDeviceForm\"\nimport { useTranslate } from \"src/i18n/useTranslate\"\nimport { Routes } from \"src/router/routes\"\nimport { useRouter } from \"src/router/useRouter\"\nimport { FullscreenWizard } from \"src/ui/Wizard/FullscreenWizard\"\nimport { IWizardStep } from \"src/ui/Wizard/wizardTypes\"\n\nconst FORM_ID = \"create-virtual-device-form\"\n\nexport function AddVirtualDeviceWizard({ homeId }: { homeId: string }) {\n  const { goBack } = useRouter()\n\n  const { t, langKeys } = useTranslate()\n\n  function handleClose() {\n    goBack({ defaultPath: Routes.Home.location(homeId) })\n  }\n\n  const stepper: IWizardStep[] = [\n    {\n      component: (\n        <AddVirtualDeviceForm\n          formId={FORM_ID}\n          homeId={homeId}\n          afterSubmitSuccess={handleClose}\n        />\n      ),\n      nextButtonLabel: t(langKeys.save),\n      nextButtonProps: {\n        name: \"create-device-button\",\n        form: FORM_ID,\n        type: \"submit\",\n        accessKey: \"s\", // alt+s saves (ctrl+option+s on Mac)\n      },\n      onNext: handleClose,\n    },\n  ]\n\n  return (\n    <FullscreenWizard\n      title={\"Add virtual device\"}\n      steps={stepper}\n      currentStep={0} // we only have one step at the moment\n      onClose={handleClose}\n      onBack={handleClose}\n    />\n  )\n}\n"],"names":["DEVICE_NAME","HARDWARE_TYPE","SOUND_DURATION","DEVICE_MAC_ADDRESS","AddVirtualDeviceForm","formId","homeId","afterSubmitSuccess","orgId","useOrganization","postVirtualDevice","usePostVirtualDevice","hardwareType","setHardwareType","useState","HardwareType","P3","name","setName","shouldShowSoundDuration","WLD","soundDuration","setSoundDuration","deviceMacAddress","setDeviceMacAddress","fetchHome","useFetchHome","fetchDeviceCount","useFetchDeviceCount","filter","home_ids","useEffect","homeName","data","deviceCount","defaultDeviceName","slugify","isLoading","isError","FormBox","id","onSubmit","e","preventDefault","mutate","description","mac","undefined","onSuccess","Title","Description","MSelect","label","autoFocus","required","value","onChange","options","Object","values","hw","NONE","P1","map","gen","getShortname","MTextField","type","min","max","String","parseInt","MBanner","_jsx","styled","form","spacing","L","XS2","div","M","Heading2Mixin","XL2","BodyMixin","brandText","A1","P2","FORM_ID","AddVirtualDeviceWizard","goBack","useRouter","t","langKeys","useTranslate","handleClose","defaultPath","Routes","Home","location","stepper","component","nextButtonLabel","save","nextButtonProps","accessKey","onNext","FullscreenWizard","title","steps","currentStep","onClose","onBack"],"mappings":"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"}