Billing credit card flow

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

@@ -13,6 +13,7 @@ export type Crumb = {
 export type BreadcrumbProps = {
   crumbs?: Crumb[]
   homeOnClick?: () => void
+  hideHome?: boolean
   className?: string
   showDropDown?: boolean
 }
@@ -60,7 +61,7 @@ const useStyles = makeStyles(
         "&.clickable": {
           cursor: "pointer"
         },
-        maxWidth: 100,
+        maxWidth: 120,
         whiteSpace: "nowrap",
         overflow: "hidden",
         textOverflow: "ellipsis",
@@ -94,6 +95,7 @@ const useStyles = makeStyles(
 const Breadcrumb: React.FC<BreadcrumbProps> = ({
   crumbs = [],
   homeOnClick,
+  hideHome,
   className,
   showDropDown
 }: BreadcrumbProps) => {
@@ -102,7 +104,6 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
   const generateFullCrumbs = (crumbs: Crumb[]) => {
     return crumbs.map((item: Crumb, index: number) => (
       <Fragment key={`crumb-${index}`}>
-        <div className={clsx(classes.separator)} />
         <div>
           <Typography
             onClick={() => (item.onClick ? item.onClick() : null)}
@@ -112,6 +113,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
             {item.text}
           </Typography>
         </div>
+        {index < (crumbs.length - 1) && <div className={clsx(classes.separator)} />}
       </Fragment>
     ))
   }
@@ -120,7 +122,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
     return (
       <MenuDropdown
         title={crumbs[0].text}
-        anchor="bottom-center"
+        anchor="bottom-left"
         animation="rotate"
         classNames={{
           item: classes.menuItem,
@@ -146,11 +148,10 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
     if (crumbs.length < 3 || !showDropDown) {
       return generateFullCrumbs(crumbs)
     } else {
-      const dropdownCrumbs = crumbs.slice(0, length - 1)
+      const dropdownCrumbs = crumbs.slice(0, crumbs.length - 1)
       const lastCrumb = crumbs[crumbs.length - 1]
       return (
         <>
-          <div className={clsx(classes.separator)} />
           {generateDropdownCrumb(dropdownCrumbs)}
           <div className={clsx(classes.separator)} />
           <div>
@@ -169,10 +170,14 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
 
   return (
     <div className={clsx(classes.root, className)}>
-      <HomeIcon
-        className={clsx(classes.home, homeOnClick && "clickable")}
-        onClick={() => (homeOnClick ? homeOnClick() : null)}
-      />
+      {!hideHome && <>
+        <HomeIcon
+          className={clsx(classes.home, homeOnClick && "clickable")}
+          onClick={() => (homeOnClick ? homeOnClick() : null)}
+        />
+        <div className={clsx(classes.separator)} />
+      </>
+      }
       {generateCrumbs()}
     </div>
   )

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

@@ -13,7 +13,6 @@ const useStyles = makeStyles(
         cursor: "pointer",
         paddingLeft: constants.generalUnit * 3,
         paddingRight: constants.generalUnit * 3,
-        margin: `${constants.generalUnit}px 0`,
         ...overrides?.RadioInput?.radioContainer
       },
       radioInput: {
@@ -27,7 +26,7 @@ const useStyles = makeStyles(
         width: constants.generalUnit * 2,
         height: constants.generalUnit * 2,
         left: 0,
-        top: 0,
+        top: "auto",
         borderRadius: "50%",
         transition: `all ${animation.transform}ms ease`,
         ...overrides?.RadioInput?.radio?.root,
@@ -83,6 +82,7 @@ const useStyles = makeStyles(
 
 export interface IRadioInputProps extends React.HTMLProps<HTMLInputElement> {
   className?: string
+  labelClassName?: string
   value: string
   label?: string
   name?: string
@@ -94,6 +94,7 @@ export interface IRadioInputProps extends React.HTMLProps<HTMLInputElement> {
 
 const RadioInput: React.FC<IRadioInputProps> = ({
   className,
+  labelClassName,
   value,
   name,
   label,
@@ -130,7 +131,7 @@ const RadioInput: React.FC<IRadioInputProps> = ({
         })}
       />
       {label && (
-        <Typography className={clsx(classes.label)}>{label}</Typography>
+        <Typography className={clsx(classes.label, labelClassName)}>{label}</Typography>
       )}
       {error && <div className={classes.error}>{error}</div>}
     </label>

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

@@ -38,6 +38,7 @@ export const BreadcrumbStory = (): React.ReactNode => {
         homeOnClick={() => actionsData.homeClicked()}
         showDropDown={boolean("show dropdown", true)}
         crumbs={crumbs}
+        hideHome={boolean("hide home", false)}
       />
     </>
   )}

packages/files-ui/package.json

@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "^1.18.20",
+    "@chainsafe/files-api-client": "^1.18.22",
     "@chainsafe/web3-context": "1.1.4",
     "@emeraldpay/hashicon-react": "^0.5.1",
     "@lingui/core": "^3.7.2",

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

@@ -15,12 +15,14 @@ import LinkSharingLanding from "./Pages/LinkSharingLanding"
 
 export const SETTINGS_BASE = "/settings"
 export const LINK_SHARING_BASE = "/link-sharing"
+const CHAINSAFE_LANDING = "https://chainsafe.io/"
 
 export const ROUTE_LINKS = {
   Landing: "/",
   PrivacyPolicy: "https://files.chainsafe.io/privacy-policy",
   Terms: "https://files.chainsafe.io/terms-of-service",
-  ChainSafe: "https://chainsafe.io/",
+  ChainSafe: CHAINSAFE_LANDING,
+  ProductPlans: `${CHAINSAFE_LANDING}`,
   Drive: (rawCurrentPath: string) => `/drive${rawCurrentPath}`,
   Bin: (rawBinPath: string) => `/bin${rawBinPath}`,
   Search: (rawSearchTerm: string) => `/search/${rawSearchTerm}`,