@vtex/faststore-plugin-buyer-portal 1.0.2 → 1.0.4

package/package.json

@@ -1,22 +1,19 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@faststore/core": "^3.0.147",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@faststore/ui": "^3.0.147",
+    "@types/react": "^18.2.42",
     "next": "13.5.6",
     "typescript": "4.7.3"
   },
   "peerDependencies": {
-    "@faststore/core": "^3.0.147",
-    "next": "13.5.6"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "license": "MIT"
 }

package/plugin.config.js

@@ -3,7 +3,7 @@ module.exports = {
   pages: {
     "buyer-portal": {
       path: "/buyer-portal",
-      appLayout: false,
+      appLayout: false
     },
   },
 };

package/src/components/AddressesCard/AddressesCard.tsx

@@ -0,0 +1,87 @@
+import {
+  IconButton, Icon, Toggle, Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownButton,
+} from '@faststore/ui'
+
+import { Card, CardBody, CardFooter, CardHeader } from '../Card'
+import Link from "next/link";
+
+export type AddressInformation = {
+  addressId: string,
+  street: string,
+  addressType: string,
+  isActive: boolean,
+}
+
+type AddressesCardProps = {
+  addresses: AddressInformation[]
+}
+
+export default function AddressesCard({ addresses }: AddressesCardProps) {
+  return (
+    <section data-fs-home-card>
+      <Card>
+        <CardHeader>
+          <div data-fs-card-title>Addresses <span data-fs-card-title-counter>{addresses.length}</span></div>
+          <IconButton icon={<Icon name="PlusCircle" width={20} height={20} />}
+            aria-label={`$addresses action`} onClick={() => { }} />
+        </CardHeader>
+        <CardBody>
+          {addresses.length && addresses.map((address: AddressInformation) => {
+            return (
+              <div>
+                <hr data-fs-divider />
+
+                <div data-fs-card-row key={address.addressId}>
+                  <div data-fs-card-information-row>
+                    <Icon name="House" weight='bold' data-fs-card-information-icon />
+                    <span data-fs-card-information-title>{address.street}</span>
+                    <div data-fs-card-information-type>
+                      <span data-fs-shipping-tag>{address.addressType}</span>
+                    </div>
+                  </div>
+                  <div data-fs-card-action-row>
+                    <Toggle id="addressActive" defaultChecked={address.isActive} />
+
+                    <Dropdown>
+                      <DropdownButton><Icon name='DotsThree' data-fs-menu-action-button /></DropdownButton>
+                      <DropdownMenu>
+                        <DropdownItem>
+                          <Icon name="ArrowSquareOut" />Open
+                        </DropdownItem>
+                        <DropdownItem>
+                          {/* TODO: Replace Icon */}
+                          <Icon name='User' />Edit
+                        </DropdownItem>
+                        <DropdownItem>
+                          {/* TODO: Replace Icon */}
+                          <Icon name="XCircle" />  Delete
+                        </DropdownItem>
+                        {/* TODO: Replace Icon */}
+                        <DropdownItem>
+                          <div data-fs-dropdown-active-item>
+                            <div data-fs-dropdown-active-item-label>
+                              <Icon name="Checked" />Active
+                            </div>
+                            <Toggle id="addressActiveMenu" defaultChecked={address.isActive} data-fs-internal-toggle />
+                          </div>
+                        </DropdownItem>
+                      </DropdownMenu>
+                    </Dropdown>
+                  </div>
+                </div>
+              </div>)
+          })}
+        </CardBody>
+        <CardFooter>
+          <Link href="/" data-fs-card-footer-link>
+            <span>Manage addresses</span>
+          </Link>
+          <IconButton icon={<Icon name="CaretRight" data-fs-card-footer-icon />} aria-label="manage-addresses" />
+        </CardFooter>
+      </Card>
+    </section>
+  )
+}

package/src/components/Card/Card.scss

