@robotical/webapp-types 3.11.7 → 3.12.0

package/dist-types/src/components/modals/LEDLightsOrQRVerificationModal/index.js

@@ -54,22 +54,10 @@ import { MdQrCode } from "react-icons/md";
 //@ts-ignore
 import { Scanner, centerText } from '@yudiel/react-qr-scanner';
 import { ConnManager } from "@robotical/roboticaljs";
-var options = [
-    {
-        id: "qr",
-        title: "QR Code Verification",
-        subtitle: "Scan a QR code to verify.",
-        icon: _jsx(MdQrCode, { size: 32 }),
-    },
-    {
-        id: "led",
-        title: "LED Lights Verification",
-        subtitle: "Check LED signals for verification.",
-        icon: _jsx(HiOutlineLightBulb, { size: 32 }),
-    },
-];
+import { useTranslation } from "react-i18next";
 export default function LEDLightsOrQRVerificationModal() {
     var _this = this;
+    var t = useTranslation().t;
     var _a = useState(true), qrSelected = _a[0], setQRSelected = _a[1];
     var _b = useState(undefined), serialNoFromQR = _b[0], setSerialNoFromQR = _b[1];
     var _c = useState(false), isButtonToConnectVisible = _c[0], setIsButtonToConnectVisible = _c[1];
@@ -85,6 +73,20 @@ export default function LEDLightsOrQRVerificationModal() {
             setQRSelected(false);
         }
     }, [serialNoFromQR]);
+    var options = [
+        {
+            id: "qr",
+            title: t('connection.qr_title'),
+            subtitle: t('connection.qr_subtitle'),
+            icon: _jsx(MdQrCode, { size: 32 }),
+        },
+        {
+            id: "led",
+            title: t('connection.led_title'),
+            subtitle: t('connection.led_subtitle'),
+            icon: _jsx(HiOutlineLightBulb, { size: 32 }),
+        },
+    ];
     var handleSelect = function (id) {
         if (id === 'qr') {
             setSerialNoFromQR(undefined);
@@ -112,7 +114,7 @@ export default function LEDLightsOrQRVerificationModal() {
                     var id = _a.id, title = _a.title, subtitle = _a.subtitle, icon = _a.icon;
                     return (_jsxs("div", __assign({ className: qrSelected && id === 'qr' ? [styles.card, styles.qrselected].join(" ") : styles.card, onClick: function () { return handleSelect(id); } }, { children: [_jsx("div", __assign({ className: styles.icon }, { children: icon })), _jsx("h3", __assign({ className: styles.title }, { children: title })), _jsx("p", __assign({ className: styles.subtitle }, { children: subtitle }))] }), id));
                 }) })) :
