[IMP] Payment: hide the URL payment link

Since the generated payment link is not editable, it is hidden behind
the wizard copy button.

To help the users understand the button, the text on the button can now
be edited in the xml with a `label` attribute.

task-2683480

closes odoo/odoo#100261

Signed-off-by: Vallaeys Valentin (vava) <vava@odoo.com>
Co-authored-by: Valentin Chevalier <vcr@odoo.com>

addons/payment/wizards/payment_link_wizard_views.xml

@@ -22,14 +22,18 @@
                             attrs="{'invisible':[('has_multiple_providers', '=', False)]}"/>
                     </group>
                 </group>
-                <group>
-                    <field name="link" readonly="1" widget="CopyClipboardChar"/>
-                </group>
                 <group attrs="{'invisible':[('partner_email', '!=', False)]}">
                     <p class="alert alert-warning fw-bold" role="alert">This partner has no email, which may cause issues with some payment providers. Setting an email for this partner is advised.</p>
                 </group>
                 <footer>
-                    <button string="Close" class="btn-primary" special="cancel" data-hotkey="z"/>
+                    <field name="link"
+                           readonly="1"
+                           widget="CopyClipboardButton"
+                           options="{'label': 'Generate and Copy Payment Link'}"/>
+                    <button string="Close"
+                            class="btn btn-secondary rounded-2"
+                            special="cancel"
+                            data-hotkey="z"/>
                 </footer>
             </form>
         </field>

addons/web/static/src/views/fields/copy_clipboard/copy_button.xml

@@ -5,7 +5,7 @@
         <button
             class="text-nowrap"
             t-ref="button"
-            t-attf-class="btn btn-sm btn-primary o_clipboard_button {{ props.className || '' }}"
+            t-attf-class="btn btn-primary o_clipboard_button {{ props.className || '' }}"
             t-on-click.stop="onClick"
         >
             <span class="fa fa-clipboard mx-1"/>

addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.js

@@ -13,23 +13,32 @@ const { Component } = owl;
 
 class CopyClipboardField extends Component {
     setup() {
-        this.copyText = this.env._t("Copy");
+        this.copyText = this.props.label || this.env._t("Copy");
         this.successText = this.env._t("Copied");
     }
     get copyButtonClassName() {
-        return `o_btn_${this.props.type}_copy`;
+        return `o_btn_${this.props.type}_copy btn-sm`;
+    }
+    get fieldProps() {
+        const fieldProps = {...this.props};
+        delete fieldProps.label;
+        return fieldProps;
     }
 }
 CopyClipboardField.template = "web.CopyClipboardField";
 CopyClipboardField.props = {
     ...standardFieldProps,
+    label: { type: String, optional: true },
+};
+CopyClipboardField.extractProps = ({ attrs }) => {
+    return {
+        label: attrs.options.label,
+    };
 };
 
 export class CopyClipboardButtonField extends CopyClipboardField {
     get copyButtonClassName() {
-        const classNames = [super.copyButtonClassName];
-        classNames.push("rounded-2");
-        return classNames.join(" ");
+        return `o_btn_${this.props.type}_copy rounded-2`;
     }
 }
 CopyClipboardButtonField.template = "web.CopyClipboardButtonField";

addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.xml

@@ -3,7 +3,7 @@
 
     <t t-name="web.CopyClipboardField" owl="1">
         <div t-if="props.value" class="d-grid rounded-2 overflow-hidden">
-            <Field t-props="props"/>
+            <Field t-props="fieldProps"/>
             <CopyButton className="copyButtonClassName" content="props.value" copyText="copyText" successText="successText"/>
         </div>
     </t>