Problem

When the user to search a restaurant on Whitelabel in Delivery mode, the system gives a restaurant available for delivery.

But in case of this restaurant is closed, the system show error for restaurant is unavailable, the same message in case not have delivery in this address.

This cause problems for users, because show de wrong message, the correct message is the restaurant is closed at this moment but have a delivery in this address.

Proposal of Solution

Show a message informing the user that restaurant is closed, but open at X hours.

Currently, the system check if the restaurant is open, but this verification is bad, because only validate if it is open, case restaurant is open show information and set the restaurant to make orders, but in case of restaurant closed, so don’t send information for system and the show wrong message.

Technical Problem

intl-whitelabel-app

The front-end get this information in this file: src/components/address-modal/index.tsx

And user this function useEffect for get results of delivery:

The const deliveryRestaurantData in line 529 have the data about the restaurant, and this information comes in a delivery query of GraphQl useDeliveryRestaurantLazyQuery:

Use this query of GraphQl:

intl-whitelabel-graphql

On repository of intl-whitelabel-graphql has this query:

File: src/functions/graphql/resolvers/restaurant.ts

In this file, have this function deliveryRestaurant

We need to pass some information for work in studio apollo or postman, this is an example for use in this query, this example work in PLK ES DEV.

{
  "dropoff": {
    "addressLine1": "Vía Hispanidad 12",
    "city": "Zaragoza",
    "state": "AR",
    "streetNumber": "12",
    "route": "Vía Hispanidad",
    "zip": "50009",
    "country": "ESP",
    "latitude": 41.63374590000001,
    "longitude": -0.9082201,
    "phoneNumber": "02398565666"
  },
  "searchRadius": 9656.04,
  "platform": "web",
}

Response of success is a big data, for this response we need to call the query with result valid and between hours work valid.

P.S. this doesn’t return the additional time:

{
  "data": {
    "deliveryRestaurant": {
      "deliverySurchargeFeeCents": 0,
      "nextEarliestOpen": null,
      "quote": "QUOTE_SUCCESSFUL",
      "quoteId": "d9227070-a23e-46e9-9d82-6a3f535e29ec",
      "restaurant": {
        "drinkStationType": null,
        "id": "cbf4d9b3-35cf-402e-9a7b-6ffdbeff1c3c",
        "_id": "cbf4d9b3-35cf-402e-9a7b-6ffdbeff1c3c",
        "storeId": "1111",
        "isAvailable": true,
        "posVendor": "PARTNER",
        "chaseMerchantId": null,
        "curbsideHours": {
          "monOpen": "00:01:00",
          "monClose": "23:59:00",
          "tueOpen": "00:01:00",
          "tueClose": "23:59:00",
          "wedOpen": "00:01:00",
          "wedClose": "23:59:00",
          "thrOpen": "00:01:00",
          "thrClose": "23:59:00",
          "friOpen": "00:01:00",
          "friClose": "23:59:00",
          "satOpen": "00:01:00",
          "satClose": "23:59:00",
          "sunOpen": "00:01:00",
          "sunClose": "23:59:00"
        },
        "deliveryHours": {
          "monOpen": "00:01:00",
          "monClose": "23:59:00",
          "tueOpen": "00:01:00",
          "tueClose": "23:59:00",
          "wedOpen": "00:01:00",
          "wedClose": "23:59:00",
          "thrOpen": "00:01:00",
          "thrClose": "23:59:00",
          "friOpen": "10:01:00",
          "friClose": "23:59:00",
          "satOpen": "00:01:00",
          "satClose": "23:59:00",
          "sunOpen": "00:01:00",
          "sunClose": "23:59:00"
        },
        "diningRoomHours": {
          "monOpen": "00:01:00",
          "monClose": "23:59:00",
          "tueOpen": "00:01:00",
          "tueClose": "23:59:00",
          "wedOpen": "00:01:00",
          "wedClose": "23:59:00",
          "thrOpen": "00:02:00",
          "thrClose": "23:59:00",
          "friOpen": "00:01:00",
          "friClose": "23:59:00",
          "satOpen": "00:01:00",
          "satClose": "23:59:00",
          "sunOpen": "00:01:00",
          "sunClose": "23:59:00"
        },
        "distanceInMiles": null,
        "driveThruHours": {
          "monOpen": "00:01:00",
          "monClose": "23:59:00",
          "tueOpen": "00:01:00",
          "tueClose": "23:59:00",
          "wedOpen": "00:01:00",
          "wedClose": "23:59:00",
          "thrOpen": "00:01:00",
          "thrClose": "23:59:00",
          "friOpen": "00:01:00",
          "friClose": "23:59:00",
          "satOpen": "00:01:00",
          "satClose": "23:59:00",
          "sunOpen": "00:01:00",
          "sunClose": "23:59:00"
        },
        "driveThruLaneType": null,
        "email": null,
        "environment": null,
        "franchiseGroupId": null,
        "franchiseGroupName": "Burger King ES",
        "frontCounterClosed": null,
        "hasBreakfast": null,
        "hasBurgersForBreakfast": null,
        "hasCatering": null,
        "hasCurbside": true,
        "hasDelivery": true,
        "hasDineIn": true,
        "hasDriveThru": true,
        "hasTableService": true,
        "hasLateNightMenu": false,
        "hasMobileOrdering": true,
        "hasParking": null,
        "hasPlayground": null,
        "hasTakeOut": true,
        "hasWifi": null,
        "hasLoyalty": null,
        "isDarkKitchen": null,
        "isFavorite": false,
        "isHalal": null,
        "isRecent": false,
        "latitude": 41.6333797,
        "longitude": -0.9109282,
        "mobileOrderingStatus": "dev",
        "name": "ES Lab Restaurant Partner API",
        "number": "1111",
        "parkingType": null,
        "phoneNumber": "918-319-5008",
        "physicalAddress": {
          "address1": "Vía de la Hispanidad 15",
          "address2": null,
          "city": "Zaragoza",
          "country": "Spain",
          "postalCode": "50009",
          "stateProvince": "Zaragoza",
          "stateProvinceShort": null
        },
        "playgroundType": null,
        "pos": {
          "vendor": "PARTNER"
        },
        "posRestaurantId": null,
        "restaurantImage": null,
        "status": "Open",
        "restaurantPosData": {
          "_id": "e1f87ccb-0293-428f-8080-423e943d4a4c"
        },
        "vatNumber": null
      },
      "storeStatus": "OPEN"
    }
  }
}

