Page Comparison

Acceptance Criteria

On Sanity, we will can to add Stores and Items or other fields, and in case add any information, needs to add all information, because the system need at least one information for each thing required (Service mode, Duration, store, item)
When then finished the order, the system will generate a QRCode;
The QRCode at this moment will work just for orders normal, for order scheduled will be developed in the future.
Need to save in DynamoDB the secrets key for generate MD5, for each market and brand that use QRCodeSanity - The activation/deactivation of the QR code feature is associated with the service mode toggle. If, at least, one service mode is active, it means that the sub-fields for duration (bottom sheet in Home, recent order) must be mandatory filled. In addition, configurator needs to ensure that the list of eligible refill drinks (items) and store are properly set.
The QR code generation happens upon the order is placed with success or updated with success. No refunded order is considered for QR code generation.
QR code for scheduled orders must be displayed according to the order pick-up time.
The dispenser password is a secret that must be stored in the database. It will allow whitelabel to create a MD5 hash that is converted into the QR code. RBIberia needs to ensure that the configured secret in EMEA whitelabel is in sync with the vending machine password.

Reviewed by Paula Winter
Reviewed by Felipe Gonçalves
Reviewed by Raphael Gomes

...

In the backend we will get the information, and we will get the secrets from DynamoDB, this these secrets is a key to generate an MD5 and with that we will generate a hash with MD5 encryption, and this hash will be returned to the whitelabel-app to use as QRCode.

...

Task 1 - Update GraphQL Query to get new data
Task 2 - Update hook for get new objects of sanity (validate cache)
Task 2 3 - Validate if purchased products have a refill for this store
Task 3 4 - Create a new request for backend “intl-whitelabel-graphql” - GetRefillDrinkQRCode (Request GraphQL implementation)
Task 4 5 - Get and use QRCode of GetRefillDrinkQRCode and Scheduled (Request GraphQL implementation)

...

About the Items List, we can add the same idea of items free, but the component need to have just items, don’t have combo or menu.

...

Image Added
In Figma this activity don’t finished yet, but the main idea is it:

...

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.ts
- Image Added
Create a new resolver into directory src/functions/graphql/resolvers/;
Create new types, interface, etc;

You can be based in the PR https://github.com/rbilabs/intlctg-whitelabel-appgraphql/pull/2961477/files#diff-a88f2462d7ab31319f2455bbd95c349d30a54980e31ee54277a804ac3acd8e62files

DOD-LIKE

Create unit test
Call by postman with success
Generate a valid hash code

...

Codegen should not be broken and apollo:generate command should work without problem after add the new GraphQL files
Call the query in some component and test if all is good with the changes (for example editing Sanity, publishing the document with the new infos and take a look if the query will bring the infos)

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;
Create cache with success

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

Task

...

4 - Create a new request for backend “intl-whitelabel-graphql” - GetRefillDrinkQRCode (Request GraphQL implementation)

We need to create new request for back-end, case the system have an item purchased available for get a refill drink, so we must call the back-end to generate a QRCode.

...

Create a new query in src/queries/rbi/ with parameters storeId, transactionId, transactionDatetime.
And the return must be a hash for of the QRCode
These parameters we can get of getOrder response.

...

Run apollo:generate
Create a function GetRefillDrinkQRCode in the hook of refill drink and use the new query of GraphQL

DOD-LIKE

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 hashCode

Code 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, use save this hash in Local Storage of our application for transform use in QRCode.

Versions Compared

Old Version 29

New Version Current

Key

Acceptance Criteria

Intl Whitelabel GraphQL

Task 1 - Create new function GetRefillDrinkQRCode for generate hash (Request Whitelabel implementation)

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 (Request GraphQL implementation) and Scheduled