@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (421) hide show
  1. package/README.md +33 -11
  2. package/ai-docs/architecture.md +71 -0
  3. package/ai-docs/components.md +167 -0
  4. package/ai-docs/conventions.md +162 -0
  5. package/ai-docs/figma-mcp.md +66 -0
  6. package/ai-docs/integration-guidelines.md +142 -0
  7. package/dist/index.cjs.js +27805 -25779
  8. package/dist/index.cjs.js.map +1 -1
  9. package/dist/index.d.ts +286 -12
  10. package/dist/index.esm.js +26589 -24593
  11. package/dist/index.esm.js.map +1 -1
  12. package/package.json +17 -8
  13. package/src/components/atoms/alert/Alert.js +10 -1
  14. package/src/components/atoms/alert/Alert.mdx +19 -0
  15. package/src/components/atoms/alert/Alert.stories.js +150 -0
  16. package/src/components/atoms/badge/Badge.js +39 -25
  17. package/src/components/atoms/badge/Badge.mdx +27 -0
  18. package/src/components/atoms/badge/Badge.stories.js +168 -0
  19. package/src/components/atoms/badge/Badge.theme.js +49 -1
  20. package/src/components/atoms/badge/index.d.ts +11 -0
  21. package/src/components/atoms/breadcrumb/Breadcrumb.mdx +21 -0
  22. package/src/components/atoms/breadcrumb/Breadcrumb.stories.js +47 -0
  23. package/src/components/atoms/button-with-action/ButtonWithAction.js +3 -29
  24. package/src/components/atoms/button-with-action/ButtonWithAction.stories.js +14 -1
  25. package/src/components/atoms/button-with-action/ButtonWithAction.theme.js +97 -56
  26. package/src/components/atoms/button-with-action/index.d.ts +1 -0
  27. package/src/components/atoms/button-with-link/ButtonWithLink.mdx +21 -0
  28. package/src/components/atoms/button-with-link/ButtonWithLink.stories.js +161 -0
  29. package/src/components/atoms/card/Card.js +22 -1
  30. package/src/components/atoms/card/Card.mdx +41 -0
  31. package/src/components/atoms/card/Card.stories.js +360 -0
  32. package/src/components/atoms/card/Card.theme.js +2 -0
  33. package/src/components/atoms/card/CardText.js +39 -11
  34. package/src/components/atoms/card/index.d.ts +8 -1
  35. package/src/components/atoms/card-type/CardType.js +55 -0
  36. package/src/components/atoms/card-type/CardType.stories.js +86 -0
  37. package/src/components/atoms/card-type/index.js +3 -0
  38. package/src/components/atoms/checkbox/Checkbox.js +121 -93
  39. package/src/components/atoms/checkbox/Checkbox.mdx +15 -0
  40. package/src/components/atoms/checkbox/Checkbox.oldstories.js +17 -13
  41. package/src/components/atoms/checkbox/Checkbox.stories.js +149 -0
  42. package/src/components/atoms/checkbox/Checkbox.theme.js +6 -2
  43. package/src/components/atoms/country-dropdown/CountryDropdown.mdx +36 -0
  44. package/src/components/atoms/country-dropdown/CountryDropdown.stories.js +76 -0
  45. package/src/components/atoms/detail/Detail.js +0 -26
  46. package/src/components/atoms/detail/Detail.mdx +32 -0
  47. package/src/components/atoms/detail/Detail.stories.js +156 -0
  48. package/src/components/atoms/display-box/DisplayBox.mdx +11 -0
  49. package/src/components/atoms/display-box/DisplayBox.stories.js +69 -0
  50. package/src/components/atoms/dropdown/Dropdown.js +17 -5
  51. package/src/components/atoms/dropdown/Dropdown.mdx +65 -0
  52. package/src/components/atoms/dropdown/Dropdown.stories.js +128 -0
  53. package/src/components/atoms/dropdown/Dropdown.theme.js +6 -6
  54. package/src/components/atoms/dropdown/DropdownIcon.js +1 -0
  55. package/src/components/atoms/dropdown/DropdownIconV2.js +50 -0
  56. package/src/components/atoms/dropdown/index.d.ts +59 -0
  57. package/src/components/atoms/form-layouts/FormInput.js +105 -61
  58. package/src/components/atoms/form-layouts/FormInput.mdx +38 -0
  59. package/src/components/atoms/form-layouts/FormInput.stories.js +219 -0
  60. package/src/components/atoms/form-layouts/FormTextarea.js +207 -0
  61. package/src/components/atoms/form-layouts/FormTextarea.mdx +48 -0
  62. package/src/components/atoms/form-layouts/FormTextarea.stories.js +265 -0
  63. package/src/components/atoms/form-layouts/index.d.ts +34 -1
  64. package/src/components/atoms/form-layouts/index.js +3 -1
  65. package/src/components/atoms/form-select/FormSelect.js +5 -3
  66. package/src/components/atoms/form-select/FormSelect.mdx +42 -0
  67. package/src/components/atoms/form-select/FormSelect.stories.js +76 -0
  68. package/src/components/atoms/form-select/FormSelect.styled.js +2 -2
  69. package/src/components/atoms/form-select/FormSelect.theme.js +6 -3
  70. package/src/components/atoms/form-select/index.d.ts +3 -0
  71. package/src/components/atoms/formatted-address/FormattedAddress.mdx +13 -0
  72. package/src/components/atoms/formatted-address/FormattedAddress.stories.js +138 -0
  73. package/src/components/atoms/formatted-bank-account/FormattedBankAccount.js +2 -2
  74. package/src/components/atoms/formatted-bank-account/FormattedBankAccount.mdx +17 -0
  75. package/src/components/atoms/formatted-bank-account/FormattedBankAccount.stories.js +57 -0
  76. package/src/components/atoms/formatted-bank-account/FormattedBankAccount.theme.js +2 -2
  77. package/src/components/atoms/formatted-credit-card/FormattedCreditCard.js +14 -10
  78. package/src/components/atoms/formatted-credit-card/FormattedCreditCard.mdx +40 -0
  79. package/src/components/atoms/formatted-credit-card/FormattedCreditCard.stories.js +74 -0
  80. package/src/components/atoms/formatted-credit-card/FormattedCreditCard.theme.js +2 -2
  81. package/src/components/atoms/icons/AgencyIcon.js +24 -0
  82. package/src/components/atoms/icons/AmExLargeIcon.js +54 -0
  83. package/src/components/atoms/icons/AmExSmallIcon.js +54 -0
  84. package/src/components/atoms/icons/AutopayIcon.js +9 -1
  85. package/src/components/atoms/icons/BankGenericSmallIcon.js +48 -0
  86. package/src/components/atoms/icons/CaretArrowDown.d.ts +9 -0
  87. package/src/components/atoms/icons/CaretArrowDown.js +22 -0
  88. package/src/components/atoms/icons/CaretArrowUp.d.ts +9 -0
  89. package/src/components/atoms/icons/CaretArrowUp.js +22 -0
  90. package/src/components/atoms/icons/CarrotIcon.js +2 -0
  91. package/src/components/atoms/icons/CashSmallIcon.js +21 -0
  92. package/src/components/atoms/icons/CashieringImage.d.ts +1 -0
  93. package/src/components/atoms/icons/CashieringImage.js +254 -0
  94. package/src/components/atoms/icons/CheckboxCheckmarkIcon.js +45 -0
  95. package/src/components/atoms/icons/CustomerSearchIcon.js +30 -79
  96. package/src/components/atoms/icons/DiscoverLargeIcon.js +137 -0
  97. package/src/components/atoms/icons/DiscoverSmallIcon.js +137 -0
  98. package/src/components/atoms/icons/ExternalLinkIcon.js +10 -2
  99. package/src/components/atoms/icons/GenericCardLarge.js +1 -1
  100. package/src/components/atoms/icons/GenericSmallIcon.js +27 -0
  101. package/src/components/atoms/icons/GuidedCheckoutImage.js +105 -26
  102. package/src/components/atoms/icons/IconAdd.js +2 -2
  103. package/src/components/atoms/icons/Icons.mdx +40 -0
  104. package/src/components/atoms/icons/Icons.stories.js +343 -0
  105. package/src/components/atoms/icons/KioskImage.js +223 -338
  106. package/src/components/atoms/icons/MasterCardLargeIcon.js +35 -0
  107. package/src/components/atoms/icons/MasterCardSmallIcon.js +35 -0
  108. package/src/components/atoms/icons/{NoCustomerResultsIcon.js → NoResultsIcon.js} +10 -6
  109. package/src/components/atoms/icons/NotFoundIcon.js +70 -333
  110. package/src/components/atoms/icons/OverageIcon.js +27 -0
  111. package/src/components/atoms/icons/PaydotImage.d.ts +1 -0
  112. package/src/components/atoms/icons/PaydotImage.js +46 -0
  113. package/src/components/atoms/icons/PaymentSearchIcon.js +7 -42
  114. package/src/components/atoms/icons/PaymentStatusIcon.d.ts +1 -0
  115. package/src/components/atoms/icons/PaymentStatusIcon.js +28 -0
  116. package/src/components/atoms/icons/PeriscopeFailedIcon.js +2 -2
  117. package/src/components/atoms/icons/PersonIcon.d.ts +1 -0
  118. package/src/components/atoms/icons/PersonIcon.js +28 -0
  119. package/src/components/atoms/icons/ProfileImage.js +58 -37
  120. package/src/components/atoms/icons/RevenueManagementImage.js +138 -393
  121. package/src/components/atoms/icons/ReversalNeededIcon.js +27 -0
  122. package/src/components/atoms/icons/SearchIcon.js +4 -3
  123. package/src/components/atoms/icons/ShortageIcon.js +21 -0
  124. package/src/components/atoms/icons/StandardCheckoutImage.js +105 -336
  125. package/src/components/atoms/icons/SuccessfulIconMedium.js +3 -2
  126. package/src/components/atoms/icons/VisaLargeIcon.js +40 -0
  127. package/src/components/atoms/icons/VisaSmallIcon.js +40 -0
  128. package/src/components/atoms/icons/WireSmallIcon.js +22 -0
  129. package/src/components/atoms/icons/icons.oldstories.js +47 -31
  130. package/src/components/atoms/icons/index.d.ts +4 -1
  131. package/src/components/atoms/icons/index.js +47 -7
  132. package/src/components/atoms/index.d.ts +4 -0
  133. package/src/components/atoms/index.js +3 -1
  134. package/src/components/atoms/jumbo/Jumbo.js +18 -3
  135. package/src/components/atoms/labeled-amount/LabeledAmount.mdx +23 -0
  136. package/src/components/atoms/labeled-amount/LabeledAmount.stories.js +118 -0
  137. package/src/components/atoms/layouts/Box.styled.js +34 -22
  138. package/src/components/atoms/layouts/Center.styled.js +2 -0
  139. package/src/components/atoms/layouts/Motion.js +25 -6
  140. package/src/components/atoms/layouts/Motion.styled.js +36 -0
  141. package/src/components/atoms/layouts/Stack.js +2 -0
  142. package/src/components/atoms/layouts/Stack.styled.js +2 -0
  143. package/src/components/atoms/line-item/LineItem.mdx +28 -0
  144. package/src/components/atoms/line-item/LineItem.stories.js +95 -0
  145. package/src/components/atoms/link/ExternalLink.d.ts +1 -0
  146. package/src/components/atoms/link/ExternalLink.js +37 -19
  147. package/src/components/atoms/link/ExternalLink.styled.js +2 -0
  148. package/src/components/atoms/link/InternalLink.js +11 -1
  149. package/src/components/atoms/link/InternalLink.styled.js +22 -2
  150. package/src/components/atoms/link/Link.mdx +19 -0
  151. package/src/components/atoms/link/Link.stories.js +183 -0
  152. package/src/components/atoms/loading/Loading.mdx +13 -0
  153. package/src/components/atoms/loading/Loading.stories.js +22 -0
  154. package/src/components/atoms/loading-line/LoadingLine.js +23 -11
  155. package/src/components/atoms/loading-line/LoadingLine.mdx +15 -0
  156. package/src/components/atoms/loading-line/LoadingLine.stories.js +132 -0
  157. package/src/components/atoms/loading-line/LoadingPill.styled.js +7 -6
  158. package/src/components/atoms/nav-footer/NavFooter.mdx +15 -0
  159. package/src/components/atoms/nav-footer/NavFooter.stories.js +244 -0
  160. package/src/components/atoms/nav-header/NavHeader.mdx +13 -0
  161. package/src/components/atoms/nav-header/NavHeader.stories.js +130 -0
  162. package/src/components/atoms/nav-tabs/NavTabs.mdx +30 -0
  163. package/src/components/atoms/nav-tabs/NavTabs.stories.js +49 -0
  164. package/src/components/atoms/password-requirements/PasswordRequirements.js +3 -3
  165. package/src/components/atoms/password-requirements/PasswordRequirements.mdx +39 -0
  166. package/src/components/atoms/password-requirements/PasswordRequirements.stories.js +139 -0
  167. package/src/components/atoms/placeholder/Placeholder.mdx +19 -0
  168. package/src/components/atoms/placeholder/Placeholder.stories.js +170 -0
  169. package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.js +13 -7
  170. package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.theme.js +9 -3
  171. package/src/components/atoms/search/Search.js +123 -0
  172. package/src/components/atoms/search/Search.oldstories.js +58 -0
  173. package/src/components/atoms/search/Search.theme.js +9 -0
  174. package/src/components/atoms/search/index.d.ts +27 -0
  175. package/src/components/atoms/search/index.js +3 -0
  176. package/src/components/atoms/searchable-select/SearchableSelect.mdx +44 -0
  177. package/src/components/atoms/searchable-select/SearchableSelect.stories.js +137 -0
  178. package/src/components/atoms/sortable-table-heading/SortableTableHeading.js +47 -0
  179. package/src/components/atoms/sortable-table-heading/SortableTableHeading.oldstories.js +19 -0
  180. package/src/components/atoms/sortable-table-heading/SortableTableHeading.theme.js +9 -0
  181. package/src/components/atoms/sortable-table-heading/index.d.ts +15 -0
  182. package/src/components/atoms/sortable-table-heading/index.js +3 -0
  183. package/src/components/atoms/spinner/Spinner.js +2 -1
  184. package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.mdx +36 -0
  185. package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.stories.js +78 -0
  186. package/src/components/atoms/state-province-dropdown/options.js +4 -1
  187. package/src/components/atoms/tab/Tab.js +2 -2
  188. package/src/components/atoms/table/Table.mdx +71 -0
  189. package/src/components/atoms/table/Table.oldstories.js +84 -0
  190. package/src/components/atoms/table/Table.stories.js +65 -0
  191. package/src/components/atoms/table/TableRow.js +1 -0
  192. package/src/components/atoms/title/Title.js +0 -23
  193. package/src/components/atoms/title/Title.mdx +26 -0
  194. package/src/components/atoms/title/Title.stories.js +144 -0
  195. package/src/components/atoms/title/Title.theme.js +3 -0
  196. package/src/components/atoms/toggle-switch/ToggleSwitch.js +66 -48
  197. package/src/components/atoms/toggle-switch/ToggleSwitch.mdx +17 -0
  198. package/src/components/atoms/toggle-switch/ToggleSwitch.stories.js +111 -0
  199. package/src/components/atoms/toggle-switch/ToggleSwitch.theme.js +8 -5
  200. package/src/components/atoms/typeahead-input/TypeaheadInput.mdx +13 -0
  201. package/src/components/atoms/typeahead-input/TypeaheadInput.stories.js +63 -0
  202. package/src/components/atoms/wallet-name/WalletName.js +6 -4
  203. package/src/components/atoms/wallet-name/WalletName.oldstories.js +26 -1
  204. package/src/components/atoms/wallet-name/index.d.ts +2 -0
  205. package/src/components/molecules/address-form/AddressForm.mdx +18 -0
  206. package/src/components/molecules/address-form/AddressForm.stories.js +224 -0
  207. package/src/components/molecules/banner/Banner.mdx +23 -0
  208. package/src/components/molecules/banner/Banner.stories.js +125 -0
  209. package/src/components/molecules/change-password-form/ChangePasswordForm.mdx +15 -0
  210. package/src/components/molecules/change-password-form/ChangePasswordForm.stories.js +206 -0
  211. package/src/components/molecules/collapsible-section/CollapsibleSection.js +1 -1
  212. package/src/components/molecules/collapsible-section/CollapsibleSection.mdx +15 -0
  213. package/src/components/molecules/collapsible-section/CollapsibleSection.stories.js +217 -0
  214. package/src/components/molecules/collapsible-section/index.d.ts +2 -2
  215. package/src/components/molecules/contact-card/ContactCard.js +157 -0
  216. package/src/components/molecules/contact-card/ContactCard.stories.js +80 -0
  217. package/src/components/molecules/contact-card/ContactCard.styled.js +44 -0
  218. package/src/components/molecules/contact-card/index.d.ts +16 -0
  219. package/src/components/molecules/contact-card/index.js +3 -0
  220. package/src/components/molecules/edit-name-form/EditNameForm.mdx +13 -0
  221. package/src/components/molecules/edit-name-form/EditNameForm.stories.js +117 -0
  222. package/src/components/molecules/editable-list/EditableList.js +6 -1
  223. package/src/components/molecules/email-form/EmailForm.js +9 -1
  224. package/src/components/molecules/email-form/EmailForm.state.js +1 -1
  225. package/src/components/molecules/email-form/EmailForm.stories.js +210 -0
  226. package/src/components/molecules/forgot-password-form/ForgotPasswordForm.js +2 -1
  227. package/src/components/molecules/hero-image/HeroImage.js +135 -0
  228. package/src/components/molecules/hero-image/HeroImage.mdx +15 -0
  229. package/src/components/molecules/hero-image/HeroImage.stories.js +149 -0
  230. package/src/components/molecules/hero-image/HeroImage.styled.js +83 -0
  231. package/src/components/molecules/hero-image/HeroImage.theme.js +109 -0
  232. package/src/components/molecules/hero-image/index.js +3 -0
  233. package/src/components/molecules/idle-modal/IdleModal.js +101 -0
  234. package/src/components/molecules/idle-modal/IdleModal.mdx +17 -0
  235. package/src/components/molecules/idle-modal/IdleModal.stories.js +180 -0
  236. package/src/components/molecules/idle-modal/index.d.ts +16 -0
  237. package/src/components/molecules/idle-modal/index.js +3 -0
  238. package/src/components/molecules/index.d.ts +1 -0
  239. package/src/components/molecules/index.js +7 -0
  240. package/src/components/molecules/link-card/LinkCard.js +31 -20
  241. package/src/components/molecules/link-card/LinkCard.mdx +17 -0
  242. package/src/components/molecules/link-card/LinkCard.stories.js +528 -0
  243. package/src/components/molecules/link-card/LinkCard.styled.js +28 -21
  244. package/src/components/molecules/link-card/LinkCard.theme.js +6 -4
  245. package/src/components/molecules/link-card/index.d.ts +3 -1
  246. package/src/components/molecules/login-form/LoginForm.js +2 -1
  247. package/src/components/molecules/login-form/LoginForm.mdx +16 -0
  248. package/src/components/molecules/login-form/LoginForm.stories.js +120 -0
  249. package/src/components/molecules/modal/Modal.mdx +17 -0
  250. package/src/components/molecules/modal/Modal.stories.js +362 -0
  251. package/src/components/molecules/modal/ModalControlV1.js +3 -0
  252. package/src/components/molecules/modal/ModalControlV2.js +2 -0
  253. package/src/components/molecules/modal/__private__/CloseButton.js +2 -1
  254. package/src/components/molecules/module/Module.mdx +17 -0
  255. package/src/components/molecules/module/Module.stories.js +273 -0
  256. package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.js +229 -0
  257. package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.oldstories.js +74 -0
  258. package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.styled.js +65 -0
  259. package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.theme.js +13 -0
  260. package/src/components/molecules/multiple-select-filter/__private__/ActionLinkButton.js +27 -0
  261. package/src/components/molecules/multiple-select-filter/__private__/FilterButton.js +97 -0
  262. package/src/components/molecules/multiple-select-filter/__private__/FilterDropdown.js +27 -0
  263. package/src/components/molecules/multiple-select-filter/__private__/FilterableList.js +146 -0
  264. package/src/components/molecules/multiple-select-filter/__private__/FilterableListItem.js +78 -0
  265. package/src/components/molecules/multiple-select-filter/__private__/SearchBox.js +41 -0
  266. package/src/components/molecules/multiple-select-filter/__private__/useKeyboardNavigation.js +84 -0
  267. package/src/components/molecules/multiple-select-filter/__private__/util.js +44 -0
  268. package/src/components/molecules/multiple-select-filter/index.d.ts +34 -0
  269. package/src/components/molecules/multiple-select-filter/index.js +3 -0
  270. package/src/components/molecules/nav-menu/NavMenuMobile.js +27 -29
  271. package/src/components/molecules/nav-menu/NavMenuMobile.mdx +21 -0
  272. package/src/components/molecules/nav-menu/NavMenuMobile.stories.js +100 -0
  273. package/src/components/molecules/obligation/Obligation.js +141 -3
  274. package/src/components/molecules/obligation/Obligation.mdx +23 -0
  275. package/src/components/molecules/obligation/Obligation.stories.js +642 -0
  276. package/src/components/molecules/obligation/icons/PropertyBusinessIcon.js +2 -2
  277. package/src/components/molecules/obligation/icons/PropertyCarIcon.js +2 -2
  278. package/src/components/molecules/obligation/icons/PropertyCommercialVehicleIcon.js +2 -2
  279. package/src/components/molecules/obligation/icons/PropertyGarageIcon.js +2 -2
  280. package/src/components/molecules/obligation/icons/PropertyLandIcon.js +2 -2
  281. package/src/components/molecules/obligation/icons/PropertyMotorcycleIcon.js +2 -2
  282. package/src/components/molecules/obligation/icons/PropertyPersonalIcon.js +2 -2
  283. package/src/components/molecules/obligation/icons/PropertyStorefrontIcon.js +2 -2
  284. package/src/components/molecules/obligation/modules/AmountModule.js +64 -38
  285. package/src/components/molecules/obligation/modules/AutopayModalModule.js +37 -12
  286. package/src/components/molecules/obligation/modules/InactiveControlsModule.js +56 -12
  287. package/src/components/molecules/obligation/modules/InactiveTitleModule.js +1 -1
  288. package/src/components/molecules/obligation/modules/PaymentDetailsActions.js +42 -10
  289. package/src/components/molecules/obligation/modules/RemoveAccountModalModule.js +4 -1
  290. package/src/components/molecules/pagination/Pagination.mdx +15 -0
  291. package/src/components/molecules/pagination/Pagination.stories.js +181 -0
  292. package/src/components/molecules/partial-amount-form/PartialAmountField.js +68 -29
  293. package/src/components/molecules/partial-amount-form/PartialAmountField.theme.js +7 -0
  294. package/src/components/molecules/payment-button-bar/PaymentButtonBar.js +15 -8
  295. package/src/components/molecules/payment-details/PaymentDetails.js +1 -2
  296. package/src/components/molecules/payment-details/PaymentDetails.oldstories.js +0 -1
  297. package/src/components/molecules/payment-form-ach/PaymentFormACH.js +2 -0
  298. package/src/components/molecules/payment-form-ach/PaymentFormACH.state.js +2 -2
  299. package/src/components/molecules/payment-form-card/PaymentFormCard.js +6 -2
  300. package/src/components/molecules/payment-form-card/PaymentFormCard.state.js +2 -1
  301. package/src/components/molecules/phone-form/PhoneForm.js +7 -1
  302. package/src/components/molecules/phone-form/PhoneForm.state.js +1 -1
  303. package/src/components/molecules/popover/Popover.js +1 -15
  304. package/src/components/molecules/popover/Popover.mdx +15 -0
  305. package/src/components/molecules/popover/Popover.stories.js +220 -0
  306. package/src/components/molecules/radio-group/RadioGroup.js +8 -3
  307. package/src/components/molecules/radio-group/index.d.ts +1 -0
  308. package/src/components/molecules/radio-section/InnerRadioSection.js +3 -3
  309. package/src/components/molecules/radio-section/RadioSection.js +87 -44
  310. package/src/components/molecules/radio-section/RadioSection.stories.js +142 -0
  311. package/src/components/molecules/radio-section/radio-button/RadioButton.js +9 -5
  312. package/src/components/molecules/registration-banner/RegistrationBanner.js +115 -0
  313. package/src/components/molecules/registration-banner/RegistrationBanner.mdx +15 -0
  314. package/src/components/molecules/registration-banner/RegistrationBanner.stories.js +80 -0
  315. package/src/components/molecules/registration-banner/RegistrationBanner.styled.js +46 -0
  316. package/src/components/molecules/registration-banner/RegistrationBanner.theme.js +6 -0
  317. package/src/components/molecules/registration-banner/index.d.ts +15 -0
  318. package/src/components/molecules/registration-banner/index.js +3 -0
  319. package/src/components/molecules/registration-form/RegistrationForm.js +2 -1
  320. package/src/components/molecules/tab-sidebar/TabSidebar.js +5 -3
  321. package/src/components/molecules/tabs/Tabs.js +25 -9
  322. package/src/components/molecules/tabs/Tabs.mdx +17 -0
  323. package/src/components/molecules/tabs/Tabs.stories.js +149 -0
  324. package/src/components/molecules/tabs/index.d.ts +21 -0
  325. package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js +1 -1
  326. package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.stories.js +110 -0
  327. package/src/components/molecules/toast-notification/Toast.mdx +15 -0
  328. package/src/components/molecules/toast-notification/Toast.stories.js +183 -0
  329. package/src/components/molecules/toast-notification/ToastNotification.js +74 -43
  330. package/src/components/molecules/tooltip/Tooltip.js +269 -0
  331. package/src/components/molecules/tooltip/Tooltip.mdx +25 -0
  332. package/src/components/molecules/tooltip/Tooltip.stories.js +287 -0
  333. package/src/components/molecules/tooltip/Tooltip.theme.js +18 -0
  334. package/src/components/molecules/tooltip/index.d.ts +34 -0
  335. package/src/components/molecules/tooltip/index.js +3 -0
  336. package/src/components/molecules/turnstile-widget/TurnstileWidget.js +183 -0
  337. package/src/components/molecules/turnstile-widget/index.js +3 -0
  338. package/src/components/templates/sidebar-stack-content/SidebarStackContent.js +1 -1
  339. package/src/constants/colors.d.ts +4 -0
  340. package/src/constants/colors.js +8 -1
  341. package/src/constants/regex_constants.js +1 -1
  342. package/src/constants/style_constants.js +13 -0
  343. package/src/deprecated/spinner/Spinner.js +8 -20
  344. package/src/hooks/index.js +2 -0
  345. package/src/hooks/use-conditionally-add-validator/index.js +20 -0
  346. package/src/hooks/use-outside-click/index.js +4 -5
  347. package/src/hooks/use-turnstile-script/index.js +49 -0
  348. package/src/util/formats.js +6 -3
  349. package/src/util/general.js +67 -4
  350. package/src/util/idleTimerUtils.js +36 -0
  351. package/src/util/index.js +3 -1
  352. package/src/util/themeUtils.js +24 -14
  353. package/src/.DS_Store +0 -0
  354. package/src/components/.DS_Store +0 -0
  355. package/src/components/atoms/alert/Alert.oldstories.js +0 -28
  356. package/src/components/atoms/badge/Badge.oldstories.js +0 -33
  357. package/src/components/atoms/breadcrumb/Breadcrumb.oldstories.js +0 -38
  358. package/src/components/atoms/button-with-action/ButtonWithAction.oldstories.js +0 -56
  359. package/src/components/atoms/button-with-link/ButtonWithLink.oldstories.js +0 -32
  360. package/src/components/atoms/country-dropdown/CountryDropdown.oldstories.js +0 -42
  361. package/src/components/atoms/display-box/DisplayBox.oldstories.js +0 -25
  362. package/src/components/atoms/display-card/DisplayCard.js +0 -88
  363. package/src/components/atoms/display-card/DisplayCard.oldstories.js +0 -24
  364. package/src/components/atoms/display-card/index.js +0 -3
  365. package/src/components/atoms/dropdown/Dropdown.oldstories.js +0 -47
  366. package/src/components/atoms/form-select/FormSelect.oldstories.js +0 -50
  367. package/src/components/atoms/formatted-address/FormattedAddress.oldstories.js +0 -32
  368. package/src/components/atoms/icons/NoPaymentResultsIcon.js +0 -54
  369. package/src/components/atoms/icons/PointOfSaleImage.d.ts +0 -1
  370. package/src/components/atoms/icons/PointOfSaleImage.js +0 -439
  371. package/src/components/atoms/labeled-amount/LabeledAmount.oldstories.js +0 -42
  372. package/src/components/atoms/line-item/LineItem.oldstories.js +0 -28
  373. package/src/components/atoms/link/Link.oldstories.js +0 -57
  374. package/src/components/atoms/loading-line/LoadingLine.oldstories.js +0 -28
  375. package/src/components/atoms/nav-footer/NavFooter.oldstories.js +0 -31
  376. package/src/components/atoms/nav-header/NavHeader.oldstories.js +0 -29
  377. package/src/components/atoms/password-requirements/PasswordRequirements.oldstories.js +0 -75
  378. package/src/components/atoms/placeholder/Placeholder.oldstories.js +0 -42
  379. package/src/components/atoms/searchable-select/SearchableSelect.oldstories.js +0 -62
  380. package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.oldstories.js +0 -53
  381. package/src/components/atoms/toggle-switch/ToggleSwitch.oldstories.js +0 -28
  382. package/src/components/molecules/.DS_Store +0 -0
  383. package/src/components/molecules/address-form/AddressForm.oldstories.js +0 -21
  384. package/src/components/molecules/banner/Banner.oldstories.js +0 -29
  385. package/src/components/molecules/change-password-form/ChangePasswordForm.oldstories.js +0 -22
  386. package/src/components/molecules/collapsible-section/CollapsibleSection.oldstories.js +0 -68
  387. package/src/components/molecules/edit-name-form/EdidNameForm.oldstories.js +0 -24
  388. package/src/components/molecules/link-card/LinkCard.oldstories.js +0 -87
  389. package/src/components/molecules/login-form/LoginForm.oldstories.js +0 -24
  390. package/src/components/molecules/modal/Modal.oldstories.js +0 -139
  391. package/src/components/molecules/module/Module.oldstories.js +0 -31
  392. package/src/components/molecules/obligation/.DS_Store +0 -0
  393. package/src/components/molecules/pagination/Pagination.oldstories.js +0 -32
  394. package/src/components/molecules/tabs/Tabs.oldstories.js +0 -241
  395. package/src/components/molecules/toast-notification/ToastNotification.oldstories.js +0 -105
  396. package/src/stories/Button.stories.ts +0 -53
  397. package/src/stories/Button.tsx +0 -48
  398. package/src/stories/Configure.mdx +0 -364
  399. package/src/stories/Header.stories.ts +0 -33
  400. package/src/stories/Header.tsx +0 -56
  401. package/src/stories/Page.stories.ts +0 -32
  402. package/src/stories/Page.tsx +0 -73
  403. package/src/stories/assets/accessibility.png +0 -0
  404. package/src/stories/assets/accessibility.svg +0 -5
  405. package/src/stories/assets/addon-library.png +0 -0
  406. package/src/stories/assets/assets.png +0 -0
  407. package/src/stories/assets/avif-test-image.avif +0 -0
  408. package/src/stories/assets/context.png +0 -0
  409. package/src/stories/assets/discord.svg +0 -15
  410. package/src/stories/assets/docs.png +0 -0
  411. package/src/stories/assets/figma-plugin.png +0 -0
  412. package/src/stories/assets/github.svg +0 -3
  413. package/src/stories/assets/share.png +0 -0
  414. package/src/stories/assets/styling.png +0 -0
  415. package/src/stories/assets/testing.png +0 -0
  416. package/src/stories/assets/theming.png +0 -0
  417. package/src/stories/assets/tutorials.svg +0 -12
  418. package/src/stories/assets/youtube.svg +0 -4
  419. package/src/stories/button.css +0 -30
  420. package/src/stories/header.css +0 -32
  421. package/src/stories/page.css +0 -69
