[Feature] Payment requests onboarding rework

addon/components/o-s-s/banner.ts

@@ -1,6 +1,8 @@
 import { isBlank } from '@ember/utils';
 import Component from '@glimmer/component';
-import { FEEDBACK_TYPES, type FeedbackMessage } from './input-container';
+
+import type { FeedbackMessage } from '@upfluence/oss-components/types';
+import { ALLOWED_FEEDBACK_MESSAGE_TYPES } from '@upfluence/oss-components/utils';
 
 type SizeType = 'sm' | 'md' | 'lg';
 
@@ -35,7 +37,7 @@ export default class OSSBanner extends Component<OSSBannerArgs> {
   }
 
   get feedbackMessage(): FeedbackMessage | undefined {
-    if (this.args.feedbackMessage && FEEDBACK_TYPES.includes(this.args.feedbackMessage.type)) {
+    if (this.args.feedbackMessage && ALLOWED_FEEDBACK_MESSAGE_TYPES.includes(this.args.feedbackMessage.type)) {
       return this.args.feedbackMessage;
     }
     return undefined;

addon/components/o-s-s/country-selector.hbs

@@ -1,6 +1,6 @@
 <div
   id={{this.elementId}}
-  class="country-selector-container fx-1"
+  class={{this.computedClasses}}
   data-toggle="oss-dropdown"
   {{did-insert this.registerContainer}}
   {{will-destroy this.disconnectObserver}}
@@ -51,4 +51,13 @@
       </OSS::InfiniteSelect>
     {{/in-element}}
   {{/if}}
+
+  {{#if this.feedbackMessage.value}}
+    <span
+      class={{concat "fx-row font-color-" this.feedbackMessage.type "-500 padding-top-px-6"}}
+      data-control-name="country-selector-feedback-message"
+    >
+      {{this.feedbackMessage.value}}
+    </span>
+  {{/if}}
 </div>

addon/components/o-s-s/country-selector.stories.js

@@ -98,6 +98,17 @@ export default {
       },
       control: { type: 'text' }
     },
+    feedbackMessage: {
+      description:
+        'A feedback message to display below the country selector. The message object contains a type and value. Allowed types are: <code>error</code>, <code>warning</code>, <code>success</code>. The type determines the color of the message and applies a CSS class to the upload area.',
+      table: {
+        type: {
+          summary: 'FeedbackMessage'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'object' }
+    },
     onChange: {
       type: { required: true },
       description: 'A callback that sends the selected country/province object to the parent component',
@@ -122,6 +133,7 @@ export default {
 const defaultArgs = {
   sourceList: partialCountries,
   value: undefined,
+  feedbackMessage: undefined,
   onChange: action('onChange')
 };
 
@@ -147,3 +159,11 @@ PrefilledUsage.args = {
   ...defaultArgs,
   ...{ value: 'FR' }
 };
+
+export const WithFeedbackMessage = Template.bind({});
+WithFeedbackMessage.args = {
+  ...defaultArgs,
+  ...{
+    feedbackMessage: { type: 'error', value: 'This is an error message' }
+  }
+};

addon/components/o-s-s/country-selector.ts

@@ -1,14 +1,16 @@
 import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
 import { inject as service } from '@ember/service';
 import { isEmpty } from '@ember/utils';
-
+import { scheduleOnce } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
 import type { IntlService } from 'ember-intl';
 
-import BaseDropdown, { type BaseDropdownArgs } from './private/base-dropdown';
-import { scheduleOnce } from '@ember/runloop';
+import { ALLOWED_FEEDBACK_MESSAGE_TYPES } from '@upfluence/oss-components/utils';
 import attachDropdown from '@upfluence/oss-components/utils/attach-dropdown';
+import type { FeedbackMessage } from '@upfluence/oss-components/types';
+
+import BaseDropdown, { type BaseDropdownArgs } from './private/base-dropdown';
 
 type Item = {
   name: string;
@@ -49,6 +51,20 @@ export default class OSSCountrySelector extends BaseDropdown<OSSCountrySelectorA
     }
   }
 
+  get computedClasses(): string {
+    const classes = ['country-selector-container', 'fx-1'];
+
+    if (this.feedbackMessage?.type && ALLOWED_FEEDBACK_MESSAGE_TYPES.includes(this.feedbackMessage.type)) {
+      classes.push(`country-selector-container--${this.feedbackMessage?.type}`);
+    }
+
+    return classes.join(' ');
+  }
+
+  get feedbackMessage(): FeedbackMessage | undefined {
+    return this.args.feedbackMessage;
+  }
+
   get isCountry(): boolean {
     return this.args.sourceList[0]?.id !== undefined;
   }

addon/components/o-s-s/email-input.hbs

@@ -1,3 +1,8 @@
 <OSS::InputContainer
-  @value={{@value}} @placeholder={{this.placeholder}} @errorMessage={{this.errorMessage}}
-  @onChange={{this.validateInput}} ...attributes />
+  @value={{@value}}
+  @placeholder={{this.placeholder}}
+  @errorMessage={{this.errorMessage}}
+  @feedbackMessage={{@feedbackMessage}}
+  @onChange={{this.validateInput}}
+  ...attributes
+/>

addon/components/o-s-s/email-input.stories.js

@@ -25,6 +25,16 @@ export default {
       },
       control: { type: 'text' }
     },
+    feedbackMessage: {
+      description: 'A success, warning or error message that will be displayed below the input-group.',
+      table: {
+        type: {
+          summary: '{ type: string, value: string }'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'object' }
+    },
     errorMessage: {
       description: 'Error message that is displayed when the email pattern is invalid',
       table: {
@@ -73,14 +83,15 @@ const defaultArgs = {
   value: 'john.doe@example.com',
   placeholder: 'foo@bar.org',
   errorMessage: undefined,
+  feedbackMessage: undefined,
   validateFormat: false,
   validates: action('validates')
 };
 
 const Template = (args) => ({
   template: hbs`
       <OSS::EmailInput @value={{this.value}} @placeholder={{this.placeholder}} @validateFormat={{this.validateFormat}}
-                       @validates={{this.validates}} @errorMessage={{this.errorMessage}} />
+                       @validates={{this.validates}} @errorMessage={{this.errorMessage}} @feedbackMessage={{this.feedbackMessage}} />
   `,
   context: args
 });

addon/components/o-s-s/email-input.ts

@@ -3,10 +3,12 @@ import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import type { FeedbackMessage } from '@upfluence/oss-components/types';
 
 interface OSSEmailInputArgs {
   value: string | null;
   placeholder?: string;
+  feedbackMessage?: FeedbackMessage;
   errorMessage?: string;
   validateFormat?: boolean;
   validates?(isPassing: boolean): void;

addon/components/o-s-s/input-container.hbs

@@ -33,7 +33,7 @@
   </div>
   {{#if @errorMessage}}
     <span class="text-color-error margin-top-px-6">{{@errorMessage}}</span>
-  {{else if this.feedbackMessage}}
+  {{else if this.feedbackMessage.value}}
     <span class={{concat "margin-top-px-6 font-color-" this.feedbackMessage.type "-500"}}>
       {{#unless (eq this.feedbackMessage.type "error")}}
         <OSS::Icon @icon={{this.messageIcon}} />

addon/components/o-s-s/input-container.stories.js

@@ -113,6 +113,7 @@ const defaultArgs = {
   disabled: false,
   type: undefined,
   placeholder: 'this is the placeholder',
+  feedbackMessage: undefined,
   errorMessage: undefined,
   autocomplete: undefined,
   onChange: action('onChange')
@@ -121,7 +122,7 @@ const defaultArgs = {
 const DefaultUsageTemplate = (args) => ({
   template: hbs`
       <OSS::InputContainer @value={{this.value}} @disabled={{this.disabled}} @placeholder={{this.placeholder}} @type={{this.type}}
-                           @errorMessage={{this.errorMessage}} @onChange={{this.onChange}} @autocomplete={{this.autocomplete}} />
+                           @feedbackMessage={{this.feedbackMessage}} @errorMessage={{this.errorMessage}} @onChange={{this.onChange}} @autocomplete={{this.autocomplete}} />
   `,
   context: args
 });

addon/components/o-s-s/input-container.ts

@@ -2,13 +2,10 @@ import { action } from '@ember/object';
 import { next } from '@ember/runloop';
 import Component from '@glimmer/component';
 
-export const FEEDBACK_TYPES = ['error', 'warning', 'success'] as const;
-export type FeedbackType = (typeof FEEDBACK_TYPES)[number];
+import type { FeedbackMessage } from '@upfluence/oss-components/types';
+import { ALLOWED_FEEDBACK_MESSAGE_TYPES } from '@upfluence/oss-components/utils';
 
-export type FeedbackMessage = {
-  type: FeedbackType;
-  value: string;
-};
+export type { FeedbackMessage };
 
 export interface OSSInputContainerArgs {
   value?: string;
@@ -26,7 +23,7 @@ export const AutocompleteValues = ['on', 'off'];
 
 export default class OSSInputContainer<T extends OSSInputContainerArgs> extends Component<T> {
   get feedbackMessage(): FeedbackMessage | undefined {
-    if (this.args.feedbackMessage && FEEDBACK_TYPES.includes(this.args.feedbackMessage.type)) {
+    if (this.args.feedbackMessage && ALLOWED_FEEDBACK_MESSAGE_TYPES.includes(this.args.feedbackMessage.type)) {
       return this.args.feedbackMessage;
     }
 

addon/components/o-s-s/upload-area.hbs

@@ -9,7 +9,7 @@
       {{on "click" this.triggerFileBrowser}}
       {{on "mouseenter" this._mouseEnter}}
       {{on "mouseleave" this._mouseLeave}}
-      {{did-insert this.init}}
+      {{did-insert this.onInit}}
       ...attributes
     >
       <div class="fx-gap-px-18 fx-xalign-center {{if (eq this.size 'lg') 'fx-col' 'fx-row fx-1'}}">
@@ -70,4 +70,9 @@
   {{/if}}
 
   <input type="file" {{on "change" this.onFileSelected}} {{did-insert this.assignFileInput}} />
+  {{#if this.feedbackMessage.value}}
+    <span class={{concat "fx-row font-color-" this.feedbackMessage.type "-500 padding-top-px-6"}}>
+      {{this.feedbackMessage.value}}
+    </span>
+  {{/if}}
 </div>

addon/components/o-s-s/upload-area.stories.js

@@ -1,6 +1,6 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
-import { MockUploader } from 'dummy/controllers/application';
+import { MockUploader } from 'dummy/controllers/extra';
 
 const PrivacyTypes = ['public', 'private'];
 const SizeTypes = ['md', 'lg'];
@@ -112,7 +112,21 @@ export default {
         defaultValue: { summary: false }
       }
     },
+    feedbackMessage: {
+      description:
+        'A feedback message to display below the upload area. The message object contains a type and value.<br>' +
+        'Allowed types are: <code>error</code>, <code>warning</code>, <code>success</code>.<br>' +
+        'The type determines the color of the message and applies a CSS class to the upload area.',
+      table: {
+        type: {
+          summary: 'FeedbackMessage'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'object' }
+    },
     onUploadSuccess: {
+      type: { required: true },
       description:
         'Action called when the file is upload with success. This action has two definitions:<br>' +
         '- onUploadSuccess(artifact: FileArtifact): void (single mode)<br>' +
@@ -214,8 +228,8 @@ const DefaultUsageTemplate = (args) => ({
     <div style="padding: 24px; background-color: white">
         <OSS::UploadArea @uploader={{this.uploader}} @subtitle={{this.subtitle}} @disabled={{this.disabled}}
                          @privacy={{this.privacy}} @scope={{this.scope}} @rules={{this.rules}} @artifact={{this.artifact}}
-                         @size={{this.size}} @multiple={{this.multiple}} @onUploadSuccess={{this.onUploadSuccess}}
-                         @onFileDeletion={{this.onFileDeletion}} />
+                         @size={{this.size}} @multiple={{this.multiple}} @feedbackMessage={{this.feedbackMessage}}
+                         @onUploadSuccess={{this.onUploadSuccess}} @onFileDeletion={{this.onFileDeletion}} />
     </div>
   `,
   context: args
@@ -224,6 +238,14 @@ const DefaultUsageTemplate = (args) => ({
 export const Default = DefaultUsageTemplate.bind({});
 Default.args = defaultArgs;
 
+export const WithFeedbackMessage = DefaultUsageTemplate.bind({});
+WithFeedbackMessage.args = {
+  ...defaultArgs,
+  ...{
+    feedbackMessage: { type: 'error', value: 'File size exceeds the maximum allowed limit' }
+  }
+};
+
 export const SingleWithArtifact = DefaultUsageTemplate.bind({});
 SingleWithArtifact.args = {
   ...defaultArgs,