cozy-ui-plus 1.1.0

package/src/ListItem/locales/fr.json

@@ -0,0 +1,75 @@
+{
+  "common": {
+    "day": "%{smart_count} jour |||| %{smart_count} jours"
+  },
+  "ListItem": {
+    "attributes": {
+      "birthday": "Date de naissance",
+      "birthcity": "Lieu de naissance",
+      "address": "Adresse",
+      "email": "Adresse e-mail",
+      "phone": "Numéro de téléphone",
+      "company": "Entreprise",
+      "jobTitle": "Fonction",
+      "metadata": {
+        "datetime": "Ajouté le",
+        "issueDate": "Délivré le",
+        "expirationDate": "Date d'expiration",
+        "referencedDate": "Date de référence",
+        "shootingDate": "Date de prise de vue",
+        "obtentionDate": "Date d'obtention",
+        "date": "Date du document",
+        "country": "Pays de délivrance",
+        "refTaxIncome": "Revenu fiscal de référence",
+        "contractType": "Type de contrat",
+        "noticePeriod": "Alerte d’expiration",
+        "cafFileNumber": "Numéro de dossier CAF",
+        "vinNumber": "Numéro de la carte grise (VIN)",
+        "cardNumber": "Numéro de la carte d'identité",
+        "ibanNumber": "Numéro d'IBAN",
+        "bicNumber": "Numéro BIC",
+        "passportNumber": "Numéro du passeport",
+        "netSocialAmount": "Montant net social",
+        "vehicle": {
+          "licenseNumber": "Plaque d'immatriculation",
+          "confidentialNumber": "Code confidentiel de la carte grise"
+        },
+        "number": {
+          "pay_sheet": "Rémunération brute",
+          "tax_return": "Numéro fiscal de référence",
+          "tax_notice": "Numéro fiscal de référence",
+          "real_estate_tax": "Numéro fiscal de référence",
+          "tax_timetable": "Numéro fiscal de référence",
+          "fine": "Montant de l'amende",
+          "fidelity_card": "Numéro de la carte",
+          "driver_license": "Numéro du permis",
+          "caf": "Numéro de dossier CAF",
+          "payment_proof_family_allowance": "Numéro de dossier CAF",
+          "vehicle_registration": "Numéro de la carte grise (VIN)",
+          "national_id_card": "Numéro de la carte d'identité",
+          "bank_details": "Numéro d'IBAN",
+          "passport": "Numéro du passeport",
+          "residence_permit": "Numéro du permis"
+        }
+      }
+    },
+    "file": {
+      "page": {
+        "back": "Face arrière",
+        "front": "Face avant"
+      }
+    },
+    "snackbar": {
+      "copyToClipboard": {
+        "success": "Copié dans le presse-papier",
+        "error": "Impossible de copier dans le presse-papier"
+      }
+    },
+    "renameModal": {
+      "title": "Renommer",
+      "content": "Vous êtes sur le point de changer l'extension du fichier. Voulez-vous continuer ?",
+      "cancel": "Annuler",
+      "submit": "Continuer"
+    }
+  }
+}

package/src/ListItem/locales/ru.json

