@vtex/faststore-plugin-buyer-portal 1.0.12 → 1.0.13

package/package.json

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

package/plugin.config.js

@@ -29,5 +29,9 @@ module.exports = {
       path: "/user/[id]",
       appLayout: false,
     },
+    profile: {
+      path: "/profile",
+      appLayout: false,
+    }
   },
 };

package/src/components/AddressesCard/AddressesCard.tsx

@@ -31,7 +31,7 @@ export default function AddressesCard({ addresses }: AddressesCardProps) {
         <IconButton
           icon={<UIIcon name="PlusCircle" width={20} height={20} />}
           aria-label={`$addresses action`}
-          onClick={() => {}}
+          onClick={() => { }}
         />
       </CardHeader>
       <CardBody>
@@ -52,7 +52,7 @@ export default function AddressesCard({ addresses }: AddressesCardProps) {
 
                     <div data-fs-card-information-type>
                       {address.tags.map((tag) => (
-                        <Tag>{tag}</Tag>
+                        <Tag key={`${address.id}-${tag}`}>{tag}</Tag>
                       ))}
                     </div>
                   </div>

package/src/components/ProfileCard/ProfileCard.tsx

@@ -39,13 +39,15 @@ export default function ProfileCard({
         </div>
       </CardBody>
       <CardFooter>
-        <Link href="/" data-fs-card-footer-link>
+        <Link href="/profile" data-fs-card-footer-link>
           <span>View Profile</span>
         </Link>
-        <IconButton
-          icon={<Icon name="CaretRight" data-fs-card-footer-icon />}
-          aria-label="view-profile"
-        />
+        <Link href="/profile">
+          <IconButton
+            icon={<Icon name="CaretRight" data-fs-card-footer-icon />}
+            aria-label="view-profile"
+          />
+        </Link>
       </CardFooter>
     </Card>
   );

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -0,0 +1,64 @@
+import { InternalTopBar } from "../../components/InternalTopbar/InternalTopbar";
+import { getTreeDepth } from "../../utils/getTreeDepth";
+import { OrgUnitsHierarchyTree } from "../../components/OrgUnitsHierarchyTree/OrgUnitsHierarchyTree";
+import { Structure } from "../../components/HierarchyTree/HierarchyTree";
+import { ContractData } from "../../types/ContractData";
+import { GlobalLayout } from "../GlobalLayout/GlobalLayout";
+import { Icon } from "../../components/Icon";
+
+export type ProfileLayoutProps = {
+  data: ContractData;
+};
+
+export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
+  return (
+    <GlobalLayout>
+      <section data-fs-bp-profile>
+        <InternalTopBar
+          rootName="Stars Corp Inc."
+          title={
+            <div data-fs-bp-profile-title>
+              Profile
+            </div>
+          }
+          showActions={false}
+        />
+
+        <div data-fs-bp-profile-details>
+          <span data-fs-bp-profile-details-title>
+            Details
+          </span>
+          <hr data-fs-bp-profile-divider />
+
+          <div data-fs-bp-profile-details-row>
+            <span data-fs-bp-profile-details-row-label>Name</span>
+            <span data-fs-bp-profile-details-row-value>{data.name}</span>
+          </div>
+
+          <hr data-fs-bp-profile-divider />
+
+          <div data-fs-bp-profile-details-row>
+            <span data-fs-bp-profile-details-row-label>Email</span>
+            <span data-fs-bp-profile-details-row-value>{data.email}</span>
+          </div>
+
+          <hr data-fs-bp-profile-divider />
+
+          <div data-fs-bp-profile-details-row>
+            <span data-fs-bp-profile-details-row-label>ID</span>
+            <span data-fs-bp-profile-details-row-value>{data.id}</span>
+          </div>
+
+          <hr data-fs-bp-profile-divider />
+
+          <div data-fs-bp-profile-details-row>
+            <span data-fs-bp-profile-details-row-label>Creation Date</span>
+            <span data-fs-bp-profile-details-row-value>{data.creationDate}</span>
+          </div>
+
+          <hr data-fs-bp-profile-divider />
+        </div>
+      </section>
+    </GlobalLayout>
+  );
+};

package/src/layouts/ProfileLayout/profile-layout.scss

@@ -0,0 +1,49 @@
+[data-fs-bp-profile]{
+  @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
+  @import "../../components/InternalTopbar/internal-top-bar.scss";
+
+  width: 100%;
+
+  [data-fs-bp-profile-details-title] {
+    font-weight: var(--fs-text-weight-semibold);
+    size: var(--fs-spacing-3);
+    line-height: var(--fs-spacing-4);
+
+    display: flex;
+    justify-content: space-between;
+    padding: var(--fs-spacing-4);
+    align-items: center;
+  }
+
+  [data-fs-bp-profile-divider] {
+    border: 0.5px solid #e0e0e0;
+  }
+
+  [data-fs-button][data-fs-button-variant="primary"] [data-fs-button-wrapper] {
+    border-radius: var(--fs-border-radius-pill);
+  }
+
+  [data-fs-bp-profile-details-row] {
+    display: flex;
+    padding: var(--fs-spacing-4);
+    font-weight: var(--fs-text-weight-medium);
+    size: var(--fs-text-size-1);
+    line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+
+    [data-fs-bp-profile-details-row-label] {
+      width: 30%;
+
+      color: #707070;
+    }
+
+    [data-fs-bp-profile-details-row-value] {
+      width: 70%;
+      color: #000;
+    }
+  }
+
+  [data-fs-bp-profile-details] {
+    padding: 0 calc(var(--fs-spacing-8) + var(--fs-spacing-0));
+  }
+}
+

package/src/layouts/index.scss

@@ -6,3 +6,4 @@
 @import "./ContractsLayout/contracts-layout.scss";
 @import "./UsersLayout/users-layout.scss";
 @import "./UserDetailsLayout/user-details-layout.scss";
+@import "./ProfileLayout/profile-layout.scss"

package/src/mock/contracts-data.ts

@@ -2,30 +2,34 @@ import { ContractData } from "../types/ContractData";
 
 export const contractsData: ContractData[] = [
   // Uncomment to test with a single contract
-  // contracts: [{
-  //   name: 'ByTech',
-  //   email: 'bytech@demo.com',
-  //   id: '12-32-DDDD',
-  //   status: false,
-  // }],
-
-  // Comment to test with single contract
   {
     name: "ByTech",
     email: "bytech@demo.com",
     id: "12-32-DDDD",
     status: false,
-  },
-  {
-    name: "ByTech South",
-    email: "bytech@demo.com",
-    id: "12-32-AAAA",
-    status: true,
-  },
-  {
-    name: "Stellar Inc",
-    email: "Stellar@stellar.com",
-    id: "32-32-32",
-    status: true,
-  },
+    creationDate: "October 10, 2024"
+  }
+
+  // Comment to test with single contract
+  // {
+  //   name: "ByTech",
+  //   email: "bytech@demo.com",
+  //   id: "12-32-DDDD",
+  //   status: false,
+  //   creationDate: "October 10, 2024"
+  // },
+  // {
+  //   name: "ByTech South",
+  //   email: "bytech@demo.com",
+  //   id: "12-32-AAAA",
+  //   status: true,
+  //   creationDate: "May 5, 2024"
+  // },
+  // {
+  //   name: "Stellar Inc",
+  //   email: "Stellar@stellar.com",
+  //   id: "32-32-32",
+  //   status: true,
+  //   creationDate: "January 1, 2025"
+  // },
 ];

package/src/pages/profile.tsx

@@ -0,0 +1,26 @@
+import { ProfileLayout } from "../layouts/ProfileLayout/ProfileLayout";
+import {
+  getContractsService,
+  GetContractsServiceProps,
+} from "../services/get-contracts.service";
+import { ContractData } from "../types/ContractData";
+
+export type ContractsPageData = { data: ContractData };
+
+export type ContractsPageContext = {
+  query: GetContractsServiceProps;
+};
+
+export async function loader({
+  query,
+}: ContractsPageContext): Promise<ContractsPageData> {
+  const contracts = await getContractsService(query)
+
+  return { data: contracts[0] };
+}
+
+const ContractsPage = ({ data }: ContractsPageData) => (
+  <ProfileLayout data={data} />
+);
+
+export default ContractsPage;

package/src/types/ContractData.ts

@@ -3,4 +3,5 @@ export type ContractData = {
   email: string;
   id: string;
   status: boolean;
+  creationDate: string;
 };