Change plan widget

packages/common-components/src/Icons/icons/External.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as ExternalSvg } from "../svgs/external.svg"
+
+export { ExternalSvg }
+
+export default createSvgIcon(<ExternalSvg />)

packages/common-components/src/Icons/index.ts

@@ -31,6 +31,7 @@ export { default as EthereumLogoIcon, EthereumLogoSvg } from "./icons/EthereumLo
 export { default as ExclamationCircleIcon, ExclamationCircleSvg } from "./icons/ExclamationCircle.icon"
 export { default as ExclamationCircleInverseIcon, ExclamationCircleInverseSvg } from "./icons/ExclamationCircleInverse.icon"
 export { default as ExportIcon, ExportSvg } from "./icons/Export.icon"
+export { default as ExternalIcon, ExternalSvg } from "./icons/External.icon"
 export { default as EyeClosedIcon, EyeClosedSvg } from "./icons/EyeClosed.icon"
 export { default as EyeIcon, EyeSvg } from "./icons/Eye.icon"
 export { default as EyeOpenIcon, EyeOpenSvg } from "./icons/EyeOpen.icon"

packages/common-components/src/ToggleSwitch/FormikToggleSwitch.tsx

@@ -0,0 +1,28 @@
+import { useField } from "formik"
+import React from "react"
+import { IToggleSwitch, ToggleSwitch } from "."
+
+
+interface IFormikToggleSwitch extends IToggleSwitch {
+  name: string
+}
+
+const FormikToggleSwitch = ({ injectedClasses, disabled, name, left, right, size }: IFormikToggleSwitch) => {
+  const [field, meta, helpers] = useField(name)
+  const handleChange = (value: any) => {
+    helpers.setValue(value)
+  }
+
+  return <ToggleSwitch
+    {...field}
+    left={left}
+    right={right}
+    size={size}
+    disabled={disabled}
+    onChange={handleChange}
+    injectedClasses={injectedClasses}
+    error={meta.error}
+  />
+}
+
+export default FormikToggleSwitch

packages/common-components/src/ToggleSwitch/ToggleSwitch.tsx