-                _jsx("div", __assign({ className: styles.cogNote }, { children: _jsxs("strong", { children: ["Don't forget to ", _jsx("span", __assign({ className: styles.cogNoteHighlight }, { children: "turn on" })), " your Cog!"] }) })), qrSelected && _jsx(QRContent, { setSerialNo: setSerialNoFromQR }), _jsxs("div", __assign({ className: styles.buttonsContainer }, { children: [isButtonToConnectVisible && _jsx("button", __assign({ className: styles.connectButton, onClick: handleConnect }, { children: "QR code scan - click to connect" })), _jsx("button", __assign({ className: styles.cancelButton, onClick: function () { return modalState.closeModal(false); } }, { children: "Cancel" }))] }))] })));
+                _jsx("div", __assign({ className: styles.cogNote }, { children: _jsxs("strong", { children: ["Don't forget to ", _jsx("span", __assign({ className: styles.cogNoteHighlight }, { children: "turn on" })), " your Cog!"] }) })), qrSelected && _jsx(QRContent, { setSerialNo: setSerialNoFromQR }), _jsxs("div", __assign({ className: styles.buttonsContainer }, { children: [isButtonToConnectVisible && _jsx("button", __assign({ className: styles.connectButton, onClick: handleConnect }, { children: t('connection.qr_connect_button') })), _jsx("button", __assign({ className: styles.cancelButton, onClick: function () { return modalState.closeModal(false); } }, { children: t('connection.cancel') }))] }))] })));
 }
 function QRContent(_a) {
     var _this = this;

package/dist-types/src/components/modals/VerificationModal/index.js

@@ -56,6 +56,7 @@ import SimpleButton from "../../disposables/buttons/SimpleButton";
 import LEDs from "../../oneoffs/LEDs";
 import { raftConnectingSubscriptionHelper } from "../../../application/RAFTs/raft-subscription-helpers";
 import { useConnectedRafts } from "../../../store/SelectedRaftContext";
+import { useTranslation } from "react-i18next";
 var SHOW_LOGS = true;
 var TAG = "VerificationModal";
 function VerificationModal(_a) {
@@ -65,6 +66,7 @@ function VerificationModal(_a) {
     // const [connectedRaft, setConnectedRaft] = useState<RAFT | undefined>(connectedRAFT_);
     var _c = useState(-200), RSSI = _c[0], setRSSI = _c[1];
     var removeConnectedRaft = useConnectedRafts().removeConnectedRaft;
+    var t = useTranslation().t;
     useEffect(function () {
         /* Subscribe to the connectedRaft's SIGNAL strength */
         if (!connectedRAFT_)
@@ -110,16 +112,16 @@ function VerificationModal(_a) {
         if (!connectedRAFT_)
             return;
         var subHelper = raftConnectingSubscriptionHelper(connectedRAFT_);
-        subHelper.subscribe(setRandomColours);
+        subHelper === null || subHelper === void 0 ? void 0 : subHelper.subscribe(setRandomColours);
         return function () {
-            subHelper.unsubscribe();
+            subHelper === null || subHelper === void 0 ? void 0 : subHelper.unsubscribe();
         };
     }, [connectedRAFT_]);
     useEffect(function () {
         /* Verify the connectedRaft once it's connected */
         connectedRAFT_ === null || connectedRAFT_ === void 0 ? void 0 : connectedRAFT_.verifyRaft();
     }, [connectedRAFT_]);
-    var contentJSX = _jsxs("div", __assign({ className: "verification-modal-container" }, { children: [_jsxs("div", __assign({ className: "verification-modal-martys-container" }, { children: [_jsxs("div", __assign({ className: "verification-modal-marty-name-row-container" }, { children: [_jsx("p", __assign({ className: "verification-modal-marty-name" }, { children: connectedRAFT_ === null || connectedRAFT_ === void 0 ? void 0 : connectedRAFT_.getFriendlyName() })), _jsx("div", __assign({ className: "verification-modal-marty-signal-container" }, { children: _jsx(RICSignal, { signalStrength: RSSI }) })), _jsx(BluetoothSVG, { fill: MAIN_BLUE })] })), _jsxs("p", __assign({ className: "verification-modal-martys-back-hint" }, { children: ["Look on ", connectedRAFT_ === null || connectedRAFT_ === void 0 ? void 0 : connectedRAFT_.type, "'s back, is it displaying these lights?"] })), _jsxs("div", __assign({ className: "verification-modal-led-row-container" }, { children: [_jsx(LEDs, { coloursArr: randomColours, connectedRaft: connectedRAFT_ }), _jsx(SimpleButton, { onClick: onCancel, title: "No", borderColour: "red", colour: "white", textColour: "red" }), _jsx(SimpleButton, { onClick: onYes, title: "YES" })] }))] })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: "CANCEL" })] }))] }));
+    var contentJSX = _jsxs("div", __assign({ className: "verification-modal-container" }, { children: [_jsxs("div", __assign({ className: "verification-modal-martys-container" }, { children: [_jsxs("div", __assign({ className: "verification-modal-marty-name-row-container" }, { children: [_jsx("p", __assign({ className: "verification-modal-marty-name" }, { children: connectedRAFT_ === null || connectedRAFT_ === void 0 ? void 0 : connectedRAFT_.getFriendlyName() })), _jsx("div", __assign({ className: "verification-modal-marty-signal-container" }, { children: _jsx(RICSignal, { signalStrength: RSSI }) })), _jsx(BluetoothSVG, { fill: MAIN_BLUE })] })), _jsx("p", __assign({ className: "verification-modal-martys-back-hint" }, { children: t("verification_modal_phone.look_on_back", { raftType: connectedRAFT_ === null || connectedRAFT_ === void 0 ? void 0 : connectedRAFT_.type }) })), _jsxs("div", __assign({ className: "verification-modal-led-row-container" }, { children: [_jsx(LEDs, { coloursArr: randomColours, connectedRaft: connectedRAFT_ }), _jsx(SimpleButton, { onClick: onCancel, title: t("verification_modal_phone.no"), borderColour: "red", colour: "white", textColour: "red" }), _jsx(SimpleButton, { onClick: onYes, title: t("connection.yes") })] }))] })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: t("connection.cancel") })] }))] }));
     return contentJSX;
 }
 export default VerificationModal;

