Repository: novuhq/novu
File: apps/dashboard/src/components/welcome/inbox-framework-guide.tsx (TypeScript)

Code before:
    ...framework,
    installSteps: framework.installSteps.map((step) => ({
      ...step,
      code: step.code
        ?.replace(/YOUR_APP_ID/g, environmentIdentifier)
        ?.replace(/YOUR_APPLICATION_IDENTIFIER/g, environmentIdentifier)
        ?.replace(/YOUR_SUBSCRIBER_ID/g, subscriberId)
        ?.replace(/YOUR_PRIMARY_COLOR/g, primaryColor)
        ?.replace(/YOUR_FOREGROUND_COLOR/g, foregroundColor),
    })),
  };
}

export function InboxFrameworkGuide({
  currentEnvironment,
  subscriberId,
  primaryColor,
  foregroundColor,
}: InboxFrameworkGuideProps) {
  const track = useTelemetry();
  const [selectedFramework, setSelectedFramework] = useState<CliFramework | ManualFramework>(
    cliFrameworks.find((f) => f.selected) || cliFrameworks[0]
  );
  const [installationMethod, setInstallationMethod] = useState<'cli' | 'manual'>('cli');
  const [packageManager, setPackageManager] = useState<PackageManager>('npm');

  useEffect(() => {
    if (!currentEnvironment?.identifier || !subscriberId) return;

    const frameworks = installationMethod === 'cli' ? cliFrameworks : manualFrameworks;
    const updatedFrameworks = frameworks.map((framework) =>
      updateFrameworkCode(framework, currentEnvironment.identifier, subscriberId, primaryColor, foregroundColor)
    );

    setSelectedFramework(updatedFrameworks.find((f) => f.name === selectedFramework.name) || updatedFrameworks[0]);
  }, [
    currentEnvironment?.identifier,
    subscriberId,
    selectedFramework.name,
    primaryColor,
    foregroundColor,
    installationMethod,
  ]);

  useEffect(() => {
    if (['Remix', 'Native', 'Angular', 'JavaScript'].includes(selectedFramework.name)) {
      setInstallationMethod('manual');
    }
  }, [selectedFramework.name]);

  function handleFrameworkSelect(framework: CliFramework | ManualFramework) {

Review comment (suggestion):
is something missing here, as I see this variable `packageManager` is used in the `getCliCommand` function, which is an orphan

Code after:
  return {
    ...framework,
    installSteps: framework.installSteps.map((step) => ({
      ...step,
      code: step.code
        ?.replace(/YOUR_APP_ID/g, environmentIdentifier)
        ?.replace(/YOUR_APPLICATION_IDENTIFIER/g, environmentIdentifier)
        ?.replace(/YOUR_SUBSCRIBER_ID/g, subscriberId)
        ?.replace(/YOUR_PRIMARY_COLOR/g, primaryColor)
        ?.replace(/YOUR_FOREGROUND_COLOR/g, foregroundColor),
    })),
  };
}

export function InboxFrameworkGuide({
  currentEnvironment,
  subscriberId,
  primaryColor,
  foregroundColor,
}: InboxFrameworkGuideProps) {
  const track = useTelemetry();
  const [selectedFramework, setSelectedFramework] = useState<Framework>(
    getFrameworks('cli').find((f) => f.selected) || getFrameworks('cli')[0]
  );
  const [installationMethod, setInstallationMethod] = useState<'cli' | 'manual'>('cli');
  const [packageManager, setPackageManager] = useState<PackageManager>('npm');

  useEffect(() => {
    if (!currentEnvironment?.identifier || !subscriberId) return;

    const frameworks = getFrameworks(installationMethod);
    const updatedFrameworks = frameworks.map((framework) =>
      updateFrameworkCode(framework, currentEnvironment.identifier, subscriberId, primaryColor, foregroundColor)
    );

    setSelectedFramework(updatedFrameworks.find((f) => f.name === selectedFramework.name) || updatedFrameworks[0]);
  }, [
    currentEnvironment?.identifier,
    subscriberId,
    selectedFramework.name,
    primaryColor,
    foregroundColor,
    installationMethod,
  ]);

  useEffect(() => {
    if (['Remix', 'Native', 'Angular', 'JavaScript'].includes(selectedFramework.name)) {
      setInstallationMethod('manual');
    }
  }, [selectedFramework.name]);