From 2f8f3ba3ab6b016f61c91ea27924c2497c8839c6 Mon Sep 17 00:00:00 2001
From: David Axelrod <daxaxelrod@gmail.com>
Date: Sun, 29 Oct 2023 18:48:39 -0400
Subject: [PATCH] scoring setup

---
 .../app/components/users/PublicProfile.tsx    |  2 +-
 .../components/users/profile/UserHeader.tsx   | 18 +++--
 .../users/profile/UserOpenInsureRating.tsx    | 69 ++++++++++++++++---
 .../src/redux/reducers/types/commonTypes.ts   | 14 ++++
 pods/serializers.py                           |  2 +
 5 files changed, 92 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/components/users/PublicProfile.tsx b/frontend/src/app/components/users/PublicProfile.tsx
index 6610fb1a..ccefc810 100644
--- a/frontend/src/app/components/users/PublicProfile.tsx
+++ b/frontend/src/app/components/users/PublicProfile.tsx
@@ -46,7 +46,7 @@ export default function PublicProfile({}) {
                 <Col span={8}>
                     <UserHeader user={user} />
                 </Col>
-                <Col span={8}>
+                <Col span={11}>
                     <UserOpenInsureRating user={user} />
                 </Col>
             </Row>
diff --git a/frontend/src/app/components/users/profile/UserHeader.tsx b/frontend/src/app/components/users/profile/UserHeader.tsx
index bf5be1f2..4b25cfca 100644
--- a/frontend/src/app/components/users/profile/UserHeader.tsx
+++ b/frontend/src/app/components/users/profile/UserHeader.tsx
@@ -10,12 +10,22 @@ const { Title, Paragraph } = Typography;
 export default function UserHeader({ user }: { user: User }) {
     return (
         <div>
-            <Title>
+            <Title style={{ marginBottom: ".25rem" }}>
                 {user?.first_name} {user?.last_name}
             </Title>
-            <Flex gap={10}>
-                {user?.linkedin_url && <LinkedinOutlined />}
-                {user?.twitter_url && <TwitterOutlined />}
+            <Flex
+                gap={10}
+                style={{
+                    backgroundColor: colors.gray1,
+                    marginBottom: ".25rem",
+                }}
+            >
+                {user?.linkedin_url && (
+                    <LinkedinOutlined style={{ color: colors.linkColor }} />
+                )}
+                {user?.twitter_url && (
+                    <TwitterOutlined style={{ color: colors.linkColor }} />
+                )}
             </Flex>
             <Paragraph
                 style={{
diff --git a/frontend/src/app/components/users/profile/UserOpenInsureRating.tsx b/frontend/src/app/components/users/profile/UserOpenInsureRating.tsx
index ab5bf62b..a7a759d7 100644
--- a/frontend/src/app/components/users/profile/UserOpenInsureRating.tsx
+++ b/frontend/src/app/components/users/profile/UserOpenInsureRating.tsx
@@ -1,29 +1,82 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Col, Flex, Progress, Row } from "antd";
 import { User } from "../../../../redux/reducers/types/commonTypes";
 import colors from "../../../constants/colors";
 import { Typography } from "antd";
+import { ReloadOutlined } from "@ant-design/icons";
 
-const { Title } = Typography;
+const { Title, Paragraph } = Typography;
 
 export default function UserOpenInsureRating({ user }: { user: User }) {
-    const trustworthinessScore = 99;
+    const { trustworthiness } = user;
+
+    const hasScore = !!trustworthiness?.total_score;
+
+    const scoreLeaderText = useMemo(() => {
+        if (trustworthiness?.total_score) {
+            if (trustworthiness?.total_score >= 80) {
+                return "Excellent";
+            } else if (trustworthiness?.total_score >= 60) {
+                return "Good";
+            } else if (trustworthiness?.total_score >= 40) {
+                return "Fair";
+            } else if (trustworthiness?.total_score >= 20) {
+                return "Poor";
+            } else {
+                return "Very Poor";
+            }
+        }
+        return "No score yet";
+    }, [trustworthiness?.total_score]);
 
     return (
         <>
             <Flex>
+                <div
+                    style={{
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        zIndex: 1,
+                        display: "flex",
+                    }}
+                >
+                    <ReloadOutlined
+                        style={{ marginRight: 4, color: colors.gray7 }}
+                    />
+                    <Paragraph style={{ marginBottom: 0 }}>Refresh</Paragraph>
+                </div>
                 <Progress
                     type="dashboard"
-                    percent={99}
+                    percent={trustworthiness?.total_score || 0}
                     strokeColor={{
                         "0%": colors.good,
                         "100%": colors.lightGood,
                     }}
+                    format={(percent) => (
+                        <div>
+                            {percent}
+                            <div
+                                style={{
+                                    color: colors.gray8,
+                                    fontSize: 12,
+                                    marginTop: 4,
+                                }}
+                            >
+                                Score
+                            </div>
+                        </div>
+                    )}
                 />
-            </Flex>
-            <Flex>
-                <Col>
-                    <Title level={4}>trustworthy score</Title>
+                <Col sm={{ offset: 2 }}>
+                    <Title level={4}>{scoreLeaderText}</Title>
+                    {hasScore ? (
+                        <Paragraph style={{ color: colors.gray8 }}></Paragraph>
+                    ) : (
+                        <Paragraph style={{ color: colors.gray8 }}>
+                            Seems like you dont have a score yet
+                        </Paragraph>
+                    )}
                 </Col>
             </Flex>
         </>
diff --git a/frontend/src/redux/reducers/types/commonTypes.ts b/frontend/src/redux/reducers/types/commonTypes.ts
index 85afa12f..61037848 100644
--- a/frontend/src/redux/reducers/types/commonTypes.ts
+++ b/frontend/src/redux/reducers/types/commonTypes.ts
@@ -1,3 +1,16 @@
+export interface TrustworthinessDetails {
+    calculated_on: string;
+    next_refresh_available: string;
+    total_score: number;
+    components: {
+        payments: number;
+        claims: number;
+        background: number;
+        activity: number;
+        lifestyle: number;
+    };
+}
+
 export interface User {
     id: number;
     first_name: string;
@@ -10,6 +23,7 @@ export interface User {
 
     linkedin_url?: string;
     twitter_url?: string;
+    trustworthiness?: TrustworthinessDetails;
 }
 
 export interface Premium {
diff --git a/pods/serializers.py b/pods/serializers.py
index 767a5768..6b67df9e 100644
--- a/pods/serializers.py
+++ b/pods/serializers.py
@@ -132,6 +132,8 @@ class Meta:
             "updated_at",
             "verified_email",
             "pods",
+            "linkedin_url",
+            "twitter_url",
         ]