refactor(optional-policies): convert UpdateAlert and Policy model to TS

js/src/@types/Model/User.d.ts

@@ -0,0 +1,17 @@
+export * from 'flarum/common/models/User';
+
+declare module 'flarum/common/models/User' {
+  export default interface User {
+    fofTermsPoliciesHasUpdate(): boolean;
+    fofTermsPoliciesMustAccept(): boolean;
+    fofTermsPoliciesState(): Record<
+      number,
+      {
+        accepted_at: string;
+        has_update: boolean;
+        is_accepted: boolean;
+        must_accept: boolean;
+      }
+    >;
+  }
+}

js/src/common/models/Policy.js → js/src/common/models/Policy.ts

@@ -2,12 +2,12 @@ import Model from 'flarum/common/Model';
 import computed from 'flarum/common/utils/computed';
 
 export default class Policy extends Model {
-  sort = Model.attribute('sort');
-  name = Model.attribute('name');
-  url = Model.attribute('url');
-  update_message = Model.attribute('update_message');
-  terms_updated_at = Model.attribute('terms_updated_at');
-  optional = Model.attribute('optional');
+  sort = Model.attribute<string>('sort');
+  name = Model.attribute<string>('name');
+  url = Model.attribute<string>('url');
+  update_message = Model.attribute<string>('update_message');
+  terms_updated_at = Model.attribute<string>('terms_updated_at');
+  optional = Model.attribute<boolean>('optional');
   additional_info = Model.attribute('additional_info');
   form_key = computed('id', (id) => 'fof_terms_policy_' + id);
 

js/src/forum/components/UpdateAlert.tsx

@@ -0,0 +1,65 @@
+import app from 'flarum/forum/app';
+import Button from 'flarum/common/components/Button';
+import listItems from 'flarum/common/helpers/listItems';
+import AcceptPoliciesModal from './AcceptPoliciesModal';
+
+let temporarilyHidden = false;
+
+/**
+ * Renders similarly to Flarum's Alert, but with an additional .container inside
+ */
+export default class UpdateAlert {
+  shouldShowAlert() {
+    if (temporarilyHidden) {
+      return false;
+    }
+
+    const user = app.session.user;
+
+    return user && user.fofTermsPoliciesHasUpdate();
+  }
+
+  view() {
+    if (!this.shouldShowAlert() || !app.session.user) {
+      return null;
+    }
+
+    const controls = [
+      <Button
+        className="Button Button--link"
+        onclick={() => {
+          app.modal.show(AcceptPoliciesModal);
+        }}
+      >
+        {app.translator.trans('fof-terms.forum.update-alert.review')}
+      </Button>,
+    ];
+
+    const dismissControl = [];
+
+    if (!app.session.user.fofTermsPoliciesMustAccept()) {
+      dismissControl.push(
+        <Button
+          icon="fas fa-times"
+          className="Button Button--link Button--icon Alert-dismiss"
+          onclick={() => {
+            temporarilyHidden = true;
+          }}
+        />
+      );
+    }
+
+    return (
+      <div className="Alert Alert-info">
+        <div className="container">
+          <span className="Alert-body">
+            {app.session.user.fofTermsPoliciesMustAccept()
+              ? app.translator.trans('fof-terms.forum.update-alert.must-accept-message')
+              : app.translator.trans('fof-terms.forum.update-alert.can-accept-message')}
+          </span>
+          <ul className="Alert-controls">{listItems(controls.concat(dismissControl))}</ul>
+        </div>
+      </div>
+    );
+  }
+}