updated styling + snowflake (#401)

uselotus · Dec 22, 2022 · e706534 · e706534
1 parent 3de055e
commit e706534
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 17 deletions.
diff --git a/frontend/src/components/Customers/CustomerInfo.tsx b/frontend/src/components/Customers/CustomerInfo.tsx
@@ -101,7 +101,7 @@ const CustomerInfoView: FC<any> = ({ data, cost_data, onDateChange }) => {
     seriesField: "metric",
     groupField: "type",
     colorField: "type", // or seriesField in some cases
-    color: ["#C3986B", "#3F3F40"],
+    color: ["#C3986B", "#33658A", "#D9D9D9", "#171412", "#547AA5"],
 
     tooltip: {
       fields: ["type"],
@@ -114,7 +114,7 @@ const CustomerInfoView: FC<any> = ({ data, cost_data, onDateChange }) => {
         <h2 className="pb-4 pt-4 font-bold text-main">Customer Details</h2>
         <div className="">
           {" "}
-          Date Range :{"   "}
+          Date Range :{"    "}
           <Select defaultValue={"1"} onChange={onSwitch}>
             <Select.Option value="1">Last 30 Days</Select.Option>
             <Select.Option value="2">Last 60 Days</Select.Option>
@@ -129,7 +129,8 @@ const CustomerInfoView: FC<any> = ({ data, cost_data, onDateChange }) => {
             <b>Customer Name:</b> {data.customer_name ?? "N/A"}
           </p>
           <p>
-            <b>Customer ID:</b> {<span class="font-menlo">{data.customer_id}</span> ?? "N/A"}
+            <b>Customer ID:</b>{" "}
+            {<span className="font-menlo">{data.customer_id}</span> ?? "N/A"}
           </p>
           <p>
             <b>Email:</b> {data.email ?? "N/A"}
@@ -166,8 +167,16 @@ const CustomerInfoView: FC<any> = ({ data, cost_data, onDateChange }) => {
             <b>Amount Due On Next Invoice:</b> {data?.default_currency?.symbol}
             {invoiceData?.invoices[0].cost_due.toFixed(2)}
           </p>
+          <p>
+            <b>Payment Method Connected:</b>{" "}
+            {data.has_payment_method ? (
+              <Tag color="green">True</Tag>
+            ) : (
+              <Tag color="red">False</Tag>
+            )}
+          </p>
         </div>
-        <div className="grid grid-cols-2 justify-items-center  gap-8 py-4 border-2 border-solid rounded border-[#EAEAEB]">
+        <div className="grid grid-cols-3 place-items-center gap-8 py-4">
           <div>
             <p className=" mb-4">Earned Revenue</p>
             {cost_data === undefined ? (

diff --git a/frontend/src/components/Dashboard/CustomerByPlanPie.tsx b/frontend/src/components/Dashboard/CustomerByPlanPie.tsx
@@ -24,6 +24,7 @@ export const CustomerByPlanPie = (props: any) => {
     data: data?.results,
     angleField: "num_customers",
     colorField: "plan_name",
+    color: ["#33658A", "#547AA5", "#C3986B", "#D9D9D9", "#171412"],
     radius: 1,
     innerRadius: 0.6,
     label: {

diff --git a/frontend/src/components/Experiments/BacktestSubsitution.tsx b/frontend/src/components/Experiments/BacktestSubsitution.tsx
@@ -38,6 +38,8 @@ const BacktestSubstitution: FC<Props> = ({ substitution }) => {
     angleField: "new_plan_revenue",
     colorField: "metric_name",
     radius: 1,
+    color: ["#33658A", "#547AA5", "#C3986B", "#D9D9D9", "#171412"],
+
     innerRadius: 0.5,
     label: {
       type: "inner",
@@ -75,6 +77,8 @@ const BacktestSubstitution: FC<Props> = ({ substitution }) => {
     data: substitution.results.revenue_by_metric,
     angleField: "original_plan_revenue",
     colorField: "metric_name",
+    color: ["#33658A", "#547AA5", "#C3986B", "#D9D9D9", "#171412"],
+
     radius: 1,
     innerRadius: 0.5,
     label: {

diff --git a/frontend/src/components/Settings/settings/components/AppCard.tsx b/frontend/src/components/Settings/settings/components/AppCard.tsx
@@ -59,13 +59,18 @@ export const AppCard = ({
           }
           description={description}
         />
-        <div className="separator pt-4" />
-        {connected && (
+        {connected ? (
           <div className="flex justify-end pt-4">
             <Link to={title.toLowerCase()}>
-              <h3 className="text-darkgold">View Integration</h3>
+              <h3 className="text-darkgold hover:text-black">
+                View Integration
+              </h3>
             </Link>
           </div>
+        ) : (
+          <div className="flex justify-end pt-4">
+            <h3 className="">-</h3>
+          </div>
         )}
       </Card>
     </div>

diff --git a/frontend/src/components/Settings/settings/tabs/GeneralTab.tsx b/frontend/src/components/Settings/settings/tabs/GeneralTab.tsx
@@ -140,7 +140,12 @@ const GeneralTab: FC = () => {
 
   return (
     <div>
-      <Typography.Title level={2}>Organization Settings</Typography.Title>
+      <div className="flex justify-between w-6/12">
+        <Typography.Title level={2}>Organization Settings</Typography.Title>
+        <Button onClick={() => setIsEdit(true)} className="justify-self-end">
+          Edit
+        </Button>
+      </div>
 
       <Divider />
 
@@ -167,15 +172,19 @@ const GeneralTab: FC = () => {
               "N/A"
             )}
           </p>
+          <p className="text-[16px] space-y-2">
+            <b>Billing address:</b> <p>1292 Lane Place</p>
+            <p>Cambridge MA</p>
+            <p>USA 92342</p>
+          </p>
+          <p className="text-[16px]">
+            <b>Invoice Grace Period:</b> 15 days
+          </p>
+          <p className="text-[16px]">
+            <b>Organization Tax Rate:</b> 0%
+          </p>
 
-          <div className="">
-            <Button
-              onClick={() => setIsEdit(true)}
-              className="justify-self-end"
-            >
-              Edit
-            </Button>
-          </div>
+          <div className=" flex justify-end"></div>
         </div>
       )}
       <Modal
@@ -224,6 +233,9 @@ const GeneralTab: FC = () => {
                 })}
               />
             </Form.Item>
+            <Form.Item label="Billing Address" name="billing_address">
+              <Input disabled={true} />
+            </Form.Item>
           </Form>
         </div>
       </Modal>

diff --git a/frontend/src/components/Settings/settings/tabs/IntegrationsTab.tsx b/frontend/src/components/Settings/settings/tabs/IntegrationsTab.tsx
@@ -29,7 +29,7 @@ const IntegrationsTab: FC = () => {
   return (
     <div>
       <Typography.Title level={2}>Integrations</Typography.Title>
-      <Row gutter={[24, 24]}>
+      <Row gutter={[24, 24]} className="flex items-stretch">
         {data &&
           data !== undefined &&
           data.map((item, index) => {
@@ -50,6 +50,15 @@ const IntegrationsTab: FC = () => {
               </Col>
             );
           })}
+        <Col span={6} className="h-full">
+          <AppCard
+            connected={true}
+            title="Snowflake"
+            description="Sync your data to your Snowflake warehouse"
+            icon={integrationsMap["snowflake"].icon}
+            handleClick={() => navigate("/settings/integrations/snowflake")}
+          />
+        </Col>
       </Row>
       <Divider />
     </div>

diff --git a/frontend/src/types/customer-type.ts b/frontend/src/types/customer-type.ts
@@ -13,6 +13,7 @@ export interface CustomerType {
   subscriptions: SubscriptionType[];
   integrations: object;
   default_currency: PricingUnit;
+  has_payment_method: boolean;
 }
 
 export interface LightweightCustomerType

diff --git a/frontend/src/types/payment-processor-type.ts b/frontend/src/types/payment-processor-type.ts
@@ -26,4 +26,9 @@ export const integrationsMap = {
     description:
       "Charge and invoice your customers through your Stripe account",
   },
+  snowflake: {
+    name: "Snowflake",
+    icon: "https://i.imgur.com/iNCQmMu.png",
+    description: "Sync data to your Snowflake warehouse",
+  },
 };