From afaf2d81f9fe9c083d3e0036ec17fd2e1111ef36 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Tue, 22 Oct 2024 15:52:28 -0400
Subject: [PATCH] Rails & React Working

---
 .../playbook/pb_currency/_currency.tsx        | 16 +++----
 .../pb_kits/playbook/pb_currency/currency.rb  | 47 ++++++++++++++-----
 .../docs/_currency_comma_separator.html.erb   |  7 +++
 .../docs/_currency_comma_separator.jsx        | 18 +++++++
 .../docs/_currency_matching_decimals.html.erb |  6 +--
 .../docs/_currency_matching_decimals.jsx      |  3 --
 .../pb_currency/docs/_currency_variants.jsx   |  9 ----
 .../playbook/pb_currency/docs/example.yml     |  4 +-
 .../playbook/pb_currency/docs/index.js        |  1 +
 9 files changed, 75 insertions(+), 36 deletions(-)
 create mode 100644 playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx

diff --git a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
index 110808c547..d77b6d3289 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
+++ b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
@@ -90,20 +90,20 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
-    getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
+  const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
   const formatAmount = (amount: string) => {
     if (!commaSeparator) return amount;
     
-    const [whole, decimal = '00'] = amount.split('.');
-    const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(whole));
-    return `${formattedWhole}.${decimal}`;
+    const [wholePart, decimalPart] = amount.split('.');
+    const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
+    return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount),
-    getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
-    getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
+  const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
+  const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
+  const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
   return (
     <div
diff --git a/playbook/app/pb_kits/playbook/pb_currency/currency.rb b/playbook/app/pb_kits/playbook/pb_currency/currency.rb
index 475dfcc248..7387c76151 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/currency.rb
+++ b/playbook/app/pb_kits/playbook/pb_currency/currency.rb
@@ -68,7 +68,7 @@ def caption_props
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : whole_value,
+          text: abbreviate ? abbreviated_value : formatted_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -99,29 +99,38 @@ def variant_class
     private
 
       def whole_value
-        return amount if decimals == "matching"
-
-        value = amount.split(".").first.to_s
-        comma_separator ? number_with_delimiter(value) : value
+        value = amount.split(".").first
+        if comma_separator
+          number_with_delimiter(value.gsub(",", ""))
+        else
+          value # Keep original formatting if comma_separator is false
+        end
       end
 
-      def abbreviated_value(index = 0..-2)
-        value = amount.split(".").first.split(",").join("")
-        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "").to_s
-        abbreviated_num[index]
+      def decimal_value
+        amount.split(".")[1] || "00"
       end
 
       def units_element
         return "" if decimals == "matching" && !abbreviate && !unit
 
-        _, decimal_part = amount.split(".")
-        if unit.nil? && abbreviate == false
-          decimal_part.nil? ? ".00" : ".#{decimal_part}"
+        if unit.nil? && !abbreviate
+          if decimals == "matching"
+            ""
+          else
+            ".#{decimal_value}"
+          end
         else
           abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
         end
       end
 
+      def abbreviated_value(index = 0..-2)
+        value = amount.split(".").first.gsub(",", "").to_i
+        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
+        abbreviated_num[index]
+      end
+
       def size_value
         case size
         when "lg"
@@ -136,6 +145,20 @@ def size_value
       def dark_class
         dark ? "dark" : nil
       end
+
+      def formatted_amount
+        return abbreviated_value if abbreviate
+
+        if decimals == "matching"
+          if comma_separator
+            number_with_delimiter(amount.gsub(",", ""))
+          else
+            amount # Keep original formatting if comma_separator is false
+          end
+        else
+          whole_value
+        end
+      end
     end
   end
 end
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
new file mode 100644
index 0000000000..48f0548013
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
@@ -0,0 +1,7 @@
+<%= pb_rails("currency", props: {
+  amount: '1234567.89',
+  comma_separator: true,
+  size: 'lg',
+  emphasized: false,
+  decimals: 'matching',
+}) %>
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
new file mode 100644
index 0000000000..851cf52a10
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
@@ -0,0 +1,18 @@
+import React from "react"
+
+import Currency from "../_currency"
+
+const CurrencyCommaSeparator = (props) => {
+  return (
+    <Currency
+        amount='1234567.89'
+        commaSeparator
+        decimals="matching"
+        emphasized={false}
+        size="lg"
+        {...props}
+    />
+  )
+}
+
+export default CurrencyCommaSeparator
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb
index 5524a9bcc9..707889e038 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb
@@ -1,24 +1,24 @@
 <%= pb_rails("currency", props: {
   amount: "372.12",
-  decimals: "matching",
   label: "Small",
   margin_bottom: "md",
   size: "sm",
   unit: "/day",
+  decimals: "matching",
 }) %>
 
 <%= pb_rails("currency", props: {
   amount: "30,327.43",
-  decimals: "matching",
   label: "Medium",
   margin_bottom: "md",
   size: "md",
   symbol: "€",
+  decimals: "matching",
 }) %>
 
 <%= pb_rails("currency", props: {
   amount: "621,953.99",
-  decimals: "matching",
   label: "Large",
   size: "lg",
+  decimals: "matching",
 }) %>
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx
index b2541d9343..6a4dffd3dd 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx
@@ -7,7 +7,6 @@ const CurrencyMatchingDecimals = (props) => {
     <>
       <Currency
           amount="372.12"
-          decimals="matching"
           label="Small"
           marginBottom="md"
           size="sm"
@@ -16,7 +15,6 @@ const CurrencyMatchingDecimals = (props) => {
       />
       <Currency
           amount="30,327.43"
-          decimals="matching"
           label="Medium"
           marginBottom="md"
           size="md"
@@ -25,7 +23,6 @@ const CurrencyMatchingDecimals = (props) => {
       />
       <Currency
           amount="621,953.99"
-          decimals="matching"
           label="Large"
           size="lg"
           {...props}
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx
index 9d99289ae2..30b357f970 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx
@@ -30,15 +30,6 @@ const CurrencyVariants = (props) => {
           variant="bold"
           {...props}
       />
-      
-      <Currency
-          amount="1234567.89"
-          commaSeparator
-          label="Comma Separator"
-          marginBottom="md"
-          size="sm"
-          {...props}
-      />
     </>
   )
 }
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
index a8354bce15..8568c2a514 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
@@ -8,7 +8,8 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-
+  - currency_comma_separator: Comma Separator
+  
   react:
   - currency_variants: Variants
   - currency_size: Size
@@ -17,6 +18,7 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
+  - currency_comma_separator: Comma Separator
 
   swift:
   - currency_size_swift: Size
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
index e0ab2b0b99..86ae571909 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
@@ -5,3 +5,4 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
 export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
+export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'