@vtex/faststore-plugin-buyer-portal 1.0.16 → 1.0.18

package/package.json

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

package/plugin.config.js

@@ -32,6 +32,11 @@ module.exports = {
     profile: {
       path: "/profile",
       appLayout: false,
-    }
+    },
+  },
+  apis: {
+    "new-route": {
+      path: "/new-route",
+    },
   },
 };

package/src/apis/new-route.ts

@@ -0,0 +1,7 @@
+import { NextApiRequest, NextApiResponse } from "next/types";
+
+// TODO: Remove when Plugin API feature be merged
+export default function handle(req: NextApiRequest, res: NextApiResponse) {
+  console.log(req);
+  return res.json({ hello: "from plugin" });
+}

package/src/components/AddressLine/AddressLine.tsx

@@ -19,20 +19,21 @@ export const AddressLine = ({
   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>
-    ))}
+    <Link href={href} data-fs-addresses-line-link>
+      <Icon
+        name="LocalPostOffice"
+        width={20}
+        height={20}
+        data-fs-addresses-line-icon
+      />
+      <span title={name} data-fs-addresses-line-name>
+        {name}
+      </span>
 
+      {tags.map((tag, index) => (
+        <Tag key={index}>{tag}</Tag>
+      ))}
+    </Link>
     <Toggle id={id} defaultChecked={status} />
     <button data-fs-addresses-dropdown-trigger>
       <Icon

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

@@ -3,7 +3,6 @@
   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;
@@ -11,9 +10,25 @@
   display: flex;
   align-items: center;
 
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  [data-fs-addresses-line-link] {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    flex: 1;
+
+    &:visited {
+      color: #1f1f1f;
+    }
+  }
+
   [data-fs-addresses-line-icon] {
     color: #0068d7;
-    margin-right: var(--fs-spacing-1);
+    margin: 10px;
+    margin-right: 20px;
   }
 
   [data-fs-addresses-line-name] {
@@ -37,6 +52,12 @@
 
   [data-fs-addresses-dropdown-trigger] {
     cursor: pointer;
+    height: 40px;
+    width: 40px;
+    border-radius: 1000px;
+    &:hover {
+      background-color: #e0e0e0;
+    }
 
     [data-fs-addresses-dropdown-trigger-icon] {
       color: #707070;

package/src/components/AddressesCard/AddressesCard.tsx

@@ -1,132 +1,104 @@
 import {
-  Icon as UIIcon,
-  IconButton,
   Toggle,
   Dropdown,
   DropdownItem,
   DropdownMenu,
   DropdownButton,
 } from "@faststore/ui";
-import Link from "next/link";
-
-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";
+import { HomeCard } from "../HomeCard/HomeCard";
 
 type AddressesCardProps = {
   addresses: AddressData[];
 };
 
 export default function AddressesCard({ addresses }: AddressesCardProps) {
-  const { push } = useRouter();
-
   return (
-    <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 key={address.id}>
-                <hr data-fs-divider />
+    <HomeCard
+      footerLink="/addresses"
+      footerMessage="Manage addresses"
+      title="Addresses"
+      subTitle={addresses.length ?? 0}
+      onPlusIconClick={() => {}}
+    >
+      {addresses.length &&
+        addresses.slice(0, 3).map((address) => {
+          return (
+            <div key={address.id}>
+              <hr data-fs-divider />
 
-                <div data-fs-card-row key={address.id}>
-                  <div data-fs-card-information-row>
-                    <div data-fs-card-information-icon>
-                      <Icon name="LocalPostOffice" height={24} width={24} />
-                    </div>
-                    <div data-fs-card-information-title>
-                      <span title={address.name}>{address.name}</span>
-                    </div>
+              <div data-fs-card-row key={address.id}>
+                <div data-fs-card-information-row>
+                  <div data-fs-card-information-icon>
+                    <Icon name="LocalPostOffice" height={24} width={24} />
+                  </div>
+                  <div data-fs-card-information-title>
+                    <span title={address.name}>{address.name}</span>
+                  </div>
 
-                    <div data-fs-card-information-type>
-                      {address.tags.map((tag) => (
-                        <Tag key={`${address.id}-${tag}`}>{tag}</Tag>
-                      ))}
-                    </div>
+                  <div data-fs-card-information-type>
+                    {address.tags.map((tag) => (
+                      <Tag key={`${address.id}-${tag}`}>{tag}</Tag>
+                    ))}
                   </div>
-                  <div data-fs-card-action-row>
-                    <Toggle
-                      id="addressActive"
-                      defaultChecked={address.status}
-                    />
+                </div>
+                <div data-fs-card-action-row>
+                  <Toggle id="addressActive" defaultChecked={address.status} />
 
-                    <Dropdown>
-                      <DropdownButton>
-                        <UIIcon name="DotsThree" data-fs-menu-action-button />
-                      </DropdownButton>
-                      <DropdownMenu>
-                        <DropdownItem data-fs-card-dropdown-item>
-                          <Icon name="ArrowSquareOut" data-fs-dropdown-icon />
-                          Open
-                        </DropdownItem>
-                        <DropdownItem>
-                          <Icon
-                            name="Edit"
-                            width={24}
-                            height={24}
-                            data-fs-dropdown-icon
-                          />
-                          Edit
-                        </DropdownItem>
-                        <DropdownItem>
-                          <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>
-                              <Icon
-                                name="Active"
-                                width={24}
-                                height={24}
-                                data-fs-dropdown-icon
-                              />{" "}
-                              Active
-                            </div>
-                            <Toggle
-                              id="addressActiveMenu"
-                              defaultChecked={address.status}
-                              data-fs-internal-toggle
-                            />
+                  <Dropdown>
+                    <DropdownButton data-fs-card-row-dropdown-button>
+                      <Icon name="MoreVert" data-fs-menu-action-button />
+                    </DropdownButton>
+                    <DropdownMenu>
+                      <DropdownItem data-fs-card-dropdown-item>
+                        <Icon name="ArrowSquareOut" data-fs-dropdown-icon />
+                        Open
+                      </DropdownItem>
+                      <DropdownItem>
+                        <Icon
+                          name="Edit"
+                          width={24}
+                          height={24}
+                          data-fs-dropdown-icon
+                        />
+                        Edit
+                      </DropdownItem>
+                      <DropdownItem>
+                        <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>
+                            <Icon
+                              name="Active"
+                              width={24}
+                              height={24}
+                              data-fs-dropdown-icon
+                            />{" "}
+                            Active
                           </div>
-                        </DropdownItem>
-                      </DropdownMenu>
-                    </Dropdown>
-                  </div>
+                          <Toggle
+                            id="addressActiveMenu"
+                            defaultChecked={address.status}
+                            data-fs-internal-toggle
+                          />
+                        </div>
+                      </DropdownItem>
+                    </DropdownMenu>
+                  </Dropdown>
                 </div>
               </div>
-            );
-          })}
-      </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>
+            </div>
+          );
+        })}
+    </HomeCard>
   );
 }