@@ -0,0 +1,159 @@
+[data-fs-card] {
+  // --------------------------------------------------------
+  // Design Tokens for Card
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-card-border-width                          : var(--fs-border-width);
+
+  // Header
+  --fs-card-header-padding                        : var(--fs-spacing-3);
+  --fs-card-header-bkg-color                      : var(--fs-color-neutral-bkg);
+  --fs-card-header-font-weight                    : var(--fs-text-weight-bold);
+  --fs-card-header-icon-color                     : var(--fs-color-main-2);
+
+  // Body
+  --fs-card-body-padding                          : var(--fs-spacing-3);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+  border: var(--fs-card-border-width) solid rgba(224, 224, 224, 1);
+  border-radius: 12px;
+
+  [data-fs-card-header] {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    padding-bottom: 0px !important;
+    background-color: white;
+    align-items: center;
+
+    padding: var(--fs-card-header-padding);
+    font-weight: var(--fs-card-header-font-weight);
+    display: flex;
+    justify-content: space-between;
+
+    [data-fs-button]{
+      --fs-button-height: var(--fs-spacing-4);
+    }
+
+    [data-fs-icon]{
+      color: var(--fs-card-header-icon-color);
+    }
+
+    [data-fs-card-title-counter]{
+      font-weight: 600;
+      margin-left: 0.75rem;
+      color: #ADADAD;
+    }
+  }
+
+  [data-fs-card-body] {
+    padding: var(--fs-card-body-padding);
+    padding-bottom: 0px;
+
+
+    [data-fs-profile-card-row] {
+      display: flex;
+      flex-direction: row;
+      gap: 2.5rem;
+      padding-top: 1.25rem;
+      padding-bottom: 1.25rem;
+
+      [data-fs-card-row-label]{
+        font-weight: 500;
+        width: 100px;
+        color: gray;
+      }
+    }
+
+    [data-fs-card-row]{
+      display: flex;
+      flex-direction: row;
+      gap: 2.5rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+
+      [data-fs-card-row-label]{
+        font-weight: 500;
+        width: 100px;
+        color: gray;
+      }
+    }
+
+    [data-fs-card-information-row] {
+      display: flex;
+      align-items: center;
+      width: 70%;
+      justify-content: space-around;
+
+      [data-fs-card-information-icon] {
+        width: 50px
+      }
+
+      [data-fs-card-information-title] {
+        width: 200px
+      }
+
+      [data-fs-card-information-type] {
+        width: 100px;
+      }
+    }
+
+    [data-fs-card-action-row] {
+      display: flex;
+      width: 50%;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+
+    [data-fs-menu-action-button] {
+      rotate: 90deg;
+    }
+
+    [data-fs-shipping-tag] {
+      background: #C2C2C2;
+      padding: 5px 10px 5px 10px;
+      border-radius: 100px;
+      font-weight: 500;
+    }
+
+    [data-fs-card-body-empty-state] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      padding: 100px;
+
+      [data-fs-button]{
+        --fs-border-radius: 999px;
+      }
+    }
+  }
+
+  [data-fs-divider] {
+    border: 1px solid #E0E0E0
+  }
+
+  [data-fs-card-footer] {
+    border-top-width: var(--fs-card-border-width);
+    border-top-color: rgba(224, 224, 224, 1);
+    border-top-style: solid;
+    padding: var(--fs-spacing-1) var(--fs-spacing-3);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    [data-fs-card-footer-link] {
+      font-weight: 500;
+      line-height: 14px;
+      color: #0366DD;
+      text-decoration: none;
+    }
+
+    [data-fs-card-footer-icon] {
+      color: grey
+    }
+  }
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "react";
+import React, { forwardRef } from 'react'
+
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card({
+  children,
+  ...otherProps
+}, ref) {
+  return (
+    <section data-testid="fs-card" ref={ref} data-fs-card {...otherProps}>
+      {children}
+    </section >
+  )
+})

package/src/components/Card/CardBody.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react"
+
+export const CardBody = ({ children }: { children: ReactNode }) => (
+  <div data-fs-card-body>
+    {children}
+  </div>
+)

package/src/components/Card/CardFooter.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react"
+
+export const CardFooter = ({ children }: { children: ReactNode }) => (
+  <footer data-fs-card-footer>{children}</footer>
+)