@@ -0,0 +1,75 @@
+{
+  "common": {
+    "day": "%{smart_count} день |||| %{smart_count} дней"
+  },
+  "ListItem": {
+    "attributes": {
+      "birthday": "День рождения",
+      "birthcity": "Город рождения",
+      "address": "Адрес",
+      "email": "Адрес электронной почты",
+      "phone": "Номер телефона",
+      "company": "Компания",
+      "jobTitle": "Должность",
+      "metadata": {
+        "datetime": "Добавлено",
+        "issueDate": "Выдано",
+        "expirationDate": "Срок истечения",
+        "referencedDate": "Дата ссылки",
+        "shootingDate": "Дата съемки",
+        "obtentionDate": "Дата получения",
+        "date": "Дата документа",
+        "country": "Страна выдачи",
+        "refTaxIncome": "Референсный налоговый доход",
+        "contractType": "Тип контракта",
+        "noticePeriod": "Предупреждение об истечении",
+        "cafFileNumber": "Номер файла CAF",
+        "vinNumber": "Регистрационный номер транспортного средства (VIN)",
+        "cardNumber": "Номер удостоверения личности",
+        "ibanNumber": "Номер IBAN",
+        "bicNumber": "Номер BIC",
+        "passportNumber": "Номер паспорта",
+        "netSocialAmount": "Чистая социальная сумма",
+        "vehicle": {
+          "licenseNumber": "Регистрационный номер транспортного средства",
+          "confidentialNumber": "Конфиденциальный код регистрации транспортного средства"
+        },
+        "number": {
+          "pay_sheet": "Валовое вознаграждение",
+          "tax_return": "Референсный налоговый номер",
+          "tax_notice": "Референсный налоговый номер",
+          "real_estate_tax": "Референсный налоговый номер",
+          "tax_timetable": "Референсный налоговый номер",
+          "fine": "Размер штрафа",
+          "fidelity_card": "Номер карты",
+          "driver_license": "Номер лицензии",
+          "caf": "Номер файла CAF",
+          "payment_proof_family_allowance": "Номер файла CAF",
+          "vehicle_registration": "Регистрационный номер транспортного средства (VIN)",
+          "national_id_card": "Номер удостоверения личности",
+          "bank_details": "Номер IBAN",
+          "passport": "Номер паспорта",
+          "residence_permit": "Номер лицензии"
+        }
+      }
+    },
+    "file": {
+      "page": {
+        "back": "Обратная сторона",
+        "front": "Лицевая сторона"
+      }
+    },
+    "snackbar": {
+      "copyToClipboard": {
+        "success": "Скопировано в буфер обмена",
+        "error": "Не удается скопировать в буфер обмена"
+      }
+    },
+    "renameModal": {
+      "title": "Переименовать",
+      "content": "Вы собираетесь изменить расширение файла. Хотите продолжить?",
+      "cancel": "Отменить",
+      "submit": "Продолжить"
+    }
+  }
+}

package/src/ListItem/locales/vi.json

@@ -0,0 +1,75 @@
+{
+  "common": {
+    "day": "%{smart_count} ngày |||| %{smart_count} ngày"
+  },
+  "ListItem": {
+    "attributes": {
+      "birthday": "Sinh nhật",
+      "birthcity": "Thành phố sinh",
+      "address": "Địa chỉ",
+      "email": "Địa chỉ email",
+      "phone": "Số điện thoại",
+      "company": "Công ty",
+      "jobTitle": "Chức vụ",
+      "metadata": {
+        "datetime": "Được thêm vào",
+        "issueDate": "Được giao vào",
+        "expirationDate": "Ngày hết hạn",
+        "referencedDate": "Ngày tham chiếu",
+        "shootingDate": "Ngày chụp",
+        "obtentionDate": "Ngày có được",
+        "date": "Ngày tài liệu",
+        "country": "Quốc gia phát hành",
+        "refTaxIncome": "Thu nhập thuế tham chiếu",
+        "contractType": "Loại hợp đồng",
+        "noticePeriod": "Cảnh báo hết hạn",
+        "cafFileNumber": "Số hồ sơ CAF",
+        "vinNumber": "Số đăng ký xe (VIN)",
+        "cardNumber": "Số thẻ căn cước",
+        "ibanNumber": "Số IBAN",
+        "bicNumber": "Số BIC",
+        "passportNumber": "Số hộ chiếu",
+        "netSocialAmount": "Số tiền xã hội ròng",
+        "vehicle": {
+          "licenseNumber": "Số đăng ký xe",
+          "confidentialNumber": "Mã đăng ký xe bí mật"
+        },
+        "number": {
+          "pay_sheet": "Thù lao gốc",
+          "tax_return": "Số thuế tham chiếu",
+          "tax_notice": "Số thuế tham chiếu",
+          "real_estate_tax": "Số thuế tham chiếu",
+          "tax_timetable": "Số thuế tham chiếu",
+          "fine": "Số tiền phạt",
+          "fidelity_card": "Số thẻ",
+          "driver_license": "Số giấy phép",
+          "caf": "Số hồ sơ CAF",
+          "payment_proof_family_allowance": "Số hồ sơ CAF",
+          "vehicle_registration": "Số đăng ký xe (VIN)",
+          "national_id_card": "Số thẻ căn cước",
+          "bank_details": "Số IBAN",
+          "passport": "Số hộ chiếu",
+          "residence_permit": "Số giấy phép"
+        }
+      }
+    },
+    "file": {
+      "page": {
+        "back": "Mặt sau",
+        "front": "Mặt trước"
+      }
+    },
+    "snackbar": {
+      "copyToClipboard": {
+        "success": "Đã sao chép vào clipboard",
+        "error": "Không thể sao chép vào clipboard"
+      }
+    },
+    "renameModal": {
+      "title": "Đổi tên",
+      "content": "Bạn sắp thay đổi phần mở rộng tập tin. Bạn có muốn tiếp tục không?",
+      "cancel": "Hủy",
+      "submit": "Tiếp tục"
+    }
+  }
+}

