[new feature] SubmitBar: add suffix-label prop

packages/submit-bar/index.tsx

@@ -17,6 +17,7 @@ export type SubmitBarProps = {
   disabled?: boolean;
   buttonType: ButtonType;
   buttonText?: string;
+  suffixLabel?: string;
   decimalLength: number;
   safeAreaInsetBottom?: boolean;
 };
@@ -35,7 +36,34 @@ function SubmitBar(
   ctx: RenderContext<SubmitBarProps>
 ) {
   const { tip, price, tipIcon } = props;
-  const hasPrice = typeof price === 'number';
+
+  function Text() {
+    if (typeof price === 'number') {
+      const priceText = `${props.currency} ${(price / 100).toFixed(props.decimalLength)}`;
+
+      return (
+        <div class={bem('text')}>
+          <span>{props.label || t('label')}</span>
+          <span class={bem('price')}>{priceText}</span>
+          {props.suffixLabel && (
+            <span class={bem('suffix-label')}>{props.suffixLabel}</span>
+          )}
+        </div>
+      );
+    }
+  }
+
+  function Tip() {
+    if (slots.tip || tip) {
+      return (
+        <div class={bem('tip')}>
+          {tipIcon && <Icon class={bem('tip-icon')} name={tipIcon} />}
+          {tip && <span class={bem('tip-text')}>{tip}</span>}
+          {slots.tip && slots.tip()}
+        </div>
+      );
+    }
+  }
 
   return (
     <div
@@ -43,27 +71,10 @@ function SubmitBar(
       {...inherit(ctx)}
     >
       {slots.top && slots.top()}
-      {(slots.tip || tip) && (
-        <div class={bem('tip')}>
-          {tipIcon && (
-            <Icon class={bem('tip-icon')} name={tipIcon} />
-          )}
-          {tip && (
-            <span class={bem('tip-text')}>{tip}</span>
-          )}
-          {slots.tip && slots.tip()}
-        </div>
-      )}
+      {Tip()}
       <div class={bem('bar')}>
         {slots.default && slots.default()}
-        <div class={bem('text')}>
-          {hasPrice && [
-            <span>{props.label || t('label')}</span>,
-            <span class={bem('price')}>{`${props.currency} ${(
-              (price as number) / 100
-            ).toFixed(props.decimalLength)}`}</span>
-          ]}
-        </div>
+        {Text()}
         <Button
           square
           size="large"
@@ -87,6 +98,7 @@ SubmitBar.props = {
   loading: Boolean,
   disabled: Boolean,
   buttonText: String,
+  suffixLabel: String,
   safeAreaInsetBottom: Boolean,
   price: {
     type: Number,