@@ -0,0 +1,174 @@
+import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
+import clsx from "clsx"
+import React, { ReactNode, useCallback, useMemo, useState } from "react"
+import { Typography } from "../Typography"
+
+interface IStyleProps {
+  size: number
+}
+
+const SIZES = {
+  small: 14,
+  medium: 16,
+  large: 20
+}
+
+const PADDING = 2
+
+const useStyles = makeStyles(
+  ({ animation, breakpoints, constants, overrides, palette }: ITheme) =>
+    createStyles({
+      root : {
+        padding: `${constants.generalUnit}px 0`,
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        cursor: "pointer",
+        "&.disabled": {
+          cursor: "initial"
+        },
+        [breakpoints.down("md")]: {
+          marginBottom: 0
+        },
+        ...overrides?.Tabs?.root
+      },
+      label: {
+        marginRight: constants.generalUnit,
+        ...overrides?.ToggleSwitch?.label
+      },
+      background: ({ size }: IStyleProps) => ({
+        boxSizing: "border-box",
+        display: "block",
+        position: "relative",
+        backgroundColor: palette.additional.gray[6],
+        borderRadius: size,
+        padding: PADDING,
+        height: size,
+        width: `calc(${size * 2}px - ${PADDING * 2}px)`,
+        transitionDuration: `${animation.transform}ms`,
+        ...overrides?.ToggleSwitch?.background
+      }),
+      dot: ({ size }: IStyleProps) => ({
+        display: "block",
+        position: "absolute",
+        borderRadius: "100%",
+        height: `calc(${size}px - ${PADDING * 2}px)`,
+        width: `calc(${size}px - ${PADDING * 2}px)`,
+        backgroundColor: palette.additional.gray[1],
+        transitionDuration: `${animation.transform}ms`,
+        top: "50%",
+        transform: "translateY(-50%)",
+        "&.left": {
+          left: PADDING
+        },
+        "&.right": {
+          left: "50%"
+        },
+        "&.error": {
+          backgroundColor: palette.error.main
+        },
+        ...overrides?.ToggleSwitch?.dot
+      })
+    })
+)
+
+interface ToggleSwitchInjectedClasses {
+  root?: string
+  label?: string
+  background?: string
+  dot?: string
+}
+
+// Could allow for a slider to be made from this
+interface IToggleOption {
+  value: any
+  label?: string | ReactNode | number
+}
+
+interface IToggleSwitch {
+  left: IToggleOption
+  right: IToggleOption
+  onChange(value: any): void
+  injectedClasses?: ToggleSwitchInjectedClasses
+  size?: "large" | "medium" | "small" | number
+  error?: string
+  disabled?: boolean
+  value?: any
+  // name?: string
+}
+
+const ToggleSwitch = ({ injectedClasses, disabled, left, right, onChange, value, size, error }: IToggleSwitch) => {
+  const resolvedSize = useMemo(() => {
+    switch (size) {
+      case "large":
+        return SIZES.large
+      case "medium":
+        return SIZES.medium
+      case "small":
+        return SIZES.small
+      case undefined:
+        return SIZES.medium
+      default:
+        return size
+    }
+  }, [size])
+  const classes = useStyles({ size: resolvedSize })
+  const [side, setSide] = useState<"left" | "right">(value && right.value === value ? "right" : "left")
+
+  const onToggle = useCallback(() => {
+    if (disabled) return
+    if (side === "left") {
+      setSide("right")
+      onChange(right.value)
+    } else {
+      setSide("left")
+      onChange(left.value)
+    }
+  }, [left, right, side, onChange, disabled])
+
+  return <section
+    className={clsx(classes.root, injectedClasses?.root, {
+      "disabled": disabled
+    })}
+    onClick={onToggle}
+  >
+    {
+      side === "left" && left.label && (
+        <Typography
+          component="p"
+          variant="body1"
+          className={clsx(classes.label, injectedClasses?.label, {
+            "error": !!error
+          })}
+        >
+          { left.label }
+        </Typography>
+      )
+    }
+    {
+      side === "right" && right.label && (
+        <Typography
+          component="p"
+          variant="body1"
+          className={clsx(classes.label, injectedClasses?.label, {
+            "error": !!error
+          })}
+        >
+          { right.label }
+        </Typography>
+      )
+    }
+    <div className={clsx(classes.background, size, injectedClasses?.background, {
+      "error": !!error
+    })}>
+      <div className={clsx(classes.dot, side, injectedClasses?.dot, {
+        "error": !!error
+      })}>
+      </div>
+    </div>
+  </section>
+}
+
+export default ToggleSwitch
+export { IToggleSwitch, IToggleOption, ToggleSwitchInjectedClasses }

packages/common-components/src/ToggleSwitch/index.tsx

@@ -0,0 +1,6 @@
+export {
+  default as ToggleSwitch,
+  IToggleOption,
+  IToggleSwitch,
+  ToggleSwitchInjectedClasses
+} from "./ToggleSwitch"

packages/common-components/src/index.ts

@@ -34,6 +34,7 @@ export * from "./Tabs"
 export * from "./TagsInput"
 export * from "./Toasts"
 export * from "./ToggleHiddenText"
+export * from "./ToggleSwitch"
 export * from "./TextInput"
 export * from "./TreeView"
 export * from "./Typography"

packages/common-components/src/stories/ToggleSwitch.stories.tsx

@@ -0,0 +1,41 @@
+import { action } from "@storybook/addon-actions"
+import { boolean, select, withKnobs } from "@storybook/addon-knobs"
+import React, { useState } from "react"
+import { ToggleSwitch } from ".."
+import { SizeOption } from "./types"
+
+export default {
+  title: "ToggleSwitch",
+  component: ToggleSwitch,
+  excludeStories: /.*Data$/,
+  decorators: [withKnobs]
+}
+
+const sizeOptions: SizeOption[] = ["large", "medium", "small"]
+
+const actionsData = {
+  onChange: action("onChange")
+}
+
+export const ToggleSwitchDemo = (): React.ReactNode => {
+  const [state, setState] = useState(false)
+  return (
+    <ToggleSwitch
+      left={{
+        value: false,
+        label: "off"
+      }}
+      right={{
+        value: true,
+        label: "on"
+      }}
+      value={state}
+      onChange={(value) => {
+        setState(value)
+        actionsData.onChange(value)
+      }}
+      disabled={boolean("Disabled", false)}
+      size={select("Size", sizeOptions, "medium")}
+    />
+  )
+}