@@ -0,0 +1,642 @@
1
+ import React from "react";
2
+ import Obligation from "./Obligation";
3
+ import { fn } from "@storybook/test";
4
+ import { Box } from "../../atoms/layouts";
5
+
6
+ const meta = {
7
+ title: "Molecules/Obligation",
8
+ component: Obligation,
9
+ parameters: {
10
+ layout: "centered"
11
+ },
12
+ tags: ["!autodocs"],
13
+ args: {
14
+ config: undefined,
15
+ obligations: undefined,
16
+ actions: undefined,
17
+ autoPayEnabled: false,
18
+ autoPayAvailable: false,
19
+ handleAutopayAction: fn(),
20
+ deactivatePaymentSchedule: fn(),
21
+ deactivatingSchedule: false,
22
+ autoPaySchedule: undefined,
23
+ paymentPlanSchedule: undefined,
24
+ navigateToSettings: fn(),
25
+ isPaymentPlan: false,
26
+ nextAutopayDate: undefined,
27
+ obligationAssocID: undefined,
28
+ dueDate: undefined,
29
+ agencyName: undefined,
30
+ inactive: false,
31
+ inactiveLookupTitle: "",
32
+ inactiveLookupInput: "Account",
33
+ inactiveLookupValue: "",
34
+ isInCustomerManagement: false
35
+ },
36
+ argTypes: {
37
+ config: {
38
+ description:
39
+ "Config object that helps set icons and description/subdescription for obligation. Retrieved from FCS.",
40
+ table: {
41
+ type: { summary: "object" },
42
+ defaultValue: { summary: undefined }
43
+ }
44
+ },
45
+ obligations: {
46
+ description: "Array of obligation objects",
47
+ table: {
48
+ type: { summary: "array" },
49
+ defaultValue: { summary: undefined }
50
+ }
51
+ },
52
+ actions: {
53
+ description:
54
+ "Collection of profile-specific Redux actions that are used by the PaymentDetails submodule",
55
+ table: {
56
+ type: { summary: "object" },
57
+ defaultValue: { summary: undefined }
58
+ }
59
+ },
60
+ autoPayEnabled: {
61
+ description: "Whether the obligation is currently set up for autopay",
62
+ table: {
63
+ type: { summary: "boolean" },
64
+ defaultValue: { summary: false }
65
+ }
66
+ },
67
+ autoPayAvailable: {
68
+ description: "Whether the obligation supports autopay",
69
+ table: {
70
+ type: { summary: "boolean" },
71
+ defaultValue: { summary: false }
72
+ }
73
+ },
74
+ handleAutopayAction: {
75
+ description: "Function run when user toggles autoapy button",
76
+ table: {
77
+ type: { summary: "function" },
78
+ defaultValue: { summary: undefined }
79
+ }
80
+ },
81
+ deactivatePaymentSchedule: {
82
+ description: "Function run when user disabled autopay",
83
+ table: {
84
+ type: { summary: "function" },
85
+ defaultValue: { summary: undefined }
86
+ }
87
+ },
88
+ deactivatingSchedule: {
89
+ description: "Loading state when a payment schedule is being deactivated",
90
+ table: {
91
+ type: { summary: "boolean" },
92
+ defaultValue: { summary: false }
93
+ }
94
+ },
95
+ autoPaySchedule: {
96
+ description: "Schedule object for autopay",
97
+ table: {
98
+ type: { summary: "object" },
99
+ defaultValue: { summary: undefined }
100
+ }
101
+ },
102
+ paymentPlanSchedule: {
103
+ description: "Schedule object for payment plan. Currently unused.",
104
+ table: {
105
+ type: { summary: "object" },
106
+ defaultValue: { summary: undefined }
107
+ }
108
+ },
109
+ navigateToSettings: {
110
+ description:
111
+ "Function that navigates a user to the settings page on the profile",
112
+ table: {
113
+ type: { summary: "function" },
114
+ defaultValue: { summary: undefined }
115
+ }
116
+ },
117
+ isPaymentPlan: {
118
+ description:
119
+ "Whether the obligation is a payment plan type. Currently unused.",
120
+ table: {
121
+ type: { summary: "boolean" },
122
+ defaultValue: { summary: false }
123
+ }
124
+ },
125
+ nextAutopayDate: {
126
+ description: "The date the next autopay will run",
127
+ table: {
128
+ type: { summary: "string" },
129
+ defaultValue: { summary: undefined }
130
+ }
131
+ },
132
+ obligationAssocID: {
133
+ description:
134
+ "The ID of the payment schedule associated with this obligation",
135
+ table: {
136
+ type: { summary: "string" },
137
+ defaultValue: { summary: undefined }
138
+ }
139
+ },
140
+ agencyName: {
141
+ description:
142
+ "The name of the agency for this obligation. Used to populate inactive obligation descriptions.",
143
+ table: {
144
+ type: { summary: "string" },
145
+ defaultValue: { summary: undefined }
146
+ }
147
+ },
148
+ inactive: {
149
+ description: "Whether the obligation is in an inactive state.",
150
+ table: {
151
+ type: { summary: "boolean" },
152
+ defaultValue: { summary: false }
153
+ }
154
+ },
155
+ inactiveLookupTitle: {
156
+ description: "String used in the description of an inactive obligation",
157
+ table: {
158
+ type: { summary: "string" },
159
+ defaultValue: { summary: "" }
160
+ }
161
+ },
162
+ inactiveLookupInput: {
163
+ description: "Type of obligation, used for inactive obligations",
164
+ table: {
165
+ type: { summary: "string" },
166
+ defaultValue: { summary: "Account" }
167
+ }
168
+ },
169
+ inactiveLookupValue: {
170
+ description:
171
+ "Account number or other information returned from lookup for inactive obligations",
172
+ table: {
173
+ type: { summary: "string" },
174
+ defaultValue: { summary: undefined }
175
+ }
176
+ },
177
+ isInCustomerManagement: {
178
+ description:
179
+ "Whether the user is a customer management user impersonating a profile. If true, certain controls are disabled.",
180
+ table: {
181
+ type: { summary: "boolean" },
182
+ defaultValue: { summary: false }
183
+ }
184
+ },
185
+ cartEnabled: {
186
+ description: "Whether the obligation is currently set up for cart.",
187
+ table: {
188
+ type: { summary: "boolean" },
189
+ defaultValue: { summary: false }
190
+ }
191
+ },
192
+ cartConfig: {
193
+ description:
194
+ "The configuration for the cart. Used in the configureMultiCart action.",
195
+ table: {
196
+ type: { summary: "object" },
197
+ defaultValue: { summary: undefined }
198
+ }
199
+ },
200
+ multiCartParams: {
201
+ description:
202
+ "The parameters to be used when adding items to multi cart. Used in the addToMultiCart action.",
203
+ table: {
204
+ type: { summary: "object" },
205
+ defaultValue: { summary: undefined }
206
+ }
207
+ },
208
+ isInCart: {
209
+ description: "Whether the obligation is currently in the cart.",
210
+ table: {
211
+ type: { summary: "boolean" },
212
+ defaultValue: { summary: false }
213
+ }
214
+ }
215
+ }
216
+ };
217
+
218
+ export default meta;
219
+
220
+ const obligationConfig = {
221
+ amountValue: "amountDue",
222
+ collection: true,
223
+ description: "Cityville Water Management",
224
+ details: {
225
+ collectionDetails: {
226
+ City: "city",
227
+ State: "state",
228
+ "Street Address": "street_address_line_1",
229
+ "Zip Code": "zip_code"
230
+ },
231
+ collectionDetailsList: [
232
+ {
233
+ attribute: "name",
234
+ label: "Name"
235
+ },
236
+ {
237
+ attribute: "street_address_line_1",
238
+ label: "Street Address"
239
+ },
240
+ {
241
+ attribute: "city",
242
+ label: "City"
243
+ },
244
+ {
245
+ attribute: "state",
246
+ label: "State"
247
+ },
248
+ {
249
+ attribute: "zip_code",
250
+ label: "Zip Code"
251
+ }
252
+ ],
253
+ description: "Cityville Water Management",
254
+ obligationDetails: {
255
+ Account: "account_number",
256
+ Owner: "account_owner",
257
+ Status: "status",
258
+ "Utility Type": "utility_type"
259
+ },
260
+ subDescription: ["Account", "%account_number%"]
261
+ },
262
+ displayName: "Office of Water Management",
263
+ hasPaperlessBilling: true,
264
+ icon: [
265
+ "ACCOUNTS_UTILITY_ELECTRIC",
266
+ "ACCOUNTS_UTILITY_GAS",
267
+ "ACCOUNTS_UTILITY_GARBAGE",
268
+ "ACCOUNTS_UTILITY_WATER"
269
+ ],
270
+ iconDefault: "ACCOUNTS_UTILITY_WATER",
271
+ iconMap: {
272
+ Water: "ACCOUNTS_UTILITY_WATER"
273
+ },
274
+ iconValue: "utility_type",
275
+ obligationSlug: "cityville-water",
276
+ paperlessBilling: {
277
+ confirmationContent: "",
278
+ infoContent: ""
279
+ },
280
+ paymentAttributes: {
281
+ accountId: "account_number",
282
+ amount: "amountDue",
283
+ customAttributes: {
284
+ account_city: "account_city",
285
+ account_number: "account_number",
286
+ account_owner: "account_owner",
287
+ account_street_address: "account_street_address",
288
+ account_zip_code: "account_zip_code",
289
+ utility_type: "utility_type"
290
+ },
291
+ description: ["Account", "%account_number%"],
292
+ subDescription: ["%account_owner%"]
293
+ },
294
+ subDescription: ["Account", "%account_number%"],
295
+ type: "ACCOUNT"
296
+ };
297
+
298
+ export const ActiveObligation = {
299
+ args: {
300
+ config: obligationConfig,
301
+ obligations: [
302
+ {
303
+ allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
304
+ amountDue: 5438,
305
+ customAttributes: {
306
+ account_number: "1006",
307
+ city: "Cityville",
308
+ client_slug: "Cityville",
309
+ customer_name: "Shadout Mapes",
310
+ due_date: "2024-09-01T12:00:00",
311
+ invoice_number: "101006.0",
312
+ line_item_description: "Shadout Mapes",
313
+ line_item_sub_description: "1006",
314
+ name: "Shadout Mapes",
315
+ service_type: "water",
316
+ state: "North Carolina",
317
+ street_address_line_1: "23145 O'Hara Wells",
318
+ sub_client_slug: "cityville-water",
319
+ total_due_amount: "5438.0",
320
+ utility_type: "water",
321
+ zip_code: "79221"
322
+ },
323
+ id: "1006",
324
+ kind: "FEE",
325
+ description: "Cityville Water Management",
326
+ subDescription: "Account: 1006",
327
+ amountValue: 5438,
328
+ details: {
329
+ description: "Cityville Water Management",
330
+ subDescription: "Account: 1006"
331
+ },
332
+ paymentAttributes: {
333
+ description: "Account: 1006",
334
+ subDescription: "",
335
+ amount: 5438
336
+ }
337
+ }
338
+ ],
339
+ actions: {
340
+ createPaymentFromProfile: fn(),
341
+ configureMultiCart: fn(),
342
+ addToMultiCart: fn(),
343
+ openCartSlider: fn(),
344
+ setDetailedObligation: fn(),
345
+ navigateToDetailedObligation: fn(),
346
+ deleteObligationAssoc: fn()
347
+ },
348
+ autoPayEnabled: true,
349
+ autoPayAvailable: true,
350
+ handleAutopayAction: fn(),
351
+ navigateToSettings: fn(),
352
+ deactivatePaymentSchedule: fn(),
353
+ isMobile: false,
354
+ nextAutopayDate: "On",
355
+ obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
356
+ dueDate: "2024-09-01",
357
+ agencyName: "Water",
358
+ isInCustomerManagement: false
359
+ },
360
+ render: args => (
361
+ <Box minWidth="800px">
362
+ <Obligation {...args} />
363
+ </Box>
364
+ )
365
+ };
366
+
367
+ export const InactiveObligation = {
368
+ args: {
369
+ config: { ...obligationConfig, icon: "ACCOUNTS_HEALTH" },
370
+ obligations: [
371
+ {
372
+ allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
373
+ amountDue: 5438,
374
+ customAttributes: {
375
+ account_number: "1006",
376
+ city: "Cityville",
377
+ client_slug: "Cityville",
378
+ customer_name: "Shadout Mapes",
379
+ due_date: "2024-09-01T12:00:00",
380
+ invoice_number: "101006.0",
381
+ line_item_description: "Shadout Mapes",
382
+ line_item_sub_description: "1006",
383
+ name: "Shadout Mapes",
384
+ service_type: "water",
385
+ state: "North Carolina",
386
+ street_address_line_1: "23145 O'Hara Wells",
387
+ sub_client_slug: "cityville-water",
388
+ total_due_amount: "5438.0",
389
+ utility_type: "water",
390
+ zip_code: "79221"
391
+ },
392
+ id: "1006",
393
+ kind: "FEE",
394
+ description: "Cityville Water Management",
395
+ subDescription: "Account: 1006",
396
+ amountValue: 5438,
397
+ details: {
398
+ description: "Cityville Water Management",
399
+ subDescription: "Account: 1006"
400
+ },
401
+ paymentAttributes: {
402
+ description: "Account: 1006",
403
+ subDescription: "",
404
+ amount: 5438
405
+ }
406
+ }
407
+ ],
408
+ actions: {
409
+ createPaymentFromProfile: fn(),
410
+ configureMultiCart: fn(),
411
+ addToMultiCart: fn(),
412
+ openCartSlider: fn(),
413
+ setDetailedObligation: fn(),
414
+ navigateToDetailedObligation: fn(),
415
+ deleteObligationAssoc: fn()
416
+ },
417
+ autoPayEnabled: false,
418
+ autoPayAvailable: true,
419
+ handleAutopayAction: fn(),
420
+ navigateToSettings: fn(),
421
+ deactivatePaymentSchedule: fn(),
422
+ isMobile: false,
423
+ nextAutopayDate: "",
424
+ obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
425
+ dueDate: "2024-09-01",
426
+ agencyName: "Health Service System",
427
+ isInCustomerManagement: false,
428
+ inactive: true,
429
+ inactiveLookupInput: undefined,
430
+ inactiveLookupTitle: "Health Service System",
431
+ inactiveLookupValue: "012856",
432
+ showRemoveButton: true
433
+ },
434
+ render: args => (
435
+ <Box minWidth="800px">
436
+ <Obligation {...args} />
437
+ </Box>
438
+ )
439
+ };
440
+
441
+ export const CustomerManagementObligation = {
442
+ args: {
443
+ config: obligationConfig,
444
+ obligations: [
445
+ {
446
+ allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
447
+ amountDue: 5438,
448
+ customAttributes: {
449
+ account_number: "1006",
450
+ city: "Cityville",
451
+ client_slug: "Cityville",
452
+ customer_name: "Shadout Mapes",
453
+ due_date: "2024-09-01T12:00:00",
454
+ invoice_number: "101006.0",
455
+ line_item_description: "Shadout Mapes",
456
+ line_item_sub_description: "1006",
457
+ name: "Shadout Mapes",
458
+ service_type: "water",
459
+ state: "North Carolina",
460
+ street_address_line_1: "23145 O'Hara Wells",
461
+ sub_client_slug: "cityville-water",
462
+ total_due_amount: "5438.0",
463
+ utility_type: "water",
464
+ zip_code: "79221"
465
+ },
466
+ id: "1006",
467
+ kind: "FEE",
468
+ description: "Cityville Water Management",
469
+ subDescription: "Account: 1006",
470
+ amountValue: 5438,
471
+ details: {
472
+ description: "Cityville Water Management",
473
+ subDescription: "Account: 1006"
474
+ },
475
+ paymentAttributes: {
476
+ description: "Account: 1006",
477
+ subDescription: "",
478
+ amount: 5438
479
+ }
480
+ }
481
+ ],
482
+ actions: {
483
+ createPaymentFromProfile: fn(),
484
+ configureMultiCart: fn(),
485
+ addToMultiCart: fn(),
486
+ openCartSlider: fn(),
487
+ setDetailedObligation: fn(),
488
+ navigateToDetailedObligation: fn(),
489
+ deleteObligationAssoc: fn()
490
+ },
491
+ autoPayEnabled: false,
492
+ autoPayAvailable: true,
493
+ handleAutopayAction: fn(),
494
+ navigateToSettings: fn(),
495
+ deactivatePaymentSchedule: fn(),
496
+ isMobile: false,
497
+ nextAutopayDate: "",
498
+ obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
499
+ dueDate: "2024-09-01",
500
+ agencyName: "Water",
501
+ isInCustomerManagement: true
502
+ },
503
+ render: args => (
504
+ <Box minWidth="800px">
505
+ <Obligation {...args} />
506
+ </Box>
507
+ )
508
+ };
509
+
510
+ export const CartEnabledObligation = {
511
+ args: {
512
+ config: obligationConfig,
513
+ obligations: [
514
+ {
515
+ allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
516
+ amountDue: 5438,
517
+ customAttributes: {
518
+ account_number: "1006",
519
+ city: "Cityville",
520
+ client_slug: "Cityville",
521
+ customer_name: "Shadout Mapes",
522
+ due_date: "2024-09-01T12:00:00",
523
+ invoice_number: "101006.0",
524
+ line_item_description: "Shadout Mapes",
525
+ line_item_sub_description: "1006",
526
+ name: "Shadout Mapes",
527
+ service_type: "water",
528
+ state: "North Carolina",
529
+ street_address_line_1: "23145 O'Hara Wells",
530
+ sub_client_slug: "cityville-water",
531
+ total_due_amount: "5438.0",
532
+ utility_type: "water",
533
+ zip_code: "79221"
534
+ },
535
+ id: "1006",
536
+ kind: "FEE",
537
+ description: "Cityville Water Management",
538
+ subDescription: "Account: 1006",
539
+ amountValue: 5438,
540
+ details: {
541
+ description: "Cityville Water Management",
542
+ subDescription: "Account: 1006"
543
+ },
544
+ paymentAttributes: {
545
+ description: "Account: 1006",
546
+ subDescription: "",
547
+ amount: 5438
548
+ }
549
+ }
550
+ ],
551
+ actions: {
552
+ createPaymentFromProfile: fn(),
553
+ configureMultiCart: fn(),
554
+ addToMultiCart: fn(),
555
+ openCartSlider: fn(),
556
+ setDetailedObligation: fn(),
557
+ navigateToDetailedObligation: fn(),
558
+ deleteObligationAssoc: fn()
559
+ },
560
+ autoPayEnabled: true,
561
+ autoPayAvailable: true,
562
+ handleAutopayAction: fn(),
563
+ navigateToSettings: fn(),
564
+ deactivatePaymentSchedule: fn(),
565
+ isMobile: false,
566
+ nextAutopayDate: "On",
567
+ obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
568
+ dueDate: "2024-09-01",
569
+ agencyName: "Water",
570
+ isInCustomerManagement: false,
571
+ cartEnabled: true,
572
+ cartConfig: {},
573
+ isInCart: true,
574
+ multiCartParams: undefined
575
+ },
576
+ render: args => (
577
+ <Box minWidth="800px">
578
+ <Obligation {...args} />
579
+ </Box>
580
+ )
581
+ };
582
+
583
+ export const LoadingObligation = {
584
+ args: {
585
+ config: { ...obligationConfig, icon: "ACCOUNTS_HEALTH" },
586
+ obligations: [
587
+ {
588
+ allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
589
+ amountDue: 5438,
590
+ customAttributes: {
591
+ account_number: "1006",
592
+ city: "Cityville",
593
+ client_slug: "Cityville",
594
+ customer_name: "Shadout Mapes",
595
+ name: "Shadout Mapes",
596
+ service_type: "water",
597
+ sub_client_slug: "cityville-water",
598
+ utility_type: "water",
599
+ zip_code: "79221"
600
+ },
601
+ id: "1006",
602
+ kind: "FEE",
603
+ description: "Cityville Water Management",
604
+ subDescription: "Account: 1006",
605
+ details: {
606
+ description: "Cityville Water Management",
607
+ subDescription: "Account: 1006"
608
+ }
609
+ }
610
+ ],
611
+ actions: {
612
+ createPaymentFromProfile: fn(),
613
+ configureMultiCart: fn(),
614
+ addToMultiCart: fn(),
615
+ openCartSlider: fn(),
616
+ setDetailedObligation: fn(),
617
+ navigateToDetailedObligation: fn(),
618
+ deleteObligationAssoc: fn()
619
+ },
620
+ autoPayEnabled: false,
621
+ autoPayAvailable: true,
622
+ handleAutopayAction: fn(),
623
+ navigateToSettings: fn(),
624
+ deactivatePaymentSchedule: fn(),
625
+ isMobile: false,
626
+ nextAutopayDate: "",
627
+ obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
628
+ dueDate: "2024-09-01",
629
+ agencyName: "Health Service System",
630
+ isInCustomerManagement: false,
631
+ inactive: false,
632
+ inactiveLookupInput: undefined,
633
+ inactiveLookupTitle: "Health Service System",
634
+ inactiveLookupValue: "012856",
635
+ isLoading: true
636
+ },
637
+ render: args => (
638
+ <Box minWidth="800px">
639
+ <Obligation {...args} />
640
+ </Box>
641
+ )
642
+ };
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
 
