How to use the cozy-ui/transpiled/react.translate function in cozy-ui

// TODO use stack layout when https://github.com/cozy/cozy-banks/pull/1312 has been merged (see https://github.com/cozy/cozy-banks/pull/1312/commits/2bc1d75a25fe2c61f219579ac56407e356997105 more particularly)
                    className={cx({
                      'u-mt-1-half': index !== 0
                    })}
                  />
                ))}
            
          ) : null}
        
      
    )
  }
}

const ReimbursementStatusModal = compose(
  translate(),
  withBreakpoints()
)(_ReimbursementStatusModal)

export default ReimbursementStatusModal

id="account-type"
          label={t('AccountSettings.type')}
          value={getAccountType(account)}
          disabled
          variant={fieldVariant}
          className={styles.Form__field}
        />
      
      
    
  )
}

const AccountSettingsForm = compose(
  withBreakpoints(),
  translate()
)(DumbAccountSettingsForm)

const FormControls = props => {
  const { t } = useI18n()
  const { onCancel, form, className, ...rest } = props

  return (
    <div>
      <button label="{t('General.cancel')}">
      </button></div>

)
  }
}

AccountRowLoading.propTypes = {
  t: PropTypes.func.isRequired,
  konnector: PropTypes.string.isRequired,
  account: PropTypes.string,
  status: PropTypes.string.isRequired
}

export default compose(
  translate(),
  withClient
)(AccountRowLoading)

)
  }
}

TransactionsDumb.propTypes = {
  showTriggerErrors: PropTypes.bool
}

TransactionsDumb.defaultProps = {
  showTriggerErrors: true
}

const Transactions = compose(
  withBreakpoints(),
  translate()
)(TransactionsDumb)

export const TransactionList = Transactions

}
}

export const BalanceAddAccountButton = ({ theme, onClick }) => {
  const { t } = useI18n()
  return (
    <button label="{t('Accounts.add_bank')}">
  )
}

BalanceAddAccountButton.defaultProps = {
  theme: 'ghost'
}

export default compose(
  translate(),
  withRouter
)(BalancePanels)
</button>

),
      ...(isCollapsed || subcategory
        ? []
        : subcategories.map(subcategory =>
            this.renderCategoryMobile(category, subcategory)
          ))
    ]
  }
}

export default compose(
  withRouter,
  withBreakpoints(),
  translate()
)(Categories)

)
  }
}

SelectDates.defaultProps = {
  options: getDefaultOptions()
}

SelectDates.propTypes = {
  onChange: PropTypes.func.isRequired
}

export default compose(
  translate(),
  scrollAware,
  withBreakpoints(),
  themed
)(SelectDates)

}}
        
        <p>
          <button label="{t('Groups.delete')}">
        <p></p>
      
    )
  }
}

export const GroupSettings = compose(
  translate(),
  withBreakpoints()
)(DumbGroupSettings)

const enhance = Component =&gt;
  compose(
    withRouter,
    withClient
  )(Component)

const ExistingGroupSettings = enhance(props =&gt; (
   client.get(GROUP_DOCTYPE, props.routeParams.groupId)}&gt;
    {({ data: group, fetchStatus }) =&gt;
      fetchStatus === 'loading' || fetchStatus === 'pending' ? (
        &lt;&gt;
          
          </button></p>

{Configuration.renderExtraItems()}
      
    )
  }
}

export default compose(
  withClient,
  queryConnect({
    settingsCollection: settingsConn
  }),
  withAccountOrGroupLabeller('getAccountOrGroupLabel'),
  flag.connect,
  translate()
)(Configuration)

pointStrokeColor="rgba(255, 255, 255, 0.3)"
          getTooltipContent={this.getTooltipContent}
          data={data}
          width={width}
          height={height}
          {...this.props}
        />
      
    )
  }
}

const EnhancedHistoryChart = compose(
  withRouter,
  withBreakpoints(),
  translate()
)(HistoryChart)

export const ConnectedHistoryChart = compose(
  withRouter,
  connect((state, ownProps) => ({
    data: getChartData(state, ownProps)
  })),
  withBreakpoints(),
  translate()
)(HistoryChart)

export default EnhancedHistoryChart