But in case the restaurant is closed, the information is every null and the status is NO_DELIVERY, and this is WRONG, because the restaurant has closed and no unavailable, the status should be CLOSED:

{
  "data": {
    "deliveryRestaurant": {
      "deliverySurchargeFeeCents": 0,
      "nextEarliestOpen": null,
      "quote": "QUOTE_UNAVAILABLE",
      "quoteId": null,
      "restaurant": {
        "drinkStationType": null,
        "id": null,
        "_id": null,
        "storeId": null,
        "isAvailable": false,
        "posVendor": null,
        "chaseMerchantId": null,
        "curbsideHours": null,
        "deliveryHours": null,
        "diningRoomHours": null,
        "distanceInMiles": null,
        "driveThruHours": null,
        "driveThruLaneType": null,
        "email": null,
        "environment": null,
        "franchiseGroupId": null,
        "franchiseGroupName": null,
        "frontCounterClosed": null,
        "hasBreakfast": null,
        "hasBurgersForBreakfast": null,
        "hasCatering": null,
        "hasCurbside": null,
        "hasDelivery": null,
        "hasDineIn": null,
        "hasDriveThru": null,
        "hasTableService": null,
        "hasLateNightMenu": null,
        "hasMobileOrdering": null,
        "hasParking": null,
        "hasPlayground": null,
        "hasTakeOut": null,
        "hasWifi": null,
        "hasLoyalty": null,
        "isDarkKitchen": null,
        "isFavorite": false,
        "isHalal": null,
        "isRecent": false,
        "latitude": null,
        "longitude": null,
        "mobileOrderingStatus": "temporary_unavailable",
        "name": null,
        "number": null,
        "parkingType": null,
        "phoneNumber": null,
        "physicalAddress": null,
        "playgroundType": null,
        "pos": null,
        "posRestaurantId": null,
        "restaurantImage": null,
        "status": null,
        "restaurantPosData": null,
        "vatNumber": null
      },
      "storeStatus": "NO_DELIVERY"
    }
  }
}

