...
Task 1 - Update GraphQL Query to get new data
Task 2 - Update hook for get new objects of sanity (validate cache)
Task 3 - Validate if purchased products have a refill for this store
Task 4 - Create a new request for backend “intl-whitelabel-graphql” - GetRefillDrinkQRCode (Request GraphQL implementation)
Task 5 - Get and use QRCode of GetRefillDrinkQRCode and Scheduled (Request GraphQL implementation)
Task 6 - Get QRCode for purchased scheduled
Tasks breakdown
Intl Whitelabel CMS
...
Show Restaurant List with validate have one.
Show Items List with validate have one.
Just add items of “item” type
Validate messages and layout with designers
The comportment of these field is similar of the duration, stay occult, after activated one service mode, show these fields and are required.
Fields should have:
List of Stores:
Title: 'Restaurants with QR Code Refill Drink',
Description: 'The list of restaurants that provide the user with the QR Code Refill Drinks'
List of Menu Items
Title: 'Menu items for QR code Refill Drink',
Description: 'The list of items that provide the user with the QR Code for Refill Drinks'
Intl Whitelabel GraphQL
Task 1 - Create new function GetRefillDrinkQRCode for generate hash (Request Whitelabel implementation)
Add secrets in DynamoDB
DynamoDB secrets table: rbi-account-secrets
rbi/<env>/<brand>/<country>/refill-machine
value: {"dispenser_password":"<>" }
Create a new provider into directory src/functions/graphql/providers/ RefillDrinkQRCodeProvider;
Create a request for get secrets of MD5
In this provider, we need to create a hash, this code is an example of how to create the logic for it.
Run
graphql:types
Create a new function for generated hash with MD5, but we need to get the key of cryptography of MD5;
Use the library
crypto
to create a hash with MD5, we have an example in src/functions/graphql/providers/users.tsCreate a new resolver into directory src/functions/graphql/resolvers/;
Create new types, interface, etc;
...
Task 2 - Update hook for get new objects of sanity (validate cache)
Update src/hooks/use-feature-qrcodefree-refill-drinks/use-feature-qrcodefree-refill-drinks.ts hook for get stores and items of sanity.:
Add this new data in cache. → we’ll not implement this for now and created a new task to analyze the performance
DOD-LIKE
Get data with success;Create or adjust unit tests for this flow;
Task 3 - Validate if purchased products have a refill for this store
...
This new logic can be created in the hook src/hooks/use-feature-qrcode-refill-drinks/use-feature-qrcode-refill-drinks.ts
Update the localStorage destructuring
(freeRefillOrderInfos
) to get the restaurantId and cartEntries (that will come from the Successful order)Create two new methods to validate the restaurant from the order and another to validate if an item from Sanity matchs with an item from the order
DOD-LIKE
Validate if items purchased have can generate a QRCode
have a store;
have an item available;
have a service mode;
Create a unit tests
...
create unit test - doesn’t need
receive a hash code with success
Task 5 - Get and use QRCode of GetRefillDrinkQRCode (Request GraphQL implementation) and Scheduled
We need to validate the Order, if fireOrderIn exists, it should not generate a hashCode, but rather start monitoring times, and when the configured time arrives, it should show the QRCode..
If there is no fireOrderIn in the Order, hashQrCode must be generated via backend and saved in local storage.
Implement GetRefillDrinkQRCode function to call backend.
In the
use-free-refill-drinks.ts
should create a new function to save order information in the Local Storage, make to validation in status and fireOrderIn field and create useState to storage hashCodeCode Block const [hashQrCodeRefill, setHashQrCodeRefill] = useState(''); const getHashQrCodeBackEnd = (data: FreeRefillOrderInfosProps) => { if (data?.status) { return 'hash-qr-code'; // GetRefillDrinkQRCode } return ''; }; const handleOrderFreeRefill = useCallback((order: FreeRefillOrderInfosProps) => { if ( order.status === RbiOrderStatus.INSERT_SUCCESSFUL || order.status === RbiOrderStatus.UPDATE_SUCCESSFUL ) { const hashQrCode = !order?.fireOrderIn ? getHashQrCodeBackEnd(order) : ''; const qrCodeInfos = { ...order, hashCode: hashQrCode, }; setHashQrCodeRefill(hashQrCode); LocalStorage.setItem(Keys.FREE_REFILL_ORDER_INFOS, qrCodeInfos); } }, []);
In the
use-order-status.ts
should call handleOrderFreeRefill function, this function is order status control and all orders pass here.Code Block useEffect(() => { if (!serverOrder) { return; } handleOrderFreeRefill({ orderId: serverOrder?.rbiOrderId, storeId: serverOrder?.cart?.storeDetails?.storeNumber, fireOrderIn: serverOrder?.fireOrderIn, updatedAt: serverOrder?.updatedAt, serviceMode: serverOrder?.cart?.serviceMode, transactionId: serverOrder?.posOrderId, status: serverOrder?.status, }); }, [handleOrderFreeRefill, serverOrder]);
In the
use-free-refill-drinks.ts
should create a new function to monitor the schedule and show the QRCode according to the settings.Code Block const checkHashRefillQrCode = useCallback((): void => { const freeRefillOrderInfos = getOrderInfos(); if (freeRefillOrderInfos?.hashCode) { setHashQrCodeRefill(freeRefillOrderInfos.hashCode); } if (freeRefillOrderInfos?.fireOrderIn && freeRefillOrderInfos?.updatedAt) { const updateAtOrder = new Date(freeRefillOrderInfos.updatedAt).getTime(); const fireOrderShowQrCode = addSeconds( updateAtOrder, freeRefillOrderInfos.fireOrderIn + (fireOrderAhead ?? 0) ).getTime(); const dateNow = Date.now(); const hasQrCodeAvailable = dateNow >= fireOrderShowQrCode; if (hasQrCodeAvailable) { const updateFreeRefillOrderInfos = { ...freeRefillOrderInfos, hashCode: getHashQrCodeBackEnd(freeRefillOrderInfos), }; LocalStorage.setItem(Keys.FREE_REFILL_ORDER_INFOS, updateFreeRefillOrderInfos); setHashQrCodeRefill(updateFreeRefillOrderInfos.hashCode); } } }, [fireOrderAhead, getOrderInfos]); useEffect(() => { checkHashRefillQrCode(); const interval = setInterval(checkHashRefillQrCode, 5000); if (hashQrCodeRefill) { clearInterval(interval); } return () => clearInterval(interval); }, [checkHashRefillQrCode, hashQrCodeRefill]);
In the
bottom-sheet-refill-drinks.tsx
should renderhashQrCodeRefill
field.In the
refill-drinks-qrcode-button.tsx
should renderhashQrCodeRefill
field.
DOD-LIKE
Create unit test
Call hashCode in backend.
Validate fireOrderIn and show QRCode in time correct
FireOrder time is incremented with fireOrderAhead settings in LauchDarkly.
Code Block const fireOrderAhead = useFlag(LaunchDarklyFlag.FIRE_ORDER_AHEAD); const fireOrderShowQrCode = addSeconds( updateAtOrder, freeRefillOrderInfos.fireOrderIn + (fireOrderAhead ?? 0) ).getTime();
POC: https://github.com/rbilabs/intl-whitelabel-app/pull/2015
Get the response of GetRefillDrinkQRCode and return hash, save this hash in Local Storage of our application for use in QRCode.
...