StellarSplit/frontend/src/components/InstallPrompt.tsx at main · ghzhost/StellarSplit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import { usePWA } from "../hooks/usePWA";
import { useServiceWorkerStore } from "../store/serviceWorkerStore";
import {
  applyServiceWorkerUpdate,
  forceRefreshWithCacheClear,
  registerServiceWorker,
} from "../utils/sw-register";

const InstallPrompt = () => {
  const { canInstall, installApp } = usePWA();
  const phase = useServiceWorkerStore((s) => s.phase);
  const error = useServiceWorkerStore((s) => s.error);
  const clearError = useServiceWorkerStore((s) => s.clearError);
  const dismissUpdateBanner = useServiceWorkerStore(
    (s) => s.dismissUpdateBanner,
  );

  const showPwaCard = canInstall;
  const showUpdate = phase === "update_available";
  const showError = phase === "error" && error;
  if (!showPwaCard && !showUpdate && !showError) return null;

  return (
    <div
      className="pointer-events-auto fixed bottom-4 right-4 z-[200] flex max-w-md flex-col gap-3"
      data-testid="pwa-floating-cta"
    >
      {showUpdate && (
        <div
          role="status"
          aria-live="polite"
          className="rounded-xl border border-theme bg-card-theme p-4 text-theme shadow-lg"
        >
          <p className="text-sm font-semibold">A new version is available</p>
          <p className="mt-1 text-sm text-muted-theme">
            Reload the app to use the latest StellarSplit. You can do a full
            refresh to clear cached assets if something still looks out of
            date.
          </p>
          <div className="mt-3 flex flex-wrap gap-2">
            <button
              type="button"
              onClick={() => applyServiceWorkerUpdate()}
              className="rounded-lg bg-accent px-3 py-1.5 text-sm font-medium text-white"
            >
              Reload to update
            </button>
            <button
              type="button"
              onClick={() => void forceRefreshWithCacheClear()}
              className="rounded-lg border border-theme px-3 py-1.5 text-sm font-medium text-theme"
            >
              Full refresh (clear cache)
            </button>
            <button
              type="button"
              onClick={dismissUpdateBanner}
              className="rounded-lg px-3 py-1.5 text-sm text-muted-theme hover:underline"
            >
              Not now
            </button>
          </div>
        </div>
      )}

      {showError && (
        <div
          role="alert"
          className="rounded-xl border border-red-500/40 bg-red-50 p-4 text-sm text-red-900 shadow-lg dark:bg-red-950/40 dark:text-red-100"
        >
          <p className="font-semibold">App update could not be prepared</p>
          <p className="mt-1 opacity-90">{error}</p>
          <div className="mt-2 flex flex-wrap gap-2">
            <button
              type="button"
              onClick={() => {
                void registerServiceWorker();
              }}
              className="rounded-lg bg-red-700 px-3 py-1.5 text-sm font-medium text-white dark:bg-red-600"
            >
              Try again
            </button>
            <button
              type="button"
              onClick={() => void clearError()}
              className="rounded-lg px-3 py-1.5 text-sm underline"
            >
              Dismiss
            </button>
            <button
              type="button"
              onClick={() => void forceRefreshWithCacheClear()}
              className="rounded-lg border border-red-500/50 px-3 py-1.5 text-sm font-medium"
            >
              Full refresh
            </button>
          </div>
        </div>
      )}

      {showPwaCard && (
        <div className="rounded-lg bg-zinc-900 p-4 text-white shadow-lg">
          <p>Install StellarSplit for a better experience</p>
          <button
            type="button"
            onClick={installApp}
            className="mt-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white"
          >
            Install
          </button>
        </div>
      )}
    </div>
  );
};

export default InstallPrompt;