In this function deliveryRestaurant it checks if the feature flag is active, because we use different way.

The flag is enable-dropoff-only-quote-from-delivery-service and use some information for active:

PLK ES DEV has this flag active, so use the first way:

It uses the function createQuoteWhitelabelDeliveryService of delivery providers:

file: src/functions/graphql/providers/delivery.ts

And in this file use the service.retrieveFirstQuote

This service is from repository intl-delivery-service.

intl-delivery-service

In the file src/modules/quote/quote.service.ts. We have the retrieveFirstQuote function, and in this function it to do some validations and query for get restaurant.

Called getEligibleDeliveryRestaurantData function and in this function get the restaurants validate for use.

After in this function the code have other called, the getWinningQuote:

And this Function call other function getQuotes, and this function return correct errors, inform that restaurant has errors, and the error is “The restaurant is closed”.

But after this the code, ignore this error and give an error forced, in return in case errors in retrieveFirstQuote is:

Because these are the errors ever are same thing, not has a treatment for the other flows.

Other problem that occur is the additional time for delivery, and the back-end does not return this information, just the normal time, so we need to add this as well.

Technical Solution

Here is an illustration that resume what we need to implement to adjust this.

intl-delivery-service

The code solution proposed here isn’t a final solution, is only a idea for the new flow!!!!!

Task 1 - create a feature flag

• Create a flag DELIVERY-CLOSED-AT-MOMENT

Task 2 - return nextOpenDate in findEligible function

• In the file src/modules/restaurant/restaurant.service.ts have a function called findEligible and in these functions have another function deriveEligibility and in this function return errors of restaurant and return the next time that the restaurant open again, but now don’t use this, so we need to add this information.

Before:

After:

Just add nextOpenDate in lines 174 and 175.

• And the returned this function need to change too, because need pass the parameter nextOpenDate and adjusted of logic to return the data in case of eligible equals the false, in this validation we can validate if not have none eligible, so we use ineligible.

• ATTENTION - we use ineligible restaurant just in case don’t have restaurant open

Before:

After: this is just an example for works anything restaurant, this is NOT a final solution

Task 3 - Validate if restaurant is closed and fire a throw exception

• In the file src/modules/quote/quote.service.ts in retrieveFirstQuote function, we can get these informations in the getEligibleDeliveryRestaurantData function, because now return the errors and the nextOpenDate.

After this changes, we can validate if a restaurant has closed and create a new throw for closed restaurant QuoteRestaurantClosedError with this we can to go for catch of retrieveFirstQuote function.

Just an example to fire throw: ATTENTION this is an example, is not a final solution, because we need to validate if we have restaurant validated too, in case have one restaurant validate we don’t fire an exception

Task 4 - Change of return in catch for return correct status

• In the file src/modules/quote/quote.service.ts in retrieveFirstQuote function we can adjust the return in catch and in this catch we can get the error of restaurant closed and manipulate this error, and change for return the status correct and the nextOpenDate.

• Return the restaurantsData as well, because we need this information to check services modes and hours for working.

The return after this changes:

Task 5 - Validate and update Bump for project

Validate if we need to make something for update, bump this repository in whitelabel-graphql

POC intl-delivery

We made a POC for this in this link: https://github.com/rbilabs/intl-delivery-service/pull/470

PR - We have started development and left the PR in draft, we are awaiting validation Opala, Maciej (Deactivated) to continue.
https://github.com/rbilabs/intl-delivery-service/pull/486

intl-whitelabel-app

Now with back-end returning the status correct and the field nextEarliestOpen we can to do correct logic in the front-end.

Task 1 - Create a feature flag

• Create a feature flag - DELIVERY-CLOSED-AT-MOMENT

Task 2 - Add the additional hours in graphQL

We need to create a new fragment for add in Additional hour for use in operating hour fragment - src/queries/rbi/fragments/operating-hours-fragment.graphql

We need to run the command “yarn apollo:generate"

Task 3 - Adjusted front-end for get the status closed restaurant

• In the file src/components/address-modal/index.tsx int the handleQuoteResult function we have a logic to check the status of delivery quotes, so we need to improve this logic, we can add more details and validate the statusStore. Also, we need to add new dispatch for delivery closed.