package/src/components/Card/CardHeader.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react'
+
+
+export const CardHeader = ({ children }: { children: ReactNode }) => (
+  <header data-fs-card-header>{children}</header>
+)
+

package/src/components/Card/index.ts

@@ -0,0 +1,4 @@
+export { CardBody } from './CardBody'
+export { Card } from './Card'
+export { CardHeader } from './CardHeader'
+export { CardFooter } from './CardFooter'

package/src/components/ContractsCard/ContractsCard.tsx

@@ -0,0 +1,88 @@
+import {
+  Icon, IconButton, Toggle, Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownButton,
+} from '@faststore/ui'
+
+import { Card, CardBody, CardFooter, CardHeader } from '../Card'
+import Link from "next/link";
+
+export type ContractInformation = {
+  id: string
+  name: string
+  isActive: boolean
+}
+
+type ContractsCardProps = {
+  contracts: ContractInformation[]
+}
+
+
+export default function ContractsCard({ contracts }: ContractsCardProps) {
+  return (
+    <section data-fs-home-card>
+      <Card>
+        <CardHeader>
+          <div data-fs-card-title>Contracts <span data-fs-card-title-counter>{contracts.length}</span></div>
+          {/* TODO: CHANGE ICON */}
+          <IconButton icon={<Icon name="PlusCircle" width={20} height={20} />}
+            aria-label={`$profile action`} onClick={() => { }} />
+        </CardHeader>
+        <CardBody>
+          {contracts.length && contracts.map((contract: ContractInformation) => {
+            return (
+              <div>
+                <hr data-fs-divider />
+
+                <div data-fs-card-row key={contract.id}>
+                  <div data-fs-card-information-row>
+                    <Icon data-fs-card-information-icon name="User" weight='bold' />
+                    <h1 data-fs-card-information-title>{contract.name}</h1>
+                  </div>
+                  <div data-fs-card-action-row>
+                    <Toggle id="contractActive" defaultChecked={contract.isActive} />
+
+                    <Dropdown>
+                      <DropdownButton>
+                        <Icon name="DotsThree" data-fs-menu-action-button />
+                      </DropdownButton>
+                      <DropdownMenu align="right" data-fs-dropdown-menu>
+                        <DropdownItem>
+                          <Icon name="ArrowSquareOut" />Open
+                        </DropdownItem>
+                        <DropdownItem>
+                          {/* TODO: Replace Icon */}
+                          <Icon name='User' />Edit
+                        </DropdownItem>
+                        <DropdownItem>
+                          {/* TODO: Replace Icon */}
+                          <Icon name="XCircle" />  Delete
+                        </DropdownItem>
+                        {/* TODO: Replace Icon */}
+                        <DropdownItem>
+                          <div data-fs-dropdown-active-item>
+                            <div data-fs-dropdown-active-item-label>
+                              <Icon name="Checked" />Active
+                            </div>
+                            <Toggle id="contractActiveMenu" defaultChecked={contract.isActive} data-fs-internal-toggle />
+                          </div>
+                        </DropdownItem>
+                      </DropdownMenu>
+                    </Dropdown>
+                  </div>
+
+                </div>
+              </div>)
+          })}
+        </CardBody>
+        <CardFooter>
+          <Link href="/" data-fs-card-footer-link>
+            <span>View contracts</span>
+          </Link>
+          <IconButton icon={<Icon name="CaretRight" data-fs-card-footer-icon />} aria-label="view-contracts" />
+        </CardFooter>
+      </Card>
+    </section>
+  )
+}

package/src/components/CustomerSwitch/CustomerSwitchDrawer.tsx

@@ -4,7 +4,7 @@ import { CustomerSwitchSearch } from "./CustomerSwitchSearch";
 import { CustomerSwitchOptionsList } from "./CustomerSwitchOptionsList";
 import { useMemo, useState } from "react";
 import { CustomerSwitchOptionData } from "./CustomerSwitchOption";
