@vtex/faststore-plugin-buyer-portal 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "dependencies": {},

package/plugin.config.js

@@ -1,9 +1,33 @@
 module.exports = {
   name: "poc-plugin",
   pages: {
-    "buyer-portal": {
+    home: {
       path: "/buyer-portal",
-      appLayout: false
+      appLayout: false,
+    },
+    "org-units": {
+      path: "/org-units",
+      appLayout: false,
+    },
+    contracts: {
+      path: "/contracts",
+      appLayout: false,
+    },
+    addresses: {
+      path: "/addresses",
+      appLayout: false,
+    },
+    "address-details": {
+      path: "/address/[id]",
+      appLayout: false,
+    },
+    users: {
+      path: "/users",
+      appLayout: false,
+    },
+    "user-details": {
+      path: "/user/[id]",
+      appLayout: false,
     },
   },
 };

package/public/buyer-portal-icons.svg

@@ -0,0 +1,219 @@
+<svg style="display:none">
+  <symbol id="Active" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+    viewBox="0 -960 960 960">
+    <path
+      d="M320-280h320v-80H320v80Zm118-120 226-226-57-55-169 169-86-86-56 56 142 142Zm42 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+  </symbol>
+
+  <symbol
+    id="Add"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" />
+  </symbol>
+
+  <symbol
+    id="Address" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
+    fill="currentColor">
+    <path
+      d="M120-120v-560h160v-160h400v320h160v400H520v-160h-80v160H120Zm80-80h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 320h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 480h80v-80h-80v80Zm0-160h80v-80h-80v80Z" />
+  </symbol>
+
+  <symbol
+    id="ArrowDropDown"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path d="M480-360 280-560h400L480-360Z" />
+  </symbol>
+
+  <symbol
+    id="ArrowRight"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path d="M400-280v-400l200 200-200 200Z" />
+  </symbol>
+
+  <symbol id="ArrowSquareOut" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+    viewBox="0 0 256 256">
+    <rect width="256" height="256" fill="none"></rect>
+    <polyline points="216 100 216 40 156 40" fill="none" stroke="currentColor"
+      stroke-linecap="round" stroke-linejoin="round"></polyline>
+    <line x1="144" y1="112" x2="216" y2="40" fill="none" stroke="currentColor"
+      stroke-linecap="round" stroke-linejoin="round"></line>
+    <path d="M184,144v64a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8h64" fill="none"
+      stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
+  </symbol>
+
+  <symbol id="Back"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+    <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
+  </symbol>
+
+  <symbol id="CaretRight" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+    viewBox="0 0 256 256">
+    <rect width="256" height="256" fill="none"></rect>
+    <polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor" stroke-linecap="round"
+      stroke-linejoin="round"></polyline>
+  </symbol>
+
+
+  <symbol
+    id="Delete" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
+    fill="currentColor">
+    <path
+      d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" />
+  </symbol>
+
+  <symbol
+    id="Down" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+    <path d="M480-344 246-576h468L480-344Z" />
+  </symbol>
+
+  <symbol
+    id="Edit"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path
+      d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z" />
+  </symbol>
+
+  <symbol
+    id="FilledFolder"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+    <path
+      d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Z" />
+  </symbol>
+
+  <symbol
+    id="Folder"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path
+      d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z" />
+  </symbol>
+
+  <symbol
+    id="FolderSpecial"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path
+      d="m504-292 92-70 92 70-34-114 92-74H632l-36-112-36 112H446l92 74-34 114ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z" />
+  </symbol>
+
+  <symbol id="Info" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
+    fill="currentColor">
+    <path
+      d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+  </symbol>
+
+  <symbol id="Link" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+    <path d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z" />
+  </symbol>
+
+
+  <symbol id="Load" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <g stroke="currentColor">
+      <circle
+        cx="12"
+        cy="12"
+        r="9.5"
+        fill="none"
+        stroke-linecap="round"
+        stroke-width="3"
+      >
+        <animate
+          attributeName="stroke-dasharray"
+          calcMode="spline"
+          dur="1.5s"
+          keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
+          keyTimes="0;0.475;0.95;1"
+          repeatCount="indefinite"
+          values="0 150;42 150;42 150;42 150"
+        />
+        <animate
+          attributeName="stroke-dashoffset"
+          calcMode="spline"
+          dur="1.5s"
+          keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
+          keyTimes="0;0.475;0.95;1"
+          repeatCount="indefinite"
+          values="0;-16;-59;-59"
+        />
+      </circle>
+      <animateTransform
+        attributeName="transform"
+        dur="2s"
+        repeatCount="indefinite"
+        type="rotate"
+        values="0 12 12;360 12 12"
+      />
+    </g>
+  </symbol>
+
+  <symbol
+    id="LocalPostOffice"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path
+      d="M640-200v80q0 17-11.5 28.5T600-80H120q-17 0-28.5-11.5T80-120v-320q0-17 11.5-28.5T120-480h120v-160q0-100 70-170t170-70h160q100 0 170 70t70 170v560h-80v-120H640Zm0-80h160v-360q0-66-47-113t-113-47H480q-66 0-113 47t-47 113v160h280q17 0 28.5 11.5T640-440v160ZM400-560v-80h320v80H400Zm-40 274 200-114H160l200 114Zm0 70L160-330v170h400v-170L360-216ZM160-400v240-240Z" />
+  </symbol>
+
+
+  <symbol
+    id="MoreVert"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path
+      d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z" />
+  </symbol>
+
+
+  <symbol
+    id="OpenInNew"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path
+      d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" />
+  </symbol>
+
+
+  <symbol
+    id="Profile"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <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="currentColor"
+    />
+  </symbol>
+
+  <symbol
+    id="StarFolder"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path
+      d="M154-128q-43.72 0-74.86-31.14Q48-190.27 48-234v-492q0-43.72 31.14-74.86T154-832h220l106 106h326q43.72 0 74.86 31.14T912-620v386q0 43.73-31.14 74.86Q849.72-128 806-128H154Zm339.67-136 104.16-79.68L702-264l-38-130 104-84H638l-40-126-40 126H428l104.17 84.23L493.67-264Z" />
+  </symbol>
+</svg>

package/src/components/AddressLine/AddressLine.tsx

@@ -0,0 +1,46 @@
+import { Toggle } from "@faststore/ui";
+import Link from "next/link";
+import { Tag } from "../Tag/Tag";
+import { Icon } from "../Icon";
+
+export type AddressLineProps = {
+  id: string;
+  name: string;
+  tags: string[];
+  status: boolean;
+  href: string;
+};
+
+export const AddressLine = ({
+  name,
+  tags,
+  id,
+  href,
+  status,
+}: AddressLineProps) => (
+  <li data-fs-addresses-line>
+    <Icon
+      name="LocalPostOffice"
+      width={20}
+      height={20}
+      data-fs-addresses-line-icon
+    />
+    <Link title={name} href={href} data-fs-addresses-line-name>
+      {name}
+    </Link>
+
+    {tags.map((tag, index) => (
+      <Tag key={index}>{tag}</Tag>
+    ))}
+
+    <Toggle id={id} defaultChecked={status} />
+    <button data-fs-addresses-dropdown-trigger>
+      <Icon
+        name="MoreVert"
+        width={20}
+        height={20}
+        data-fs-addresses-dropdown-trigger-icon
+      />
+    </button>
+  </li>
+);

package/src/components/AddressLine/address-line.scss

@@ -0,0 +1,45 @@
+[data-fs-addresses-line] {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+
+  padding: var(--fs-spacing-2) 0;
+  border-top: var(--fs-border-width) solid #e5e5e5;
+
+  display: flex;
+  align-items: center;
+
+  [data-fs-addresses-line-icon] {
+    color: #0068d7;
+    margin-right: var(--fs-spacing-1);
+  }
+
+  [data-fs-addresses-line-name] {
+    width: 25%;
+    margin-right: var(--fs-spacing-3);
+    font-weight: var(--fs-text-weight-medium);
+    font-size: var(--fs-text-size-1);
+    line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+    text-decoration: none;
+    cursor: pointer;
+    color: #1f1f1f;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [data-fs-toggle] {
+    margin-left: auto;
+    margin-right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+  }
+
+  [data-fs-addresses-dropdown-trigger] {
+    cursor: pointer;
+
+    [data-fs-addresses-dropdown-trigger-icon] {
+      color: #707070;
+    }
+  }
+}

package/src/components/AddressesCard/AddressesCard.tsx

@@ -1,89 +1,132 @@
 import {
-  IconButton, Icon, Toggle, Dropdown,
+  Icon as UIIcon,
+  IconButton,
+  Toggle,
+  Dropdown,
   DropdownItem,
   DropdownMenu,
   DropdownButton,
-} from '@faststore/ui'
+} from "@faststore/ui";
 import Link from "next/link";
 
