Lock 🔒

Implementation to handle the kiosks lock state.

Manual Lock/Unlock

The screen can be unlocked by activating the hidden admin button touching the top centre screen 3 times in a row. To manual lock, it's necessary to enter in the AdminView and click on the Lock button. See cringer.catalogue components to see how the <AdminButton /> works.

Lock Settings Hook

There is a shared hook useRestaurantLock to check the kiosk settings about site working hours and whether the kiosk is closed or not. This hook will return the following object, which is used in the home screen and in the lock screen to check if the kiosk should or shouldn’t be locked:

{
  "kioskClosed": false,
  "scheduleLock": false
}

Usage:

const { kioskClosed, scheduleLock } = useRestaurantLock();

State Machine

The lock state machine is responsible to define the posible state transitions. The current state value is stored on every transition and can be used to initialise the state machine on another screen from a previous state. The following table is a list of all the possible state transitions and what should be done on each of them:

State	Transition To	Action
default	manualLocked	go to /lock
default	autoLocked	go to /lock
default	autoUnlocked	go to /home
default	manualUnlock	go to /home
autoUnlocked	manualLocked	go to /lock
autoUnlocked	autoLock	go to /lock
manualUnlocked	autoUnlocked	none
autoLocked	manualUnlock	go to /home
manualLocked	manualUnlocked	go to /home

Usage:

home/provider/index.js:

const { kioskClosed, scheduleLock } = useRestaurantLock();

//import lock recoil state to initialise the machine state from a previous route
const [lockRecoilState, setLockRecoilState] = useRecoilState(lockState);
const { lockMachine } = lockService({ initial: lockRecoilState || 'default' });
const [lockMachineState, lockMachineSend] = useMachine(lockMachine);

home/hook/index.js:

useEffect(() => {
  /**
   * If the kiosk is manually unlocked it should not check site settings until the kiosk is rebooted or the page is refreshed.
   * After rebooting/refreshing, the lock machine state will be changed to the default one and the settings will be checked again.
   */
  if (lockMachineState.matches('manualUnlocked')) return;

  lockMachineSend(kioskClosed || scheduleLock ? 'AUTO_LOCK' : 'AUTO_UNLOCK', {
    setLockRecoilState,
  });
}, [lockMachineState, kioskClosed, scheduleLock, lockMachineSend, setLockRecoilState]);

Use Cases

Considering the initial state default and the route /home:

• The kiosk is closed (property "Kiosk Closed" on KAS): lock state will be changed to autoLocked and the page will be redirected to /lock;
  • User manually unlock the kiosk: lock state will be changed to manualUnlocked and the page will be redirected to /home. Notes: when the screen is manually unlocked, the auto lock check will no run again until the kiosk is rebooted or the page is refreshed;
• The current time and day of the week is out of the range configured on KAS: The same behaviour from the previous step;
• The kiosk is allowed to run: lock state will be changed to autoUnlocked and the page will be redirected to /home;
  • User manually lock the kiosk: lock state wll be changed to manualLock and the page will be redirected to /lock. Notes: the screen will remain locked until the kiosk is rebooted or the page is refreshed