package/src/components/Card/card.scss

@@ -21,6 +21,9 @@
   border: var(--fs-card-border-width) solid rgba(224, 224, 224, 1);
   border-radius: 12px;
   overflow: hidden;
+  height: 330px;
+  display: flex;
+  flex-direction: column;
 
   [data-fs-card-header] {
     border-top-left-radius: 12px;
@@ -29,7 +32,7 @@
     background-color: white;
     align-items: center;
 
-    padding: var(--fs-card-header-padding);
+    padding: 20px;
     font-weight: var(--fs-card-header-font-weight);
     display: flex;
     justify-content: space-between;
@@ -42,29 +45,41 @@
       color: var(--fs-card-header-icon-color);
     }
 
+    [data-fs-card-title] {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+    }
+
     [data-fs-card-title-counter] {
       font-weight: 600;
-      margin-left: 0.75rem;
+      margin-left: 8px;
       color: #adadad;
     }
   }
 
   [data-fs-card-body] {
-    padding: var(--fs-card-body-padding);
-    padding-bottom: 0px;
+    padding: 20px;
+    padding-bottom: 12px;
 
     [data-fs-profile-card-row] {
       display: flex;
       flex-direction: row;
-      gap: 2.5rem;
-      padding-top: 1.25rem;
-      padding-bottom: 1.25rem;
+      gap: 40px;
+      padding-top: 22px;
+      padding-bottom: 22px;
+      font-size: 14px;
+      line-height: 20px;
 
       [data-fs-card-row-label] {
         font-weight: 500;
-        width: 100px;
+        width: 72px;
         color: gray;
       }
+
+      h1 {
+        font-weight: 500;
+      }
     }
 
     [data-fs-card-row] {
@@ -73,12 +88,7 @@
       gap: 2.5rem;
       padding-top: 0.5rem;
       padding-bottom: 0.5rem;
-
-      [data-fs-card-row-label] {
-        font-weight: 500;
-        width: 100px;
-        color: gray;
-      }
+      height: 64px;
     }
 
     [data-fs-card-information-row] {
@@ -88,8 +98,9 @@
       width: 100%;
 
       [data-fs-card-information-icon] {
+        padding: 8px;
         color: #0366dd;
-        margin-right: 1rem;
+        margin-right: 10px;
       }
 
       [data-fs-card-information-title] {
@@ -97,8 +108,28 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        margin-right: 1rem;
-        max-width: 220px;
+        margin-right: 30px;
+        max-width: 188px;
+        font-size: 14px;
+        line-height: 20px;
+        text-overflow: ellipsis;
+        word-wrap: normal;
+        font-weight: 500;
+
+        h1 {
+          overflow: hidden;
+
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          word-wrap: normal;
+          width: 100%;
+        }
+      }
+
+      [data-fs-card-row-label] {
+        font-size: 14px;
+        font-weight: 400;
+        color: #858585;
       }
 
       [data-fs-card-information-type] {
@@ -122,10 +153,6 @@
       margin-left: auto;
     }
 
-    [data-fs-menu-action-button] {
-      rotate: 90deg;
-    }
-
     [data-fs-card-body-empty-state] {
       display: flex;
       flex-direction: column;
@@ -138,13 +165,18 @@
       }
     }
 
+    [data-fs-profile-name] {
+      font-weight: 500;
+    }
+
     [data-fs-email-text] {
       color: #0366dd;
+      font-weight: 500;
     }
   }
 
   [data-fs-divider] {
-    border: 1px solid #e0e0e0;
+    border: 0.5px solid #e0e0e0;
   }
 
   [data-fs-card-footer] {
@@ -155,13 +187,26 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-top: auto;
 
     [data-fs-card-footer-link] {
       font-weight: 500;
-      line-height: 14px;
+      font-size: 14px;
+      line-height: 20px;
       color: #0366dd;
       text-decoration: none;
     }
+    [data-fs-button-wrapper] {
+      height: 40px !important;
+      width: 40px !important;
+    }
+    [data-fs-icon-button] {
+      display: inline-flex;
+      height: 40px !important;
+      min-height: 40px !important;
+      width: 40px !important;
+      overflow: hidden;
+    }
 
     [data-fs-card-footer-icon] {
       color: grey;