package/dist-types/src/components/modals/VerificationModalPhoneApp/index.js

@@ -71,11 +71,13 @@ import LoadingSpinner from "../../disposables/LoadingSpinner";
 import { RaftConnectionMethod } from "../../../types/raft";
 import { useConnectedRafts } from "../../../store/SelectedRaftContext";
 import { ConnManager } from "@robotical/roboticaljs";
+import { useTranslation } from "react-i18next";
 var SHOW_LOGS = true;
 var TAG = "VerificationModalPhone";
 function VerificationModalPhoneApp(_a) {
     var _this = this;
     var foundRICs = _a.foundRICs;
+    var t = useTranslation().t;
     var _b = useState([]), randomColours = _b[0], setRandomColours = _b[1];
     var _c = useState(foundRICs), foundRICsState = _c[0], setFoundRICsState = _c[1];
     var _d = useState(-1), selectedRICIdx = _d[0], setSelectedRICIdx = _d[1];
@@ -168,12 +170,14 @@ function VerificationModalPhoneApp(_a) {
         });
     }); };
     useEffect(function () {
+        var _a;
         if (!connectedRaft)
             return;
-        raftConnectingSubscriptionHelper(connectedRaft).subscribe(setRandomColours);
+        (_a = raftConnectingSubscriptionHelper(connectedRaft)) === null || _a === void 0 ? void 0 : _a.subscribe(setRandomColours);
         connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.verifyRaftPhoneApp(foundRICsState[selectedRICIdx]);
         return function () {
-            raftConnectingSubscriptionHelper(connectedRaft).unsubscribe();
+            var _a;
+            (_a = raftConnectingSubscriptionHelper(connectedRaft)) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         };
     }, [connectedRaft]);
     var onSelectRaft = function (raftIdx) { return __awaiter(_this, void 0, void 0, function () {
@@ -211,12 +215,12 @@ function VerificationModalPhoneApp(_a) {
     }); };
     var contentJSX = null;
     if (foundRICsState.length === 0) {
-        contentJSX = _jsxs("div", __assign({ className: "verification-modal-container" }, { children: [!isScanning && _jsx("p", __assign({ style: { alignSelf: 'center' } }, { children: "No Robots Found" })), _jsx("div", __assign({ className: "verification-modal-martys-container" }, { children: isScanning && _jsxs("div", __assign({ style: { margin: "auto", width: "50px", height: "50px" } }, { children: [" ", _jsx(LoadingSpinner, {}), " "] })) })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx(SVGImageButton, { onClick: onScanAgain, title: "SCAN AGAIN", SVGImage: RefreshSVG, backgroundColour: MAIN_BLUE, titleColour: WHITE, SVGColour: WHITE }), _jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: "CANCEL" })] }))] }));
+        contentJSX = _jsxs("div", __assign({ className: "verification-modal-container" }, { children: [!isScanning && _jsx("p", __assign({ style: { alignSelf: 'center' } }, { children: t("verification_modal_phone.no_robots_found", "No Robots Found") })), _jsx("div", __assign({ className: "verification-modal-martys-container" }, { children: isScanning && _jsxs("div", __assign({ style: { margin: "auto", width: "50px", height: "50px" } }, { children: [" ", _jsx(LoadingSpinner, {}), " "] })) })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx(SVGImageButton, { onClick: onScanAgain, title: t("verification_modal_phone.scan_again", "SCAN AGAIN"), SVGImage: RefreshSVG, backgroundColour: MAIN_BLUE, titleColour: WHITE, SVGColour: WHITE }), _jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: t("verification_modal_phone.cancel", "CANCEL") })] }))] }));
     }
     else {
         contentJSX = _jsxs("div", __assign({ className: "verification-modal-container" }, { children: [_jsxs("div", __assign({ className: "verification-modal-martys-container" }, { children: [isScanning && _jsxs("div", __assign({ style: { margin: "auto", width: "50px", height: "50px" } }, { children: [" ", _jsx(LoadingSpinner, {}), " "] })), foundRICsState.map(function (raftObj, raftIdx) {
-                            return _jsxs(Fragment, { children: [_jsxs("div", __assign({ className: "verification-modal-marty-name-row-container", onClick: function () { return onSelectRaft(raftIdx); } }, { children: [_jsx("p", __assign({ className: "verification-modal-marty-name" }, { children: raftObj._localName })), _jsx("div", __assign({ className: "verification-modal-marty-signal-container" }, { children: _jsx(RICSignal, { signalStrength: raftObj._rssi }) })), _jsx(BluetoothSVG, { fill: MAIN_BLUE })] })), selectedRICIdx === raftIdx && _jsxs("div", { children: [_jsx("p", __assign({ className: "verification-modal-martys-back-hint" }, { children: isLoading ? "Loading..." : "Look on ".concat(connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.type, "'s back, is it displaying these lights?") })), _jsxs("div", __assign({ className: "verification-modal-led-row-container" }, { children: [_jsx(LEDs, { coloursArr: randomColours, connectedRaft: connectedRaft }), !isLoading && _jsx(SimpleButton, { onClick: onCancel, title: "No", borderColour: "red", colour: "white", textColour: "red" }), !isLoading && _jsx(SimpleButton, { onClick: onYes, title: "YES" })] }))] })] }, raftIdx);
-                        })] })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx(SVGImageButton, { onClick: onScanAgain, title: "SCAN AGAIN", SVGImage: RefreshSVG, backgroundColour: MAIN_BLUE, titleColour: WHITE, SVGColour: WHITE, disabled: isScanning }), _jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: "CANCEL" })] }))] }));
+                            return _jsxs(Fragment, { children: [_jsxs("div", __assign({ className: "verification-modal-marty-name-row-container", onClick: function () { return onSelectRaft(raftIdx); } }, { children: [_jsx("p", __assign({ className: "verification-modal-marty-name" }, { children: raftObj._localName })), _jsx("div", __assign({ className: "verification-modal-marty-signal-container" }, { children: _jsx(RICSignal, { signalStrength: raftObj._rssi }) })), _jsx(BluetoothSVG, { fill: MAIN_BLUE })] })), selectedRICIdx === raftIdx && _jsxs("div", { children: [_jsx("p", __assign({ className: "verification-modal-martys-back-hint" }, { children: isLoading ? t("verification_modal_phone.loading", "Loading...") : t("verification_modal_phone.look_on_back", { raftType: connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.type }) })), _jsxs("div", __assign({ className: "verification-modal-led-row-container" }, { children: [_jsx(LEDs, { coloursArr: randomColours, connectedRaft: connectedRaft }), !isLoading && _jsx(SimpleButton, { onClick: onCancel, title: t("verification_modal_phone.no", "No"), borderColour: "red", colour: "white", textColour: "red" }), !isLoading && _jsx(SimpleButton, { onClick: onYes, title: t("connection.yes") })] }))] })] }, raftIdx);
+                        })] })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx(SVGImageButton, { onClick: onScanAgain, title: t("connection.scan_again"), SVGImage: RefreshSVG, backgroundColour: MAIN_BLUE, titleColour: WHITE, SVGColour: WHITE, disabled: isScanning }), _jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: t("connection.cancel") })] }))] }));
     }
     return contentJSX;
 }

package/dist-types/src/i18n.d.ts

@@ -0,0 +1,2 @@
+import i18n from 'i18next';
+export default i18n;