-import { CustomerSwitchLoad } from "./CustomerSwitchLoad";
+import * as Icons from "../Icons";
 
 type CustomerSwitchDrawerProps = {
   isOpen: boolean;
@@ -42,10 +42,8 @@ const options = [
   "Lighthouse Consulting Group",
   "Stellar Synergy",
   "FinanceCore Solutions",
-  "Nova Finance Advisors"
-].map(
-  (name, index) => ({ name, id: `id-${index}` })
-);
+  "Nova Finance Advisors",
+].map((name, index) => ({ name, id: `id-${index}` }));
 
 export const CustomerSwitchDrawer = ({
   isOpen,
@@ -54,24 +52,24 @@ export const CustomerSwitchDrawer = ({
   const { fade, fadeOut } = useFadeEffect();
 
   const [option, setOption] = useState<CustomerSwitchOptionData>(options[0]);
-  const [loading, setLoading] = useState(false)
-  const [searchTerm, setSearchTerm] = useState("")
+  const [loading, setLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
 
   const filteredOptions = useMemo(() => {
     if (!searchTerm) {
       return options;
     }
-    return options.filter(currentOption =>
+    return options.filter((currentOption) =>
       currentOption.name?.toLowerCase().includes(searchTerm.toLowerCase())
     );
   }, [options, searchTerm]);
 
   const handleSubmitCustomer = () => {
     console.log(option);
-    setLoading(true)
+    setLoading(true);
     setTimeout(() => {
-      setLoading(false)
-      onCloseDrawer?.()
+      setLoading(false);
+      onCloseDrawer?.();
     }, 3000);
   };
 
@@ -107,11 +105,7 @@ export const CustomerSwitchDrawer = ({
           onClick={handleSubmitCustomer}
           disabled={option.id === options[0].id || loading}
         >
-          {
-            loading ?
-            <CustomerSwitchLoad /> :
-            "Confirm"
-          }
+          {loading ? <Icons.Load width={16} height={16} /> : "Confirm"}
         </Button>
       </footer>
     </SlideOver>

package/src/components/Icons/Link.tsx

@@ -0,0 +1,17 @@
+import { IconProps } from ".";
+
+export const Link = ({ ...props }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 10 10"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.75 1C1.75 0.585786 2.08579 0.25 2.5 0.25H9C9.41421 0.25 9.75 0.585786 9.75 1V7.5C9.75 7.91421 9.41421 8.25 9 8.25C8.58579 8.25 8.25 7.91421 8.25 7.5V2.81066L1.53033 9.53033C1.23744 9.82322 0.762563 9.82322 0.46967 9.53033C0.176777 9.23744 0.176777 8.76256 0.46967 8.46967L7.18934 1.75H2.5C2.08579 1.75 1.75 1.41421 1.75 1Z"
+      fill="#3D3D3D"
+    />
+  </svg>
+);

package/src/components/{CustomerSwitch/CustomerSwitchLoad.tsx → Icons/Load.tsx}

@@ -1,10 +1,7 @@
-export const CustomerSwitchLoad = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16px"
-    height="16px"
-    viewBox="0 0 24 24"
-  >
+import { IconProps } from ".";
+
+export const Load = ({ ...props }: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
     <g stroke="currentColor">
       <circle
         cx="12"

package/src/components/Icons/Profile.tsx

@@ -0,0 +1,15 @@
+import { IconProps } from ".";
+
+export const Profile = ({ ...props }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M7.00065 7.00114C6.08398 7.00114 5.29926 6.67475 4.64648 6.02197C3.99371 5.3692 3.66732 4.58447 3.66732 3.66781C3.66732 2.75114 3.99371 1.96642 4.64648 1.31364C5.29926 0.660862 6.08398 0.334473 7.00065 0.334473C7.91732 0.334473 8.70204 0.660862 9.35482 1.31364C10.0076 1.96642 10.334 2.75114 10.334 3.66781C10.334 4.58447 10.0076 5.3692 9.35482 6.02197C8.70204 6.67475 7.91732 7.00114 7.00065 7.00114ZM0.333984 13.6678V11.3345C0.333984 10.8623 0.455512 10.4282 0.698568 10.0324C0.941623 9.63656 1.26454 9.33447 1.66732 9.12614C2.52843 8.69559 3.40343 8.37267 4.29232 8.15739C5.18121 7.94211 6.08398 7.83447 7.00065 7.83447C7.91732 7.83447 8.8201 7.94211 9.70899 8.15739C10.5979 8.37267 11.4729 8.69559 12.334 9.12614C12.7368 9.33447 13.0597 9.63656 13.3027 10.0324C13.5458 10.4282 13.6673 10.8623 13.6673 11.3345V13.6678H0.333984Z"
+      fill="#0366DD"
+    />
+  </svg>
+);

package/src/components/Icons/index.ts

@@ -0,0 +1,8 @@
+export type IconProps = {
+  width: number;
+  height: number;
+};
+
+export { Profile } from "./Profile";
+export { Link } from "./Link";
+export { Load } from "./Load";

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,18 @@
+import { Image_unstable as Image } from "@faststore/core/experimental";
+
+const logoSrc =
+  "https://b2bfaststoredev.vtexassets.com/unsafe/1440x0/center/middle/https%3A%2F%2Fstoreframework.vtexassets.com%2Fassets%2Fvtex.file-manager-graphql%2Fimages%2Fab9997f4-8fd6-46f5-99d2-9d5af3ef5e34___6d75a203771d7408d8f0d1c660a076dd.png";
+
+export const Logo = () => (
+  <div data-fs-logo>
+    <Image
+      alt="Logo"
+      src={logoSrc}
+      width={0}
+      height={0}
+      sizes="15vw"
+      loading="lazy"
+      style={{ width: "100%", height: "auto" }}
+    />
+  </div>
+);

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,37 @@
+import * as Icons from "../Icons";
+import { Logo } from "../Logo/Logo";
+import Link from "next/link";
+
+import { Dropdown, DropdownMenu, DropdownButton } from "@faststore/ui";
+import { ProfileSummary } from "../ProfileSummary/ProfileSummary";
+import { doLogout } from "../../utils/logout";
+import { profileData } from "../../mock/profile-data";
+
+export const Navbar = () => {
+  return (
+    <header data-fs-buyer-portal-navbar>
+      <Logo />
+      <div data-fs-header-actions>
+        <Link href="/" data-fs-start-shopping-link>
+          <span>Start Shopping</span>
+          <Icons.Link width={10} height={10} />
+        </Link>
+        <Dropdown>
+          <DropdownButton asChild>
+            <button data-fs-profile-dropdown-trigger>
+              <Icons.Profile width={14} height={14} />
+            </button>
+          </DropdownButton>
+
+          <DropdownMenu align="right" data-fs-profile-dropdown-menu>
+            <ProfileSummary
+              data-fs-profile-dropdown-menu-profile-summary
+              onLogoutClick={doLogout}
+              {...profileData}
+            />
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    </header>
+  );
+};

package/src/components/Navbar/navbar.scss

@@ -0,0 +1,50 @@
+[data-fs-buyer-portal-navbar] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--fs-spacing-3) calc(var(--fs-spacing-8) + var(--fs-spacing-0));
+  background-color: #f5f5f5;
+
+  [data-fs-header-actions] {
+    display: flex;
+    align-items: center;
+  }
+
+  [data-fs-start-shopping-link] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: #3d3d3d;
+    font-weight: var(--fs-text-weight-semibold);
+    font-family: "Inter", sans-serif;
+    line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+    font-size: var(--fs-text-size-2);
+    text-decoration: none;
+    margin-right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+
+    span {
+      margin-right: var(--fs-spacing-0);
+    }
+  }
+
+  [data-fs-profile-dropdown-trigger] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--fs-border-radius-circle);
+    background-color: #cbe9ff;
+    width: var(--fs-spacing-5);
+    height: var(--fs-spacing-5);
+  }
+}
+
+[data-fs-profile-dropdown-menu] {
+  --fs-profile-dropdown-menu-width: 360px;
+
+  background-color: white;
+
+  [data-fs-profile-dropdown-menu-profile-summary] {
+    min-width: var(--fs-profile-dropdown-menu-width);
+  }
+}