package/src/Paywall/MaxAccountsByKonnectorPaywall.jsx

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Paywall from './Paywall'
+import withPaywallLocales from './locales/withPaywallLocales'
+
+/**
+ * Paywall displayed when the user reach the maximum accounts allowed for a konnector
+ */
+const MaxAccountsByKonnectorPaywall = ({ max, konnectorName, onClose }) => {
+  return (
+    <Paywall
+      variant="maxAccountsByKonnector"
+      contentInterpolation={{
+        smart_count: max,
+        konnectorName
+      }}
+      onClose={onClose}
+    />
+  )
+}
+
+MaxAccountsByKonnectorPaywall.propTypes = {
+  /** Maximum accounts allowed for the konnector */
+  max: PropTypes.number.isRequired,
+  /** Name of the konnector */
+  konnectorName: PropTypes.string.isRequired,
+  /** Callback used when the user close the paywall */
+  onClose: PropTypes.func.isRequired
+}
+
+export default withPaywallLocales(MaxAccountsByKonnectorPaywall)

package/src/Paywall/MaxAccountsPaywall.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Paywall from './Paywall'
+import withPaywallLocales from './locales/withPaywallLocales'
+
+/**
+ * Paywall displayed when the user reach the maximum accounts allowed for all konnectors
+ */
+const MaxAccountsPaywall = ({ max, onClose }) => {
+  return (
+    <Paywall
+      variant="maxAccounts"
+      contentInterpolation={{ smart_count: max }}
+      onClose={onClose}
+    />
+  )
+}
+
+MaxAccountsPaywall.propTypes = {
+  /** Maximum accounts allowed for all konnectors */
+  max: PropTypes.number.isRequired,
+  /** Callback used when the user close the paywall */
+  onClose: PropTypes.func.isRequired
+}
+
+export default withPaywallLocales(MaxAccountsPaywall)

package/src/Paywall/MaxDaysToCapturePaywall.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Paywall from './Paywall'
+import withPaywallLocales from './locales/withPaywallLocales'
+
+/**
+ * Paywall displayed when the user reach the maximum days allowed of capture geolocated data
+ */
+const MaxDaysToCapturePaywall = ({ days, onClose }) => {
+  return (
+    <Paywall
+      variant="maxDaysToCapture"
+      contentInterpolation={{ smart_count: days }}
+      onClose={onClose}
+    />
+  )
+}
+
+MaxDaysToCapturePaywall.propTypes = {
+  /** Maximum days allowed of capture geolocated data */
+  days: PropTypes.number.isRequired,
+  /** Callback used when the user close the paywall */
+  onClose: PropTypes.func.isRequired
+}
+
+export default withPaywallLocales(MaxDaysToCapturePaywall)

package/src/Paywall/MaxPapersPaywall.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Paywall from './Paywall'
+import withPaywallLocales from './locales/withPaywallLocales'
+
+/**
+ * Paywall displayed when the user reaches the maximum number of papers created via the Mespapiers application.
+ *
+ * @param {number} max - Maximum papers allowed
+ * @param {function} onClose - Callback used when the user close the paywall
+ * @returns {React.Component} - React component
+ */
+const MaxPapersPaywall = ({ max, onClose }) => {
+  return (
+    <Paywall
+      variant="maxPapers"
+      contentInterpolation={{ smart_count: max }}
+      onClose={onClose}
+    />
+  )
+}
+
+MaxPapersPaywall.propTypes = {
+  max: PropTypes.number.isRequired,
+  onClose: PropTypes.func.isRequired
+}
+
+export default withPaywallLocales(MaxPapersPaywall)

package/src/Paywall/OnlyOfficePaywall.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Paywall from './Paywall'
+
+const OnlyOfficePaywall = ({ onClose, isPublic }) => {
+  return <Paywall variant="onlyOffice" onClose={onClose} isPublic={isPublic} />
+}
+
+/**
+ * Paywall displayed when the user is not authorised to access OnlyOffice
+ */
+OnlyOfficePaywall.propTypes = {
+  /** Callback used when the user close the paywall */
+  onClose: PropTypes.func.isRequired,
+  /** Whether OnlyOffice access in a public context */
+  isPublic: PropTypes.bool
+}
+
+OnlyOfficePaywall.defaultProps = {
+  isPublic: false
+}
+
+export default OnlyOfficePaywall