3
- const PropertyBusinessIcon = () => (
3
+ const PropertyBusinessIcon = ({ color }) => (
4
4
  <svg
5
5
  width="48"
6
6
  height="48"
@@ -10,7 +10,7 @@ const PropertyBusinessIcon = () => (
10
10
  >
11
11
  <path
12
12
  d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
13
- fill="#3B5BDB"
13
+ fill={color}
14
14
  />
15
15
  <path
16
16
  fillRule="evenodd"
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
 
3
- const PropertyCarIcon = () => (
3
+ const PropertyCarIcon = ({ color }) => (
4
4
  <svg
5
5
  width="48"
6
6
  height="48"
@@ -10,7 +10,7 @@ const PropertyCarIcon = () => (
10
10
  >
11
11
  <path
12
12
  d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
13
- fill="#3B5BDB"
13
+ fill={color}
14
14
  />
15
15
  <path
16
16
  d="M36.8919 19.7729H33.7284L32.8492 17.5748C31.9457 15.3149 29.7893 13.855 27.3551 13.855H20.6446C18.2108 13.855 16.054 15.3149 15.1499 17.5748L14.2707 19.7729H11.1077C10.6951 19.7729 10.3923 20.1607 10.4927 20.5607L10.8097 21.8288C10.88 22.111 11.1336 22.3091 11.4248 22.3091H12.4852C11.7756 22.9289 11.3186 23.8298 11.3186 24.8454V27.3816C11.3186 28.2334 11.6441 29.0022 12.164 29.5972V32.4541C12.164 33.3878 12.9212 34.145 13.8548 34.145H15.5457C16.4793 34.145 17.2365 33.3878 17.2365 32.4541V30.7633H30.7631V32.4541C30.7631 33.3878 31.5203 34.145 32.454 34.145H34.1448C35.0785 34.145 35.8356 33.3878 35.8356 32.4541V29.5972C36.3556 29.0027 36.6811 28.2339 36.6811 27.3816V24.8454C36.6811 23.8298 36.224 22.9289 35.5149 22.3091H36.5754C36.8665 22.3091 37.1202 22.111 37.1904 21.8288L37.5075 20.5607C37.6073 20.1607 37.3046 19.7729 36.8919 19.7729ZM18.2896 18.8308C18.6747 17.8681 19.6073 17.2366 20.6446 17.2366H27.3551C28.3923 17.2366 29.3249 17.8681 29.7101 18.8308L30.7631 21.4637H17.2365L18.2896 18.8308ZM15.5457 27.3711C14.5312 27.3711 13.8548 26.6969 13.8548 25.6855C13.8548 24.6742 14.5312 24 15.5457 24C16.5601 24 18.0819 25.517 18.0819 26.5283C18.0819 27.5396 16.5601 27.3711 15.5457 27.3711ZM32.454 27.3711C31.4395 27.3711 29.9177 27.5396 29.9177 26.5283C29.9177 25.517 31.4395 24 32.454 24C33.4685 24 34.1448 24.6742 34.1448 25.6855C34.1448 26.6969 33.4685 27.3711 32.454 27.3711Z"
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
 
3
- const PropertyCommercialVehicleIcon = () => (
3
+ const PropertyCommercialVehicleIcon = ({ color }) => (
4
4
  <svg
5
5
  width="48"
6
6
  height="48"
@@ -10,7 +10,7 @@ const PropertyCommercialVehicleIcon = () => (
10
10
  >
11
11
  <path
12
12
  d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
13
- fill="#3B5BDB"
13
+ fill={color}
14
14
  />
15
15
  <path
16
16
  d="M30.7656 35.15C31.9193 35.15 32.8999 34.7462 33.7074 33.9387C34.515 33.1311 34.9188 32.1505 34.9188 30.9969H36.9953C37.1972 30.9969 37.363 30.932 37.4928 30.8022C37.6226 30.6724 37.6875 30.5066 37.6875 30.3047V28.9203C37.6875 28.7184 37.6226 28.5526 37.4928 28.4228C37.363 28.293 37.1972 28.2281 36.9953 28.2281H36.3031V23.5559C36.3031 22.979 36.1012 22.4887 35.6975 22.085L31.3713 17.7588C30.9675 17.355 30.4772 17.1531 29.9004 17.1531H27.9969V15.0766C27.9969 14.4997 27.795 14.0094 27.3912 13.6057C26.9874 13.2019 26.4971 13 25.9203 13H12.0766C11.4997 13 11.0094 13.2019 10.6057 13.6057C10.2019 14.0094 10 14.4997 10 15.0766V28.9203C10 29.4971 10.2019 29.9874 10.6057 30.3912C11.0094 30.795 11.4997 30.9969 12.0766 30.9969H12.7688C12.7688 32.1505 13.1725 33.1311 13.9801 33.9387C14.7876 34.7462 15.7682 35.15 16.9219 35.15C18.0755 35.15 19.0561 34.7462 19.8637 33.9387C20.6712 33.1311 21.075 32.1505 21.075 30.9969H26.6125C26.6125 32.1505 27.0163 33.1311 27.8238 33.9387C28.6314 34.7462 29.612 35.15 30.7656 35.15ZM34.2266 24.075H27.9969V19.2297H29.9004L34.2266 23.5559V24.075ZM16.9219 33.0734C16.3451 33.0734 15.8548 32.8715 15.451 32.4678C15.0472 32.064 14.8453 31.5737 14.8453 30.9969C14.8453 30.4201 15.0472 29.9298 15.451 29.526C15.8548 29.1222 16.3451 28.9203 16.9219 28.9203C17.4987 28.9203 17.989 29.1222 18.3928 29.526C18.7965 29.9298 18.9984 30.4201 18.9984 30.9969C18.9984 31.5737 18.7965 32.064 18.3928 32.4678C17.989 32.8715 17.4987 33.0734 16.9219 33.0734ZM30.7656 33.0734C30.1888 33.0734 29.6985 32.8715 29.2947 32.4678C28.891 32.064 28.6891 31.5737 28.6891 30.9969C28.6891 30.4201 28.891 29.9298 29.2947 29.526C29.6985 29.1222 30.1888 28.9203 30.7656 28.9203C31.3424 28.9203 31.8327 29.1222 32.2365 29.526C32.6403 29.9298 32.8422 30.4201 32.8422 30.9969C32.8422 31.5737 32.6403 32.064 32.2365 32.4678C31.8327 32.8715 31.3424 33.0734 30.7656 33.0734Z"