New source found from dndbeyond.com

ddb_main/tools/js/Shared/containers/panes/CurrencyPane/CurrencyPane.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 import { connect, DispatchProp } from "react-redux";
+import { AnyAction } from "redux";
 
-import { FeatureFlagContext } from "@dndbeyond/character-components/es";
 import {
   characterActions,
   CharacterCurrencyContract,
@@ -15,12 +15,12 @@ import {
   serviceDataSelectors,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { SettingsButton } from "~/subApps/sheet/components/SettingsButton";
 import { Header } from "~/subApps/sheet/components/Sidebar/components/Header";
 import { PaneIdentifiersCurrencyContext } from "~/subApps/sheet/components/Sidebar/types";
 
 import CurrencyCollapsible from "../../../../CharacterSheet/components/CurrencyCollapsible";
 import Lifestyle from "../../../../CharacterSheet/components/Lifestyle";
-import SettingsButton from "../../../../CharacterSheet/components/SettingsButton";
 import * as toastActions from "../../../actions/toastMessage/actions";
 import { CURRENCY_VALUE } from "../../../constants/App";
 import { CoinManagerContext } from "../../../managers/CoinManagerContext";
@@ -29,7 +29,9 @@ import { SharedAppState } from "../../../stores/typings";
 import { SettingsContextsEnum } from "../SettingsPane/typings";
 import { CurrencyErrorTypeEnum } from "./CurrencyPaneConstants";
 
-interface Props extends DispatchProp {
+// TODO: We are typing with AnyAction here to work around issues with UnknownAction, the type that was introduced in Redux 5.
+// If we decide to modernize to Redux 5, we will need to refactor much of the Rules Engine redux usage.
+interface Props extends DispatchProp<AnyAction> {
   lifestyle: CharacterLifestyleContract | null;
   coin: CharacterCurrencyContract;
   ruleData: RuleData;
@@ -136,7 +138,7 @@ class CurrencyPane extends React.PureComponent<Props> {
     const { isReadonly, ruleData, lifestyle } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <div
           role="heading"
           aria-level={2}
@@ -159,7 +161,7 @@ class CurrencyPane extends React.PureComponent<Props> {
           lifestyle={lifestyle}
           ruleData={ruleData}
         />
-      </React.Fragment>
+      </>
     );
   };
 
@@ -190,86 +192,79 @@ class CurrencyPane extends React.PureComponent<Props> {
     );
 
     return (
-      <FeatureFlagContext.Consumer>
-        {({ imsFlag }) => (
-          <div className="ct-currency-pane">
-            <Header
-              callout={
-                <SettingsButton
-                  context={SettingsContextsEnum.COIN}
-                  isReadonly={isReadonly}
-                />
-              }
+      <div className="ct-currency-pane">
+        <Header
+          callout={
+            !isReadonly && (
+              <SettingsButton context={SettingsContextsEnum.COIN} />
+            )
+          }
+        >
+          Manage Coin
+        </Header>
+        {partyDefinitionKey ? (
+          <>
+            <div
+              role="heading"
+              aria-level={2}
+              className="ct-currency-pane__subheader"
             >
-              Manage Coin
-            </Header>
-            {imsFlag &&
-            coinManager.isSharingTurnedOnOrDeleteOnly() &&
-            partyDefinitionKey ? (
-              <React.Fragment>
-                <div
-                  role="heading"
-                  aria-level={2}
-                  className="ct-currency-pane__subheader"
-                >
-                  My Coin
-                </div>
-                {characterContainer && (
-                  <CurrencyCollapsible
-                    heading={this.deriveCoinLabel(
-                      ContainerUtils.getName(characterContainer)
-                    )}
-                    initiallyCollapsed={
-                      containerDefinitionKeyContext !==
-                      ContainerUtils.getDefinitionKey(characterContainer)
-                    }
-                    isReadonly={isReadonly}
-                    container={characterContainer}
-                    handleCurrencyChangeError={this.handleCurrencyChangeError.bind(
-                      this
-                    )}
-                    handleCurrencyAdjust={this.handleCurrencyAdjust.bind(this)}
-                    handleAmountSet={this.handleAmountSet.bind(this)}
-                  />
+              My Coin
+            </div>
+            {characterContainer && (
+              <CurrencyCollapsible
+                heading={this.deriveCoinLabel(
+                  ContainerUtils.getName(characterContainer)
                 )}
-                <Lifestyle
-                  isReadonly={isReadonly}
-                  handleLifestyleUpdate={this.handleLifestyleUpdate.bind(this)}
-                  lifestyle={lifestyle}
-                  ruleData={ruleData}
-                />
-                <div
-                  role="heading"
-                  aria-level={2}
-                  className="ct-currency-pane__subheader"
-                >
-                  Party Coin
-                </div>
-                {partyContainer && (
-                  <CurrencyCollapsible
-                    heading={this.deriveCoinLabel(
-                      ContainerUtils.getName(partyContainer)
-                    )}
-                    initiallyCollapsed={
-                      containerDefinitionKeyContext !==
-                      ContainerUtils.getDefinitionKey(partyContainer)
-                    }
-                    isReadonly={isReadonly}
-                    container={partyContainer}
-                    handleCurrencyChangeError={this.handleCurrencyChangeError.bind(
-                      this
-                    )}
-                    handleCurrencyAdjust={this.handleCurrencyAdjust.bind(this)}
-                    handleAmountSet={this.handleAmountSet.bind(this)}
-                  />
+                initiallyCollapsed={
+                  containerDefinitionKeyContext !==
+                  ContainerUtils.getDefinitionKey(characterContainer)
+                }
+                isReadonly={isReadonly}
+                container={characterContainer}
+                handleCurrencyChangeError={this.handleCurrencyChangeError.bind(
+                  this
                 )}
-              </React.Fragment>
-            ) : (
-              characterContainer && this.renderCharacterCoin(characterContainer)
+                handleCurrencyAdjust={this.handleCurrencyAdjust.bind(this)}
+                handleAmountSet={this.handleAmountSet.bind(this)}
+              />
             )}
-          </div>
+            <Lifestyle
+              isReadonly={isReadonly}
+              handleLifestyleUpdate={this.handleLifestyleUpdate.bind(this)}
+              lifestyle={lifestyle}
+              ruleData={ruleData}
+            />
+            <div
+              role="heading"
+              aria-level={2}
+              className="ct-currency-pane__subheader"
+            >
+              Party Coin
+            </div>
+            {partyContainer && (
+              <CurrencyCollapsible
+                heading={this.deriveCoinLabel(
+                  ContainerUtils.getName(partyContainer)
+                )}
+                initiallyCollapsed={
+                  containerDefinitionKeyContext !==
+                  ContainerUtils.getDefinitionKey(partyContainer)
+                }
+                isReadonly={isReadonly}
+                container={partyContainer}
+                handleCurrencyChangeError={this.handleCurrencyChangeError.bind(
+                  this
+                )}
+                handleCurrencyAdjust={this.handleCurrencyAdjust.bind(this)}
+                handleAmountSet={this.handleAmountSet.bind(this)}
+              />
+            )}
+          </>
+        ) : (
+          characterContainer && this.renderCharacterCoin(characterContainer)
         )}
-      </FeatureFlagContext.Consumer>
+      </div>
     );
   }
 
@@ -297,39 +292,72 @@ class CurrencyPane extends React.PureComponent<Props> {
     const containerDefinitionKeyContext =
       identifiers?.containerDefinitionKeyContext;
     return (
-      <FeatureFlagContext.Consumer>
-        {({ imsFlag }) => (
-          <div className="ct-currency-pane">
-            <Header
-              callout={
-                <SettingsButton
-                  context={SettingsContextsEnum.COIN}
-                  isReadonly={isReadonly}
-                />
+      <div className="ct-currency-pane">
+        <Header
+          callout={
+            !isReadonly && (
+              <SettingsButton context={SettingsContextsEnum.COIN} />
+            )
+          }
+        >
+          Manage Coin
+        </Header>
+        <div
+          role="heading"
+          aria-level={2}
+          className="ct-currency-pane__subheader"
+        >
+          My Coin
+        </div>
+        {characterContainers.map((characterContainer) =>
+          ContainerUtils.getCoin(characterContainer) ? (
+            <CurrencyCollapsible
+              heading={this.deriveCoinLabel(
+                ContainerUtils.getName(characterContainer)
+              )}
+              key={ContainerUtils.getDefinitionKey(characterContainer)}
+              initiallyCollapsed={
+                containerDefinitionKeyContext !==
+                ContainerUtils.getDefinitionKey(characterContainer)
               }
-            >
-              Manage Coin
-            </Header>
+              isReadonly={isReadonly}
+              container={characterContainer}
+              handleCurrencyChangeError={this.handleCurrencyChangeError.bind(
+                this
+              )}
+              handleCurrencyAdjust={this.handleCurrencyAdjust.bind(this)}
+              handleAmountSet={this.handleAmountSet.bind(this)}
+            />
+          ) : null
+        )}
+        <Lifestyle
+          isReadonly={isReadonly}
+          handleLifestyleUpdate={this.handleLifestyleUpdate.bind(this)}
+          lifestyle={lifestyle}
+          ruleData={ruleData}
+        />
+        {partyDefinitionKey && (
+          <>
             <div
               role="heading"
               aria-level={2}
               className="ct-currency-pane__subheader"
             >
-              My Coin
+              Party Coin
             </div>
-            {characterContainers.map((characterContainer) =>
-              ContainerUtils.getCoin(characterContainer) ? (
+            {partyContainers.map((partyContainer) =>
+              ContainerUtils.getCoin(partyContainer) ? (
                 <CurrencyCollapsible
                   heading={this.deriveCoinLabel(
-                    ContainerUtils.getName(characterContainer)
+                    ContainerUtils.getName(partyContainer)
                   )}
-                  key={ContainerUtils.getDefinitionKey(characterContainer)}
+                  key={ContainerUtils.getDefinitionKey(partyContainer)}
                   initiallyCollapsed={
                     containerDefinitionKeyContext !==
-                    ContainerUtils.getDefinitionKey(characterContainer)
+                    ContainerUtils.getDefinitionKey(partyContainer)
                   }
                   isReadonly={isReadonly}
-                  container={characterContainer}
+                  container={partyContainer}
                   handleCurrencyChangeError={this.handleCurrencyChangeError.bind(
                     this
                   )}
@@ -338,51 +366,9 @@ class CurrencyPane extends React.PureComponent<Props> {
                 />
               ) : null
             )}
-            <Lifestyle
-              isReadonly={isReadonly}
-              handleLifestyleUpdate={this.handleLifestyleUpdate.bind(this)}
-              lifestyle={lifestyle}
-              ruleData={ruleData}
-            />
-            {imsFlag &&
-              coinManager.isSharingTurnedOnOrDeleteOnly() &&
-              partyDefinitionKey && (
-                <>
-                  <div
-                    role="heading"
-                    aria-level={2}
-                    className="ct-currency-pane__subheader"
-                  >
-                    Party Coin
-                  </div>
-                  {partyContainers.map((partyContainer) =>
-                    ContainerUtils.getCoin(partyContainer) ? (
-                      <CurrencyCollapsible
-                        heading={this.deriveCoinLabel(
-                          ContainerUtils.getName(partyContainer)
-                        )}
-                        key={ContainerUtils.getDefinitionKey(partyContainer)}
-                        initiallyCollapsed={
-                          containerDefinitionKeyContext !==
-                          ContainerUtils.getDefinitionKey(partyContainer)
-                        }
-                        isReadonly={isReadonly}
-                        container={partyContainer}
-                        handleCurrencyChangeError={this.handleCurrencyChangeError.bind(
-                          this
-                        )}
-                        handleCurrencyAdjust={this.handleCurrencyAdjust.bind(
-                          this
-                        )}
-                        handleAmountSet={this.handleAmountSet.bind(this)}
-                      />
-                    ) : null
-                  )}
-                </>
-              )}
-          </div>
+          </>
         )}
-      </FeatureFlagContext.Consumer>
+      </div>
     );
   }
 

ddb_main/tools/js/Shared/containers/panes/CurrencyPane/CurrencyPaneAdjuster/CurrencyPaneAdjuster.tsx

@@ -1,6 +1,3 @@
-import AddIcon from "@mui/icons-material/Add";
-import CloseIcon from "@mui/icons-material/Close";
-import RemoveIcon from "@mui/icons-material/Remove";
 import React, { useContext } from "react";
 
 import { Button } from "@dndbeyond/character-components/es";
@@ -9,6 +6,9 @@ import {
   CoinManager,
   Constants,
 } from "@dndbeyond/character-rules-engine/es";
+import RemoveIcon from "@dndbeyond/fontawesome-cache/svgs/sharp-regular/minus.svg";
+import AddIcon from "@dndbeyond/fontawesome-cache/svgs/sharp-regular/plus.svg";
+import CloseIcon from "@dndbeyond/fontawesome-cache/svgs/sharp-regular/xmark.svg";
 
 import { Heading } from "~/subApps/sheet/components/Sidebar/components/Heading";
 
@@ -16,6 +16,7 @@ import { ThemeButton } from "../../../../components/common/Button";
 import { CURRENCY_VALUE } from "../../../../constants/App";
 import { CoinManagerContext } from "../../../../managers/CoinManagerContext";
 import CurrencyPaneAdjusterType from "../CurrencyPaneAdjusterType";
+import styles from "./styles.module.css";
 
 interface Props {
   onAdjust?: (
@@ -184,7 +185,7 @@ class CurrencyPaneAdjuster extends React.PureComponent<
           <div className="ct-currency-pane__adjuster-action ct-currency-pane__adjuster-action--positive">
             <Button size="medium" onClick={this.handleAdd}>
               <span className="ct-currency-pane__adjuster-actions-button-content">
-                <AddIcon sx={{ width: "13px", height: "13px" }} />
+                <AddIcon className={styles.icon} />
                 Add
               </span>
             </Button>
@@ -192,7 +193,7 @@ class CurrencyPaneAdjuster extends React.PureComponent<
           <div className="ct-currency-pane__adjuster-action ct-currency-pane__adjuster-action--negative">
             <Button size="medium" onClick={this.handleRemove}>
               <span className="ct-currency-pane__adjuster-actions-button-content">
-                <RemoveIcon sx={{ width: "13px", height: "13px" }} />
+                <RemoveIcon className={styles.icon} />
                 Remove
               </span>
             </Button>
@@ -204,7 +205,7 @@ class CurrencyPaneAdjuster extends React.PureComponent<
               onClick={this.handleReset}
             >
               <span className="ct-currency-pane__adjuster-actions-button-content">
-                <CloseIcon sx={{ width: "13px", height: "13px" }} />
+                <CloseIcon className={styles.icon} />
                 Clear
               </span>
             </ThemeButton>

ddb_main/tools/js/Shared/containers/panes/CurrencyPane/CurrencyPaneEditor/CurrencyPaneEditor.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import { PureComponent, PropsWithChildren } from "react";
 
 import { FormatUtils } from "@dndbeyond/character-rules-engine/es";
 
-interface Props {
+interface Props extends PropsWithChildren {
   propertyKey: string;
   className: string;
 }
-export default class CurrencyPaneEditor extends React.PureComponent<Props> {
+export default class CurrencyPaneEditor extends PureComponent<Props> {
   static defaultProps = {
     className: "",
   };

ddb_main/tools/js/Shared/containers/panes/CurrencyPane/CurrencyPaneEditorValue/CurrencyPaneEditorValue.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import { PureComponent, PropsWithChildren } from "react";
 
-export default class CurrencyPaneEditorValue extends React.PureComponent {
+export default class CurrencyPaneEditorValue extends PureComponent<PropsWithChildren> {
   render() {
     return (
       <div className="ct-currency-pane__editor-value">

ddb_main/tools/js/Shared/containers/panes/CurrencyPane/CurrencyPaneSelectEditor/CurrencyPaneSelectEditor.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import { Select } from "@dndbeyond/character-components/es";
 import {
   HelperUtils,
   HtmlSelectOption,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { Select } from "~/components/Select";
 import { Heading } from "~/subApps/sheet/components/Sidebar/components/Heading";
 
 import CurrencyPaneEditor from "../CurrencyPaneEditor";
@@ -62,7 +62,8 @@ export default class CurrencyPaneSelectEditor extends React.PureComponent<
             options={options}
             value={value}
             onChange={this.handleChange}
-            isReadonly={isReadonly}
+            disabled={isReadonly}
+            name={`currency-select-${propertyKey}`}
           />
         </CurrencyPaneEditorValue>
       </CurrencyPaneEditor>