😇Sử dụng gatsby-woocommerce-themes để làm thêm phần dashboad

122KB

gatsby-woocommerce-themes.zip

archive

Open

components\customer-account\index.js

import React, { useState } from "react";
import "./style.css";
import Dashboard from "./dashboard";
import Orders from "./orders";
import { isUserLoggedIn } from "../../utils/functions";
import Logout from "./logout";
import Addresses from "./addresses";
import AccountDetails from "./account-details";
const auth = isUserLoggedIn();
const tabItems = [
  {
    id: 1,
    title: "Dashboard",
    icon: "tabitem__icon tab-dashboard",
    content: <Dashboard authData={auth} />,
  },
  {
    id: 2,
    title: "Orders",
    icon: "tabitem__icon tab-users",
    content: <Orders authData={auth} />,
  },
  {
    id: 3,
    title: "Addresses",
    icon: "tabitem__icon tab-addresses",
    content: <Addresses authData={auth} />,
  },
  {
    id: 4,
    title: "Account Details",
    icon: "tabitem__icon tab-account-details",
    content: <AccountDetails authData={auth} />,
  },
  {
    id: 5,
    title: "Logout",
    icon: "tabitem__icon tab-logout",
    content: "",
  },
];
const TabItemComponent = ({
  icon = "",
  title = "",
  onItemClicked = () => console.error("You passed no action to the component"),
  isActive = false,
}) => {
  return (
    <div className={isActive ? "tabitem" : "tabitem tabitem--inactive"}>
      <button
        onClick={onItemClicked}
        style={{ width: '100%' }}
      >
        <i className={icon} />
        <p className="tabitem__title">{title}</p>
      </button>
    </div>
  );
};
const CustomerAccount = ({ handleLogout }) => {
  const [active, setActive] = useState(1);
  return (
    <div className="row">
      <div className="account-details-menu col-3">
        {tabItems.map(({ id, icon, title }) =>
          5 === id ? (
            <Logout key={title} handleLogout={handleLogout} />
          ) : (
            <TabItemComponent
              key={title}
              icon={icon}
              title={title}
              onItemClicked={() => setActive(id)}
              isActive={active === id}
            />
          )
        )}
      </div>
      <div className="account-details-content card col-9 px-0">
        {tabItems.map(({ id, content }) => {
          return active === id ? <div key={id}>{content}</div> : "";
        })}
      </div>
    </div>
  );
};
export default CustomerAccount;

components\customer-account\dashboard\index.js

import React from "react";
import { isEmpty } from "lodash";
const Dashboard = ({ authData }) => {
  if (isEmpty(authData)) {
    return null;
  }
  const { user } = authData;
  return (
    <div className="card-body">
      <div className="">
        {!isEmpty(user.firstName) || !isEmpty(user.lastName) ? (
          <p>
            Hello{" "}
            <strong>
              {user.firstName} {user.lastName}!
            </strong>
          </p>
        ) : (
          <p>
            Hello <strong>{user.username}!</strong>
          </p>
        )}
        <section>
          From your account dashboard you can view your recent orders, manage
          your shipping and billing addresses
        </section>
      </div>
    </div>
  );
};
export default Dashboard;

components\customer-account\orders\index.js

