New source found from dndbeyond.com

ddb_main/subApps/sheet/components/Sidebar/panes/FeatsManagePane/FeatDetail/FeatDetail.tsx

@@ -1,9 +1,15 @@
 import { FC, HTMLAttributes } from "react";
+import { useDispatch } from "react-redux";
 
-import { FeatManager } from "@dndbeyond/character-rules-engine/es";
+import {
+  characterActions,
+  ChoiceUtils,
+  FeatManager,
+} from "@dndbeyond/character-rules-engine/es";
 
 import { HtmlContent } from "~/components/HtmlContent";
-import { DetailChoiceFeat } from "~/tools/js/Shared/containers/DetailChoice";
+import { useCharacterEngine } from "~/hooks/useCharacterEngine";
+import { DetailChoice } from "~/tools/js/Shared/containers/DetailChoice";
 
 import styles from "./styles.module.css";
 
@@ -12,9 +18,28 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const FeatDetail: FC<Props> = ({ featManager, className, ...props }) => {
+  const dispatch = useDispatch();
+  const { ruleData, entityRestrictionData, choiceInfo } = useCharacterEngine();
+
   const prerequisiteDescription = featManager.getPrerequisiteDescription();
   const featDescription = featManager.getDescription();
 
+  const handleChoiceChange = (
+    id: string | null,
+    type: number,
+    value: any
+  ): void => {
+    if (featManager && id !== null) {
+      dispatch(
+        characterActions.featChoiceSetRequest(
+          featManager.getId(),
+          type,
+          id,
+          value
+        )
+      );
+    }
+  };
   return (
     <div className={className} {...props}>
       {prerequisiteDescription && (
@@ -27,7 +52,31 @@ export const FeatDetail: FC<Props> = ({ featManager, className, ...props }) => {
       )}
       {featManager.getChoices().length > 0 && (
         <div className={styles.choices}>
-          <DetailChoiceFeat featId={featManager.getId()} />
+          {featManager.getChoices().map((choice) => {
+            const id = ChoiceUtils.getId(choice);
+
+            const { description, options: featChoiceOptions } =
+              ChoiceUtils.getSortedChoiceOptionsForFeatsInfo(
+                featManager.getId(),
+                choice,
+                ruleData,
+                entityRestrictionData
+              );
+
+            return (
+              <DetailChoice
+                {...choice}
+                label={choice.label}
+                choice={choice}
+                key={id !== null ? id : ""}
+                options={featChoiceOptions}
+                onChange={handleChoiceChange}
+                choiceInfo={choiceInfo}
+                showBackgroundProficiencyOptions={true}
+                description={description}
+              />
+            );
+          })}
         </div>
       )}
     </div>