• About the dispatch, we have a logic for it, and concise to get the status of quote and store, we need to create a new for closed restaurant, we need to create new types for AddressModalAction, have this in the POC.

Task 4 - Create the component for show message of the restaurant closed

• With this made, we can use this in moment for call a delivery and show the error correct in case of closed restaurant

• ATTENTION - the component in line 641 is not to be use, we need to create a new component for use in this local.

• We need change or create a new component for show message about closed restaurant. In this POC I’m use the component src/components/modal-no-delivery-stores-open/no-stores-open-delivery-modal.tsx this component don’t is used currently in the app, so we can change some thing and use, this is a example of component:

• In the file of this component we need to change some things for work, for example we need to transform in a React component and pass the attribute for next open date.

• The component to be create is this:

• Create this component in src/components/address-modal/new-component

• We need to pass the next open date and next Day Open

  • for exemple if today is Moday at 8h a.m and the restaurant open at 10h a.m, so we need show a message “Delivery will be avaliable today at 10:00 AM”, but if the restaurant open tomorrow at 10h a.m, so need show “Delivery will be avaliable Tuesday at 10:00 AM”.

• The button "Use Different Address“ return to screen of search delivery.

Task 5 - Create a validation for enable/disable “Order Pickup” button

• Need to validate if restaurant has a service mode "Order Pickup", case not we need to disable this button

  • validate if it has service mode correct

  • validate if this service mode is opened

• Get information that back-end returned, you can get a storeId and source the information in Sanity, or get the RestaurantData of back-end and search in this object

POC - intl-whitelabel-app

The POC of this solution:
https://github.com/rbilabs/intl-whitelabel-app/pull/2422

intl-packages

Task 1 - adjust packages for return additional hours

We have a problem for return the additional hours of delivery mode, currently the back-end don’t return this, the repository intl-delivery-service use the intl-packages of restaurant packages, in the file packages/restaurant/src/rbi-restaurant/operating-hours.ts have the formatOperatingHours function, and in this function have just normal hours, so we need to add additional hours in this function.

Before:

After:

Remember to create a new scenario in unit tests.

Task 2 - Validate additional hours

In the file packages/restaurant/src/rbi-restaurant/operating-hours.ts, we need to change the isRestaurantOpen, getNextEarliestOpen and getHoursOfOperationForDay functions, because this function to validate is restaurants is open and day work, but just validate the hours work normal, but now we need to validate the additional hours work too.

Add unit test for this new scenarios too.

Task 3 - Validate and update Bump for project

Validate if we need to make something for update, bump this package in delivery-service.

intl-whitelabel-graphql

In the repository whitelabel-graphql we don’t have the additional hours, so we need to add this information in the queries for GraphQL.

Task 1 - Create the interface for additional hours on GraphQL

In the file src/functions/graphql/schemas/restaurant.gql we need to add a new interface for additional time and add this additional times in the OperatingHours interface.

Example:

After add all new fields, we need to run the command “yarn graphql:types” to generate the types for GraphQL.

How to integrate the environments localy

intl-packages, you need to remove some lines of node_modules/pino/lib/proto.js file:

run:

• yarn install

• yarn build

• go to packages of restaurant “cd restaurant"

• run “yarn link", must show in console “success Registered "@rbilabs/intl-restaurant".”

intl-delivery-service

• create file .env with base .env.sample

• yarn install

• yarn build

• connect with packages run: yarn link @rbilabs/intl-restaurant

• start environment with command - STAGE=dev AWS_ACCOUNT_ID=326165771931 AWS_PROFILE=rbi.dev.admin AWS_REGION=eu-west-3 BRAND=plk yarn start:debug  

intl-whitelabel-graphql

• add your address of int-delivery-service in file: src/functions/graphql/providers/delivery.ts

• create a file .env with base .env.axample

• yarn install

• yarn build

• start environment - export $(cat .env | xargs) && STAGE=dev AWS_ACCOUNT_ID=326165771931 AWS_PROFILE=rbi.dev.admin AWS_REGION=eu-west-3 BRAND=plk yarn start:debug

intl-whitelabel-app

• in moment start environment with yarn start you must choose the config local in graphql

• others config you can use development for all

This is a simple way for connect these environments, maybe you need to do more things.