import React from "react";
import { useQuery } from "@apollo/client";
import GET_CUSTOMER_ORDER from "../../../queries/get-customer-orders";
import { isEmpty } from "lodash";
import { getFormattedDate } from "../../../utils/functions";
import Link from 'gatsby-link'
const Orders = ({ authData }) => {
  const {
    user: { id },
  } = authData;
  // Get Cart Data.
  const { data } = useQuery(GET_CUSTOMER_ORDER, {
    variables: {
      id: id,
    },
  });
  if (isEmpty(data)) {
    return null;
  }
  const {
    customer: { orders },
  } = data;
  return (
    <div className="">
      {!isEmpty(orders.edges)
        ? orders.edges.map((order) => {
            return (
              <div className="" key={order.node.orderKey}>
                <div className="card-header">
                  <h4>Order #{order.node.orderKey}</h4>
                  <time>Order Placed: {getFormattedDate(order.node.date)}</time>
                  <div>Payment Method: {order.node.paymentMethodTitle}</div>
                  <div>Order Status: {order.node.status}</div>
                  <div>Total: {order.node.total}</div>
                </div>
                <div className="card-body">
                  {order.node.lineItems.edges.map((item) => {
                    return (
                      <div className="order-item" key={item.node.product.id}>
                        <h5>{item.node.product.name}</h5>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })
        : (
        	<div className="p-3">
		        <h4 className="mb-3">No orders found</h4>
		        <Link to="/"><button className="btn-outline-dark" style={{ fontSize: '12px', padding: '8px 12px' }}>Shop now</button></Link>
	        </div>
	      )}
    </div>
  );
};
export default Orders;

components\customer-account\logout\index.js

import React from "react";
const Logout = ({ handleLogout }) => {
  return (
    <div className="tabitem tabitem--inactive">
      <button onClick={handleLogout} className="logout">
        Log out
      </button>
    </div>
  );
};
export default Logout;

components\customer-account\addresses\index.js

import React from "react";
import { useQuery } from "@apollo/client";
import { isEmpty } from "lodash";
import GET_CUSTOMER_ADDRESS from "../../../queries/get-customer-address";
const Addresses = ({ authData }) => {
  const {
    user: { id },
  } = authData;
  // Get Cart Data.
  const { data } = useQuery(GET_CUSTOMER_ADDRESS, {
    variables: {
      id: id,
    },
  });
  if (isEmpty(data)) {
    return null;
  }
  const {
    customer: { billing, shipping },
  } = data;
  return (
    <div className="card-body addresses">
      {!isEmpty(billing) ? (
        <div className="billing-address">
          <h4>Billing Address</h4>
          {!isEmpty(billing.address1) ? <p>{billing.address1}</p> : null}
          {!isEmpty(billing.address2) ? <p>{billing.address2}</p> : null}
          {!isEmpty(billing.city) ? <p>{billing.city}</p> : null}
          {!isEmpty(billing.state) ? <p>{billing.state}</p> : null}
          {!isEmpty(billing.country) ? <p>{billing.country}</p> : null}
        </div>
      ) : null}
      {!isEmpty(shipping) ? (
        <div className="shipping-address">
          <h4>Shipping Address</h4>
          {!isEmpty(shipping.address1) ? <p>{shipping.address1}</p> : null}
          {!isEmpty(shipping.address2) ? <p>{shipping.address2}</p> : null}
          {!isEmpty(shipping.city) ? <p>{shipping.city}</p> : null}
          {!isEmpty(shipping.state) ? <p>{shipping.state}</p> : null}
          {!isEmpty(shipping.country) ? <p>{shipping.country}</p> : null}
        </div>
      ) : null}
    </div>
  );
};
export default Addresses;

components\customer-account\account-details\index.js

import React from "react";
import { isEmpty } from "lodash";
const AccountDetails = ({ authData }) => {
  if (isEmpty(authData)) {
    return null;
  }
  const { user } = authData;
  return (
    <div className="card-body">
      {!isEmpty(user.firstName) ? (
        <p>
          First Name: <strong>{user.firstName}</strong>
        </p>
      ) : null}
      {!isEmpty(user.lastName) ? (
        <p>
          Last Name: <strong>{user.lastName}</strong>
        </p>
      ) : null}
      {!isEmpty(user.username) ? (
        <p>
          Username: <strong>{user.username}</strong>
        </p>
      ) : null}
      {!isEmpty(user.email) ? (
        <p>
          Email: <strong>{user.email}</strong>
        </p>
      ) : null}
    </div>
  );
};
export default AccountDetails;

components\customer-account\style.css

.tabitem {
  cursor: pointer;
  padding: 5px 0;
}
.tabitem--inactive {
  opacity: 0.5;
  filter: grayscale(100%);
}
.tabitem__icon {
  font-size: 22px;
}
.tabitem__title {
  font-size: 16px;
  margin: 10px 0;
}
.content {
  margin-top: 15px;
}
.account-details-menu {
  .logout {
    border: none;
    padding: 0;
    margin: 10px 0;
    display: block;
    width: 100%;
    text-align: left;
  }
}
.account-details-content {
  min-height: 355px;
}