Contact Us Webview

Overview

In 2024, Contact us feature was updated to match the Toolstation UK website’s new Freshdesk Contact Form (MOB-3823). Now, the app can show:

The app decides which form to show based on a feature flag called hasContactUsWebView.

1. The new Freshdesk WebView form, or
2. The old in-app Flutter form (legacy)

How It Works

Mermaid Code

flowchart TD
    A[User clicks Contact Us Page] --> B[App checks<br>hasContactUsWebView flag]

    B -->|true| C[Show Freshdesk Contact Us<br>Form in WebView]
    B -->|false| D[Show Legacy<br>ContactUsFormWidget]

1. When the user opens the Contact Us page:
   • The app checks if the remoteConfig has enabled hasContactUsWebView.
2. If the flag is true → When user tap contact us the app shows the Freshdesk form (inside a WebView).
3. If the flag is false → When user tap contact us the app shows the old Flutter Contact Us form.

This helps us switch between forms without releasing a new app build.

Main Components

1. ContactUsPage

File: lib/features/contact_us/contact_us_page.dart

This is the entry point of the Contact Us feature.

It checks the feature flag and decides which form to load:

if (hasContactUsWebView) {
  return const ContactUsWebView();
} else {
  return const ContactUsFormWidget();
}

• Uses FeatureMixin to get the feature flag value.
• Provides ContactUsPageBloc for handling the legacy form logic.

2. ContactUsWebView

File: lib/features/contact_us/widgets/contact_us_webview.dart

This widget shows the new Freshdesk Contact Us form inside a WebView.

What It Does:

• Loads the Freshdesk form from AppConfig.contactUsUrl
• Supports file/image attachments
• Has validation support and shows error messages
• Logs any errors for debugging
• Works on both Android and iOS

Key Features:

Form Fields (Freshdesk WebView):

3. ContactUsFormWidget

File: lib/features/contact_us/widgets/contact_us_form.dart

This is the old in-app form still used in some regions or when the feature flag is off.

What It Does:

• Shows Flutter form fields for user to fill
• Validates inputs before submission
• Sends enquiry through app’s backend
• Shows success or error messages

Form Fields:

How It Works:

• Managed by ContactUsPageBloc
• On submit:
  • Validates input
  • Sends data to backend
  • Shows confirmation message

App Configuration and Feature Flag

App Config (app_config.dart)

contactUsUrl: 'https://toolstation.freshdesk.com/support/tickets/new'

This URL is where the Freshdesk form is hosted. The WebView uses this to load the form.

Feature Flag

Behavior:

• True → Show Freshdesk WebView form
• False → Show old Flutter form

Regional Behavior

Feature Video: ContactUs Webview Feature Video