-import { Card, CardBody, CardFooter, CardHeader } from '../Card'
-import * as Icons from "../Icons";
-
-export type AddressInformation = {
-  addressId: string,
-  street: string,
-  addressType: string,
-  isActive: boolean,
-}
+import { Card, CardBody, CardFooter, CardHeader } from "../Card";
+import { Tag } from "../Tag/Tag";
+import { useRouter } from "next/router";
+import { AddressData } from "../../types/AddressData";
+import { Icon } from "../Icon";
 
 type AddressesCardProps = {
-  addresses: AddressInformation[]
-}
+  addresses: AddressData[];
+};
 
 export default function AddressesCard({ addresses }: AddressesCardProps) {
+  const { push } = useRouter();
+
   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) => {
+    <Card>
+      <CardHeader>
+        <div data-fs-card-title>
+          Addresses <span data-fs-card-title-counter>{addresses.length}</span>
+        </div>
+        <IconButton
+          icon={<UIIcon name="PlusCircle" width={20} height={20} />}
+          aria-label={`$addresses action`}
+          onClick={() => {}}
+        />
+      </CardHeader>
+      <CardBody>
+        {addresses.length &&
+          addresses.slice(0, 5).map((address) => {
             return (
-              <div>
+              <div key={address.id}>
                 <hr data-fs-divider />
 
-                <div data-fs-card-row key={address.addressId}>
+                <div data-fs-card-row key={address.id}>
                   <div data-fs-card-information-row>
                     <div data-fs-card-information-icon>
-                      <Icons.Address height={24} width={24} />
+                      <Icon name="LocalPostOffice" height={24} width={24} />
                     </div>
                     <div data-fs-card-information-title>
-                      <span >{address.street}</span>
+                      <span title={address.name}>{address.name}</span>
                     </div>
+
                     <div data-fs-card-information-type>
-                      <span data-fs-shipping-tag>{address.addressType}</span>
+                      {address.tags.map((tag) => (
+                        <Tag>{tag}</Tag>
+                      ))}
                     </div>
                   </div>
                   <div data-fs-card-action-row>
-                    <Toggle id="addressActive" defaultChecked={address.isActive} />
+                    <Toggle
+                      id="addressActive"
+                      defaultChecked={address.status}
+                    />
 
                     <Dropdown>
-                      <DropdownButton><Icon name='DotsThree' data-fs-menu-action-button /></DropdownButton>
+                      <DropdownButton>
+                        <UIIcon name="DotsThree" data-fs-menu-action-button />
+                      </DropdownButton>
                       <DropdownMenu>
-                        <DropdownItem>
-                          <Icon name="ArrowSquareOut" data-fs-dropdown-icon />Open
+                        <DropdownItem data-fs-card-dropdown-item>
+                          <Icon name="ArrowSquareOut" data-fs-dropdown-icon />
+                          Open
                         </DropdownItem>
                         <DropdownItem>
-                          <Icons.Edit width={24} height={24} data-fs-dropdown-icon />Edit
+                          <Icon
+                            name="Edit"
+                            width={24}
+                            height={24}
+                            data-fs-dropdown-icon
+                          />
+                          Edit
                         </DropdownItem>
                         <DropdownItem>
-                          <Icons.Delete width={24} height={24} data-fs-dropdown-icon /> Delete
+                          <Icon
+                            name="Delete"
+                            width={24}
+                            height={24}
+                            data-fs-dropdown-icon
+                          />{" "}
+                          Delete
                         </DropdownItem>
                         <DropdownItem>
                           <div data-fs-dropdown-active-item>
                             <div data-fs-dropdown-active-item-label>
-                              <Icons.Active width={24} height={24} data-fs-dropdown-icon /> Active
+                              <Icon
+                                name="Active"
+                                width={24}
+                                height={24}
+                                data-fs-dropdown-icon
+                              />{" "}
+                              Active
                             </div>
-                            <Toggle id="addressActiveMenu" defaultChecked={address.isActive} data-fs-internal-toggle />
+                            <Toggle
+                              id="addressActiveMenu"
+                              defaultChecked={address.status}
+                              data-fs-internal-toggle
+                            />
                           </div>
                         </DropdownItem>
                       </DropdownMenu>
                     </Dropdown>
                   </div>
                 </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>
-  )
+      </CardBody>
+      <CardFooter>
+        <Link href="/addresses" data-fs-card-footer-link>
+          <span>Manage addresses</span>
+        </Link>
+        <IconButton
+          onClick={() => {
+            push("/addresses");
+          }}
+          icon={<Icon name="CaretRight" data-fs-card-footer-icon />}
+          aria-label="manage-addresses"
+        />
+      </CardFooter>
+    </Card>
+  );
 }