package/src/Paywall/PasswordSharingPaywall.jsx

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Paywall from './Paywall'
+
+const PasswordSharingPaywall = ({ onClose }) => {
+  return (
+    <Paywall variant="passwordSharing" onClose={onClose} isPublic={false} />
+  )
+}
+
+/**
+ * Paywall displayed when the user is not authorised to share password
+ */
+PasswordSharingPaywall.propTypes = {
+  /** Callback used when the user close the paywall */
+  onClose: PropTypes.func.isRequired
+}
+
+export default PasswordSharingPaywall

package/src/Paywall/Paywall.jsx

@@ -0,0 +1,130 @@
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
+
+import { useInstanceInfo } from 'cozy-client'
+import { buildPremiumLink } from 'cozy-client/dist/models/instance'
+import { isFlagshipApp } from 'cozy-device-helper'
+import { useWebviewIntent } from 'cozy-intent'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { IllustrationDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CozyUpgradeIcon from 'cozy-ui/transpiled/react/Icons/CozyUpgrade'
+import Markdown from 'cozy-ui/transpiled/react/Markdown'
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { makeType } from './helpers'
+import withPaywallLocales from './locales/withPaywallLocales'
+
+/**
+ * Component with the core logic of the paywall, which is then declined in several variants to adapt to the user case
+ */
+const Paywall = ({
+  variant,
+  onClose,
+  isPublic,
+  isIapEnabled,
+  contentInterpolation
+}) => {
+  const instanceInfo = useInstanceInfo()
+  const { t } = useI18n()
+
+  const webviewIntent = useWebviewIntent()
+  const [isFlagshipAppIapAvailable, setFlagshipAppIapAvailable] = useState(null)
+
+  useEffect(() => {
+    const fetchIapAvailability = async () => {
+      const isAvailable =
+        (await webviewIntent?.call('isAvailable', 'iap')) ?? false
+      setFlagshipAppIapAvailable(isAvailable)
+    }
+
+    fetchIapAvailability()
+  }, [webviewIntent])
+
+  if (!instanceInfo.isLoaded)
+    return (
+      <IllustrationDialog
+        open
+        size="small"
+        content={
+          <div className="u-h-5">
+            <Spinner size="xxlarge" noMargin middle />
+          </div>
+        }
+        onClose={onClose}
+      />
+    )
+
+  const canOpenPremiumLink =
+    !isFlagshipApp() ||
+    (isFlagshipApp() && isIapEnabled && isFlagshipAppIapAvailable)
+
+  const link = buildPremiumLink(instanceInfo)
+  const type = makeType(instanceInfo, isPublic, link)
+
+  const onAction = () => {
+    return type === 'premium' && canOpenPremiumLink
+      ? window.open(link, '_self')
+      : onClose()
+  }
+
+  return (
+    <IllustrationDialog
+      open
+      size="small"
+      actionsLayout="column"
+      title={
+        <div className="u-flex u-flex-column u-flex-items-center">
+          <Icon icon={CozyUpgradeIcon} width={128} height={128} />
+          <Typography variant="h3" className="u-mt-1">
+            {t(`${variant}Paywall.${type}.title`)}
+          </Typography>
+        </div>
+      }
+      actions={
+        <Button
+          onClick={onAction}
+          label={
+            isFlagshipAppIapAvailable === null
+              ? t(`action.loading`)
+              : canOpenPremiumLink
+              ? t(`${variant}Paywall.${type}.action`)
+              : t(`action.withoutIAP`)
+          }
+          busy={isFlagshipAppIapAvailable === null}
+        />
+      }
+      content={
+        <Markdown
+          content={t(`${variant}Paywall.${type}.content`, {
+            ...contentInterpolation
+          })}
+        />
+      }
+      onClose={onClose}
+    />
+  )
+}
+
+Paywall.propTypes = {
+  /** Type of paywall */
+  variant: PropTypes.string.isRequired,
+  /** Callback used when the user close the paywall */
+  onClose: PropTypes.func.isRequired,
+  /** Whether paywall is display in a public context */
+  isPublic: PropTypes.bool,
+  /** Whether the IAP is enabled */
+  isIapEnabled: PropTypes.bool,
+  /** Translation interpolation for the content of the paywall */
+  contentInterpolation: PropTypes.object
+}
+
+Paywall.defaultProps = {
+  isPublic: false,
+  isIapEnabled: false,
+  contentInterpolation: {}
+}
+
+export default withPaywallLocales(Paywall)