Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

🛠️ Potential Solutions

Info

Note: this section should be short and sweet, documenting notes about different solutions that were considered during ideation. Can just be a link to a whiteboard for example. Expected outcome: one solution is chosen and documented in more detail under Proposed Solution.

The solution is to add a field in sanity so that franchisse can add the texts related to the policy cover and thus communicate with the frontend on the support page.

✅ Proposed Solution

Info

Description of the proposed solution.

The solution involves adding a new field to the Sanity support document, allowing policy cover texts to be included. In addition, a policy cover field will be inserted on the support page, just below the form, which will display the information provided in Sanity. We will also have a temporary feature flag that will be used to validate the feature in production and that can be removed afterwards.

On the support page we will have a field where the user can read the information about the policy cover before finalizing the submission of the form.

Within the sanity support document there will be a field where the franchisee can add a document with the texts related to the policy cover.

When the user tries to add more than one document to the locked or saved page and it shows an error.

Image Removed

By clicking on the policy cover document, the user will be able to change the policy cover texts to various languages that will be used for the frontend as shown in the screens above.

To implement this solution, it will be necessary to make some changes to two repositories: intl-whitelabel-cms and intl-whitelabel-app. An example of changes required for each is described below.

Intl-whitelabel-cms

Expand
titleschemas/support/documents/supportData.tsx

Add the support policy cover in “fields” property

Code Block
fields: [
  ...,
  {
    title: 'Support Policy Cover',
    name: 'supportPolicyCover',
    type: 'array',
    of: [
      {
        title: 'Privacy Policy Disclaimers Cell',
        name: 'privacyPolicyDisclaimersCell',
        type: 'privacyPolicyDisclaimersCell',
      },
    ],
  },
  ...,
]

Intl-whitelabel-app

Expand
titlesrc/queries/sanity/support.graphql

Following the privacyPolicy implementation: src/queries/sanity/feature-birthday-and-catering.graphql

Code Block
supportPolicyCover {
  privacyPolicyDisclaimersCells {
    disclaimerTitle
    disclaimerDescription
    disclaimerContent {
      locale: enRaw
    }
    border
    fontSize
    paddingTop
    paddingRight
    paddingBottom
    paddingLeft
    radius
  }
}
Expand
titlesrc/hooks/use-support-data/use-feature-navigation.ts
Code Block
{
...
const {
    ...,
    supportPolicyCover,
  } = data?.SupportData ?? {};
  const isSupportDataLoading = featureIdsLoading || loading;
  
  ...
  
  return {
    ...,
    supportPolicyCover,
  };
};
Expand
titlesrc/pages/support-v2/support-v2-form-page/support-v2-form-view.tsx

Import the component below the form as birthday and catering feature: src/components/catering-birthday/client-information/catering-birthday-client-information.tsx

Optional: Create a SupportPolicyCoverContainer, SupportPolicyCoverDisclaimerBox and SupportPolicyCoverDisclaimerBox.

Reminder: You need to check that the request has already been completed, for this you can use the loading property of useSupportData. Furthermore, it is necessary to validate that the flag is enabled.

Code Block
const { supportPolicyCover } = useSupportData();
const privacyPolicyDisclaimersCells =
    supportPolicyCover?.privacyPolicyDisclaimersCells;
    
<PoliciesContainer>
      {privacyPolicyDisclaimersCells?.map(item => {
        return (
          item?.disclaimerContent?.locale && (
            <PrivacyPolicyDisclaimerBox radius={item?.radius} border={item?.border}>
              <PrivacyPolicyDisclaimer
                fontSize={item?.fontSize}
                paddingTop={item?.paddingTop}
                paddingRight={item?.paddingRight}
                paddingBottom={item?.paddingBottom}
                paddingLeft={item?.paddingLeft}
              >
                <SanityBlockRenderer content={item?.disclaimerContent?.locale} />
              </PrivacyPolicyDisclaimer>
            </PrivacyPolicyDisclaimerBox>
          )
        );
      })}
</PoliciesContainer>

(warning)Potential Challenges

Info

List here potential challenges that have come across the opportunity definition or from the potential solutions so far.

N/A

💰 Cost

Info

Describe any additional cost this solution may imply.

N/A

🎛️ Configuration

Info

Include here any configuration required (Sanity, LaunchDarkly flags, etc.) required to enable the solution.

Sanity

The first step in this solution involves adding the texts in Sanity. To do this, you will need to navigate to the support document and add a new item in the “Support Policy Cover” field via the following path:

CTG Configs -> Support -> Support Data

Once the item has been created, clicking on it, it will open a modal, allowing you to include the messages that will be displayed in the “Disclaimer Content” field. In addition, all translations must be entered in the corresponding fields for each language.

Launch Darkly

The second stage is simpler and will only be carried out in the initial stages of validating the feature in production, and will be removed after this phase.

If the feature flag is still present, you will need to access the “support-policy-cover-to-contact” flag and enable it in the desired environment. Otherwise, the feature will already be working and you'll just need to add the content to Sanity.

📈 Metrics

Info

Describe the metrics that will be used to measure the solution’s success, as well as how to measure those KPIs.

N/A

🗓️ Delivery Plan

Info

Link to the task or list of all the tasks required to deliver the solution, along with its progress.

Step

Task

Status

Add new field in sanity support document

Status
titleBACKLOG

Add new field in WL support page

Status
titleBACKLOG

🧑‍🚒 QA Plan

Info

Testing scenarios. See example /wiki/spaces/EGMT/pages/4080861189.

Scenario

Steps

Result

Open the support form and show the policy cover field

  1. Enable the feature flag

  2. Go to support page

  3. Select the reason for support

  4. The support form will appear

A policy coverage field should appear below the “Describe your problem” field.

Open the support form and not show the policy cover field

  1. Disable the feature flag

  2. Go to support page

  3. Select the reason for support

  4. The support form will appear

A policy coverage field should not appear below the “Describe your problem” field.

Open the support form and show the policy cover field translated

  1. Enable the feature flag

  2. Change the language

  3. Go to support page

  4. Select the reason for support

  5. The support form will appear

A policy coverage field should appear below the “Describe your problem” field with the text translated.

Open the support form, the support policy cover is empty in sanity and not show the policy cover field in support page

  1. Enable the feature flag

  2. Support Policy Cover is empty in Sanity

  3. Go to support page

  4. Select the reason for support

  5. The support form will appear

A policy coverage field should not appear below the “Describe your problem” field.

⚠️ Call-outs

Note

Tip: Document here any improvement or discussion regarding the feature

N/A