SWF-17 credit utilization improvements

- dynamically resize the radial indicator to allow showing a button below to explain the metric - recolored some buttons on account details screen
rrk12005 · Apr 17, 2019 · 416c2ea · 416c2ea
1 parent 2c07f8e
commit 416c2ea
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/SynchronyFinancial/SynchronyFinancial WatchKit App/Base.lproj/Interface.storyboard b/SynchronyFinancial/SynchronyFinancial WatchKit App/Base.lproj/Interface.storyboard
@@ -17,7 +17,9 @@
                         <button alignment="center" id="8yj-m6-1L9">
                             <group key="contentGroup" width="1" height="0.5" alignment="left" contentMode="scaleAspectFit" layout="vertical" id="SBG-wc-YDJ">
                                 <items>
-                                    <imageView height="0.69999999999999996" alignment="center" image="account_menu_cc_icon" contentMode="scaleAspectFit" id="zAJ-yo-M72"/>
+                                    <imageView height="0.69999999999999996" alignment="center" image="account_menu_cc_icon" contentMode="scaleAspectFit" id="zAJ-yo-M72">
+                                        <color key="tintColor" red="0.070061393082141876" green="0.36642074584960938" blue="0.30139422416687012" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                    </imageView>
                                     <label alignment="center" text="Accounts" id="Ohi-ve-NfC"/>
                                 </items>
                             </group>
@@ -56,7 +58,7 @@
                     <items>
                         <label width="1" alignment="center" text="Credit Wellness" textAlignment="center" id="eqA-XH-rlH"/>
                         <imageView width="1" height="86" alignment="center" verticalAlignment="center" image="scores" contentMode="scaleAspectFit" initiallyAnimated="NO" animationDuration="2" id="aTf-mo-FEr"/>
-                        <button width="1" alignment="center" verticalAlignment="bottom" title="Tap For More" id="yYk-gv-I5B">
+                        <button width="1" alignment="center" verticalAlignment="bottom" title="Breakdown" id="yYk-gv-I5B">
                             <fontDescription key="font" type="system" pointSize="13"/>
                             <connections>
                                 <action selector="moreButtonTapped" destination="FsK-xr-8Fi" id="uxY-jK-pTW"/>
@@ -134,12 +136,15 @@
                         <group width="1" alignment="left" id="ohQ-In-SGt">
                             <items>
                                 <button width="67" alignment="left" title="Pay" id="zeF-ky-mkm">
+                                    <color key="backgroundColor" red="0.070061393080000006" green="0.3664207458" blue="0.3013942242" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                     <connections>
                                         <action selector="payBillTapped" destination="yrN-yp-gkH" id="iQy-Ty-omn"/>
                                         <segue destination="XXR-hJ-s6t" kind="push" identifier="payBill" id="jGh-Ix-ean"/>
                                     </connections>
                                 </button>
                                 <button width="64" alignment="right" title="Recent" id="0HI-HK-yDl">
+                                    <color key="titleColor" red="0.070061393080000006" green="0.3664207458" blue="0.3013942242" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                    <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                     <connections>
                                         <action selector="recentButtonTapped" destination="yrN-yp-gkH" id="8Rp-SG-lGZ"/>
                                     </connections>
@@ -314,8 +319,17 @@
             <objects>
                 <controller identifier="UtilizationScore" id="RNe-Ul-1jm" customClass="UtilizationInterfaceController" customModule="SynchronyFinancial_WatchKit_Extension">
                     <items>
-                        <label width="1" alignment="left" text="Utilization Score" textAlignment="center" id="Rzj-RR-iat"/>
-                        <imageView width="1" height="120" alignment="center" verticalAlignment="center" image="scores" contentMode="scaleAspectFit" initiallyAnimated="NO" id="MkL-48-J8l"/>
+                        <group width="1" height="1" alignment="left" layout="vertical" id="ad4-JN-O9D">
+                            <items>
+                                <label width="1" alignment="left" text="Credit Utilization" textAlignment="center" id="Rzj-RR-iat"/>
+                                <imageView width="1" height="100" alignment="center" verticalAlignment="center" image="scores" contentMode="scaleAspectFit" initiallyAnimated="NO" id="MkL-48-J8l"/>
+                                <button width="1" alignment="left" verticalAlignment="center" title="Details" id="AR5-QD-8ad">
+                                    <connections>
+                                        <action selector="showDetails" destination="RNe-Ul-1jm" id="jBx-8s-RHe"/>
+                                    </connections>
+                                </button>
+                            </items>
+                        </group>
                     </items>
                     <connections>
                         <outlet property="image3" destination="MkL-48-J8l" id="QRq-aZ-tTD"/>

diff --git a/SynchronyFinancial/SynchronyFinancial WatchKit Extension/UtilizationfaceController.swift b/SynchronyFinancial/SynchronyFinancial WatchKit Extension/UtilizationfaceController.swift
@@ -17,7 +17,11 @@ class UtilizationInterfaceController: WKInterfaceController {
     @IBOutlet weak var image3: WKInterfaceImage!
     override func awake(withContext context: Any?) {
         super.awake(withContext: context)
-
+
+        // resize according to screen size so we can display button below
+        image3.setHeight(contentFrame.height / 2)
+        image3.setWidth(contentFrame.height / 2)
+        image3.setHorizontalAlignment(.center)
         score = context as? Int
 
         // get plist data to generate utilization metric
@@ -49,16 +53,18 @@ class UtilizationInterfaceController: WKInterfaceController {
             didAnimate = true
         }
     }
-    
+
     override func willActivate() {
         // This method is called when watch view controller is about to be visible to user
         super.willActivate()
     }
-
-
+
     override func didDeactivate() {
         // This method is called when watch view controller is no longer visible
         super.didDeactivate()
     }
-}
 
+    @IBAction func showDetails() {
+        presentAlert(withTitle: "Utilization Details", message: "Credit utilization is the ratio of credit used compared to total credit. Ideally, this value should be 20% or below.", preferredStyle: .alert, actions: [WKAlertAction(title: "Done", style: .default, handler: {})])
+    }
+}
diff --git a/SynchronyFinancial/SynchronyFinancial WatchKit Extension/WellnessInterfaceController.swift b/SynchronyFinancial/SynchronyFinancial WatchKit Extension/WellnessInterfaceController.swift
@@ -59,10 +59,10 @@ class WellnessInterfaceController: WKInterfaceController {
     private func calculateUtilization() {
         var totalBalance: Double = 0
         var totalCredit: Double = 0
-        
-        for index in 0..<accounts.count {
-            totalBalance += accounts[index].curBalance
-            totalCredit += accounts[index].creditLimit
+
+        accounts.forEach {
+            totalCredit += $0.availCredit
+            totalBalance += $0.curBalance
         }
 
         let util = round(((totalBalance)/(totalCredit)) * 100)