packages/common-theme/src/Overrides/ToggleSwitch.ts

@@ -0,0 +1,6 @@
+export interface IToggleSwitchOverride {
+  root?: Record<string, any>
+  label?: Record<string, any>
+  background?: Record<string, any>
+  dot?: Record<string, any>
+}

packages/common-theme/src/Overrides/index.ts

@@ -25,6 +25,7 @@ import { IToastsOverride } from "./Toasts"
 import { ITypographyOverride } from "./Typography"
 import { ITagsInputOverride } from "./TagsInput"
 import { IToggleHiddenText } from "./ToggleHiddenText"
+import { IToggleSwitchOverride } from "./ToggleSwitch"
 
 export interface IComponentOverrides {
   Avatar?: IAvatarOverride
@@ -52,6 +53,7 @@ export interface IComponentOverrides {
   TextInput?: ITextInputOverride
   Toasts?: IToastsOverride
   ToggleHiddenText?: IToggleHiddenText
+  ToggleSwitch?: IToggleSwitchOverride
   Typography?: ITypographyOverride
   TagsInput?: ITagsInputOverride
 }

packages/files-ui/src/Components/FilesRoutes.tsx

@@ -9,7 +9,6 @@ import BinPage from "./Pages/BinPage"
 import { useThresholdKey } from "../Contexts/ThresholdKeyContext"
 import ShareFilesPage from "./Pages/SharedFilesPage"
 import SharedFoldersOverview from "./Modules/FileBrowsers/SharedFoldersOverview"
-import PlansPage from "./Pages/PlansPage"
 import BillingHistory from "./Pages/BillingHistory"
 import { NonceResponsePermission } from "@chainsafe/files-api-client"
 import LinkSharingLanding from "./Pages/LinkSharingLanding"
@@ -116,13 +115,6 @@ const FilesRoutes = () => {
         component={SettingsPage}
         redirectPath={ROUTE_LINKS.Landing}
       />
-      <ConditionalRoute
-        exact
-        path={ROUTE_LINKS.Plans}
-        isAuthorized={isAuthorized}
-        component={PlansPage}
-        redirectPath={ROUTE_LINKS.Landing}
-      />
       <ConditionalRoute
         path={ROUTE_LINKS.Landing}
         isAuthorized={!isAuthorized}

packages/files-ui/src/Components/Modules/Settings/Products/ChangeProductModal.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react"
+import { makeStyles, createStyles } from "@chainsafe/common-theme"
+import { CSFTheme } from "../../../../Themes/types"
+import clsx from "clsx"
+import { Modal } from "@chainsafe/common-components"
+import SelectPlan from "./ChangeProductViews/SelectPlan"
+import { useBilling } from "../../../../Contexts/BillingContext"
+
+const useStyles = makeStyles(({ constants }: CSFTheme) =>
+  createStyles({
+    root:  {
+    },
+    inner: {
+      borderRadius: `${constants.generalUnit / 2}px`
+    },
+    slide: {
+      borderRadius: constants.generalUnit / 2,
+      padding: `0 ${constants.generalUnit * 3}px`
+    }
+  })
+)
+
+interface IChangeProductModal {
+  className?: string
+  close: () => void
+}
+
+const ChangeProductModal = ({ className, close }: IChangeProductModal) => {
+  const classes = useStyles()
+  const { changeSubscription } = useBilling()
+  const [slide, setSlide] = useState<"select" | "confirm">("select")
+
+  useEffect(() => {
+    if (slide !== "select") {
+      setSlide("select")
+    }
+  }, [slide])
+
+  return (
+    <Modal
+      closePosition="none"
+      active={true}
+      maxWidth="md"
+      className={classes.root}
+      injectedClass={{
+        inner: classes.inner
+      }}
+      testId="change-product"
+    >
+      {
+        slide === "select" && <SelectPlan
+          className={clsx(classes.slide, className)}
+          close={close}
+          next={(newpriceId: string) => {
+            // setSlide("confirm")
+            changeSubscription(newpriceId)
+              .then(() => close())
+              .catch(console.error)
+          }}
+        />
+      }
+    </Modal>
+  )
+}
+
+export default ChangeProductModal