Supporting Double Optin Country (#12342)

### Related Ticket(s)

[Noitce & Choice w3 Publisher](https://w3.ibm.com/w3publisher/urx/notice-and-choice-v23)

### Description

Notice & Choice is a legally required component to create a form where IBM collects its customer information.
This section shows the specific product's legal links, terms, and conditions. Along with this, it collects users' consent regarding communication preferences.

### Changelog

**New**


**Changed**
- Supporting Double Opt-In Country.

**Removed**

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

Author: deathcave

packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts

@@ -102,6 +102,22 @@ const onEmailStatusChanged = (events: CustomEvent) => {
   console.log(`[${events.type}] :`, events.detail);
 };
 
+const onCustomNoticeTextChange = (events: CustomEvent) => {
+  console.log(`[${events.type}] :`, events.detail);
+};
+
+const showCustomNotice = {
+  True: 'true',
+  False: 'false',
+};
+
+const customNoticeText = JSON.stringify({
+  text: "By providing my contact details, I acknowledge that Apptio, an IBM Company will keep me informed about products, services, and offers. More information on how Apptio, an IBM Company uses data can be found in the <span id='ps'><ps>Apptio, an IBM Company Privacy Statement</ps></span>. California residents, review the <ccpa>California Supplemental Privacy Statement</ccpa>.",
+  optOutLink: 'https://respond.apptio.com/unsubscribe.html',
+  psLink: 'https://www.ibm.com/us-en/privacy',
+  ccpaLink: 'https://www.ibm.com/us-en/privacy/ccpa',
+});
+
 const props = () => {
   const selectedCountry = select('Country', countryList, 'US');
   let availableStates = stateList[selectedCountry] || [{ Unknown: '' }];
@@ -117,13 +133,20 @@ const props = () => {
     ),
     onChange: action('c4d-notice-choice-change'),
     onEmailStatusChanged: action('c4d-notice-choice-email-status-changed'),
+    onCustomNoticeTextChange: action('c4d-notice-choice-text-change'),
     hideErrorMessages: select(
       'Hide Error Messages',
       hideErrorMessages,
       'false'
     ),
     environment: select('Environment', environment, 'stage'),
     email: text('Email', ''),
+    customNoticeText: customNoticeText,
+    showCustomNotice: select(
+      'Show Custom Notice Text',
+      showCustomNotice,
+      'false'
+    ),
   };
 };
 
@@ -136,12 +159,10 @@ export const Default = (args) => {
     questionchoices,
     hideErrorMessages,
     enableAllOptIn,
-    hiddenEmail,
-    hiddenPhone,
-    ncTeleDetail,
-    ncEmailDetail,
+    customNoticeText,
     environment,
     email,
+    showCustomNotice,
   } = args?.NoticeChoice ?? {};
   return html`
     <c4d-notice-choice
@@ -153,13 +174,12 @@ export const Default = (args) => {
       terms-condition-link="${termsConditionLink || ''}"
       hide-error-message="${hideErrorMessages}"
       ?enable-all-opt-in=${enableAllOptIn}
-      .hiddenEmail="${hiddenEmail}"
-      .hiddenPhone="${hiddenPhone}"
-      .nc-tele-detail="${ncTeleDetail}"
-      .nc-email-detail="${ncEmailDetail}"
+      custom-notice-text=${customNoticeText}
+      show-custom-notice-text=${showCustomNotice}
       environment="${environment}"
       @c4d-notice-choice-change=${onChange}
-      @c4d-notice-choice-email-status-changed=${onEmailStatusChanged}>
+      @c4d-notice-choice-email-status-changed=${onEmailStatusChanged}
+      @c4d-notice-choice-text-change=${onCustomNoticeTextChange}>
     </c4d-notice-choice>
   `;
 };