Compare commits
4 Commits
master
...
feature/di
| Author | SHA1 | Date | |
|---|---|---|---|
| 9996993d32 | |||
| fe14c0af88 | |||
| 4e816bd379 | |||
| 20e17c45a2 |
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "{{planName}} planı ilə daha çox şey edin",
|
||||
"StartupTitle": "Pulsuz {{planName}} planından istifadə edirsiniz",
|
||||
"StripeCustomerPortal": "Stripe müştəri portalına keçin",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/ay</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/ay</2>",
|
||||
"UpgradeNow": "İndi yeniləyin",
|
||||
"UpgradePlan": "Planı yeniləyin",
|
||||
"UpgradePlanInfo": "Yeni istifadəçilərin əlavə edilməsi cari qiymət planınızın icazə verdiyi otaq üzvlərinin maksimum sayını keçəcək.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Правете повече с плана {{planName}}",
|
||||
"StartupTitle": "Използвате безплатен план {{planName}}",
|
||||
"StripeCustomerPortal": "отидете на Stripe портала за клиенти",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/месец</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/месец</2>",
|
||||
"UpgradeNow": "Надстройте сега",
|
||||
"UpgradePlan": "Надграждане на абонамента",
|
||||
"UpgradePlanInfo": "Добавянето на нови потребители ще надвиши максималния брой членове на стаята, достъпен за текущия Ви абонаментен план.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Udělejte více díky tarifu {{planName}}",
|
||||
"StartupTitle": "Používáte bezplatný tarif {{planName}}",
|
||||
"StripeCustomerPortal": "přejít na zákaznický portál společnosti Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/měsíc</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/měsíc</2>",
|
||||
"UpgradeNow": "Aktualizovat nyní",
|
||||
"UpgradePlan": "Plán aktualizace",
|
||||
"UpgradePlanInfo": "Přidáním nových uživatelů překročíte maximální počet členů místnosti povolený vaším aktuálním cenovým tarifem.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Mehr Möglichkeiten mit {{planName}} Plan",
|
||||
"StartupTitle": "Sie verwenden einen kostenlosen {{planName}}-Plan",
|
||||
"StripeCustomerPortal": "gehen Sie zum Stripe-Kundenportal",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/Monat</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/Monat</2>",
|
||||
"UpgradeNow": "Jetzt upgraden",
|
||||
"UpgradePlan": "Plan upgraden",
|
||||
"UpgradePlanInfo": "Das Hinzufügen neuer Benutzer überschreitet die maximale Anzahl von Raummitgliedern, die Ihr aktueller Preisplan zulässt.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Κάντε περισσότερα με το πρόγραμμα {{planName}}",
|
||||
"StartupTitle": "Χρησιμοποιείτε το δωρεάν πρόγραμμα {{planName}}",
|
||||
"StripeCustomerPortal": "μεταβείτε στην πύλη πελατών της Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/μήνα</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/μήνα</2>",
|
||||
"UpgradeNow": "Αναβάθμιση τώρα",
|
||||
"UpgradePlan": "Αναβάθμιση προγράμματος",
|
||||
"UpgradePlanInfo": "Η προσθήκη νέων χρηστών θα υπερβεί τον μέγιστο αριθμό μελών δωματίου που επιτρέπεται από το τρέχον τιμολογιακό σας πρόγραμμα.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Do more with {{planName}} plan",
|
||||
"StartupTitle": "You are using free {{planName}} plan",
|
||||
"StripeCustomerPortal": "go to the Stripe customer portal",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/month</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/month</2>",
|
||||
"UpgradeNow": "Upgrade now",
|
||||
"UpgradePlan": "Upgrade plan",
|
||||
"UpgradePlanInfo": "By adding new users you will exceed the maximum number of room members allowed by your current pricing plan.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Puede hacer más con el plan {{planName}}",
|
||||
"StartupTitle": "Está utilizando el plan gratuito {{planName}}",
|
||||
"StripeCustomerPortal": "vaya al portal de cliente de Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/mes</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/mes</2>",
|
||||
"UpgradeNow": "Actualizar ahora",
|
||||
"UpgradePlan": "Actualizar plan",
|
||||
"UpgradePlanInfo": "La adición de nuevos usuarios excederá el número máximo de miembros de la sala permitidos por su plan de precios actual.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Tee enemmän {{planName}} ohjelmalla",
|
||||
"StartupTitle": "Käytät ilmaista {{planName}}-ohjelmaa",
|
||||
"StripeCustomerPortal": "Mene Stripe-asiakasportaaliin",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/kuukausi</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/kuukausi</2>",
|
||||
"UpgradeNow": "Päivitä nyt",
|
||||
"UpgradePlan": "Päivitä ohjelma",
|
||||
"UpgradePlanInfo": "Uusien käyttäjien lisääminen ylittää huoneen jäsenien maksimimäärän, jonka tämänhetkinen hinnoitteluohjelma sallii.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Faites plus avec le plan tarifaire {{planName}}",
|
||||
"StartupTitle": "Vous utilisez le plan gratuit {{planName}}",
|
||||
"StripeCustomerPortal": "aller sur le portail client Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/mois</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/mois</2>",
|
||||
"UpgradeNow": "Mettre à jour maintenant",
|
||||
"UpgradePlan": "Mettre à jour le plan tarifaire",
|
||||
"UpgradePlanInfo": "L’ajout de nouveaux utilisateurs dépassera le nombre maximum de membres de la salle autorisé par votre plan tarifaire actuel.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Կատարեք ավելին {{planName}} պլանի հետ",
|
||||
"StartupTitle": "Դուք օգտագործում եք անվճար {{planName}} պլանը",
|
||||
"StripeCustomerPortal": "գնալ Stripe հաճախորդների պորտալ",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/ամիս</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/ամիս</2>",
|
||||
"UpgradeNow": "Թարմացնել հիմա",
|
||||
"UpgradePlan": "Թարմացման պլան",
|
||||
"UpgradePlanInfo": "Նոր օգտվողների ավելացումը կգերազանցի սենյակի անդամների առավելագույն թիվը, որը թույլատրվում է ձեր ընթացիկ գնային պլանով:",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Fai di più con il piano {{planName}}",
|
||||
"StartupTitle": "Stai utilizzando il piano {{planName}} gratuito",
|
||||
"StripeCustomerPortal": "vai al portale clienti Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/mese</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/mese</2>",
|
||||
"UpgradeNow": "Aggiorna ora",
|
||||
"UpgradePlan": "Aggiorna il piano",
|
||||
"UpgradePlanInfo": "Aggiungendo nuovi utenti supererai il numero massimo di membri della stanza consentito dal tuo attuale piano tariffario.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "{{planName}}プランに切り替えて、DocSpaceをもっと便利に活用",
|
||||
"StartupTitle": "無料の {{planName}}プランをご利用いただいています。",
|
||||
"StripeCustomerPortal": "Stripeカスタマーポータルにアクセスする",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/月</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/月</2>",
|
||||
"UpgradeNow": "今すぐアップグレードする",
|
||||
"UpgradePlan": "プランのアップグレード",
|
||||
"UpgradePlanInfo": "新しいユーザーを追加すると、現在の料金プランで許可されているルームメンバーの最大数を超えます。",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "{{planName}} 요금제로 더 많은 기능을 이용하세요",
|
||||
"StartupTitle": "무료 {{planName}} 요금제를 사용 중입니다",
|
||||
"StripeCustomerPortal": "Stripe 고객 포털로 이동",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/월</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/월</2>",
|
||||
"UpgradeNow": "지금 업그레이드",
|
||||
"UpgradePlan": "요금제 업그레이드",
|
||||
"UpgradePlanInfo": "새 사용자를 추가하면 현재 요금제에서 허용하는 최대 방 회원 수를 초과하게 됩니다.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "ເຮັດໄດ້ຫຼາຍຂຶ້ນກັບແຜນ {{ planName }}",
|
||||
"StartupTitle": "ທ່ານກຳລັງໃຊ້ແພັກເກດ {{ planName }} ຟຣີ",
|
||||
"StripeCustomerPortal": "ໄປທີ່ແຜງບໍລິການລູກຄ້າ Stripe",
|
||||
"TotalPricePerMonth": "<1>{{ currencySymbol }}</1><2>{{price}}</2><3>/ເດືອນ</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/ເດືອນ</2>",
|
||||
"UpgradeNow": "ອັບເກຣດດຽວນີ້",
|
||||
"UpgradePlan": "ແຜນການຍົກລະດັບ",
|
||||
"UpgradePlanInfo": "ການເພີ່ມຜູ້ໃຊ້ໃໝ່ຈະເກີນຈຳນວນສູງສຸດຂອງສະມາຊິກຫ້ອງທີ່ອະນຸຍາດໂດຍແຜນລາຄາປັດຈຸບັນຂອງທ່ານ.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Paveiciet vairāk ar {{planName}} plānu",
|
||||
"StartupTitle": "Jūs izmantojat bezmaksas {{planName}} plānu",
|
||||
"StripeCustomerPortal": "doties uz Stripe klientu portālu",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/mēnesī</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/mēnesī</2>",
|
||||
"UpgradeNow": "Atjaunot tagad",
|
||||
"UpgradePlan": "Jaunināt plānu",
|
||||
"UpgradePlanInfo": "Pievienojot jaunus lietotājus, jūs pārsniegsiet jūsu pašreizējo cenu noteikšanas plānā atļauto maksimālo telpas dalībnieku skaitu.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Doe meer met {{planName}} plan",
|
||||
"StartupTitle": "U gebruikt het gratis {{planName}} plan",
|
||||
"StripeCustomerPortal": "ga naar het Stripe klantenportaal",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/maand</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/maand</2>",
|
||||
"UpgradeNow": "Upgrade nu",
|
||||
"UpgradePlan": "Upgrade plan",
|
||||
"UpgradePlanInfo": "Nieuwe gebruikers toevoegen betekent dat het maximum aantal leden van de kamer dat in uw huidige tariefplan is toegestaan, wordt overschreden.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Osiągnij więcej z planem {{planName}}",
|
||||
"StartupTitle": "Korzystasz z darmowego planu {{planName}}",
|
||||
"StripeCustomerPortal": "przejdź do portalu klienta Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/miesięcznie</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/miesięcznie</2>",
|
||||
"UpgradeNow": "Uaktualnij teraz",
|
||||
"UpgradePlan": "Uaktualnij plan",
|
||||
"UpgradePlanInfo": "Dodanie nowych użytkowników spowoduje przekroczenie maksymalnej liczby członków pokoju dozwoloną przez Twój bieżący plan cenowy.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Faça mais com o plano {{planName}}",
|
||||
"StartupTitle": "Você está usando o plano gratuito {{planName}}",
|
||||
"StripeCustomerPortal": "vá para o portal do cliente Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/mês</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/mês</2>",
|
||||
"UpgradeNow": "Atualize agora",
|
||||
"UpgradePlan": "Plano de atualização",
|
||||
"UpgradePlanInfo": "A adição de novos usuários excederá o número máximo de membros da sala permitido pelo seu plano de preços atual.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Faça mais com o plano {{planName}}",
|
||||
"StartupTitle": "Está a utilizar o plano gratuito {{planName}}",
|
||||
"StripeCustomerPortal": "vá para o portal do cliente Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/mês </3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/mês </2>",
|
||||
"UpgradeNow": "Aumentar agora",
|
||||
"UpgradePlan": "Aumentar o plano",
|
||||
"UpgradePlanInfo": "Adicionar novos utilizadores vai exceder o número máximo de membros presentes na sala permitido pelo seu plano de preços.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Faceţi mai mult cu abonamentul {{planName}}",
|
||||
"StartupTitle": "Utilizaţi abonamentul gratuit {{planName}}",
|
||||
"StripeCustomerPortal": "salt la portalul de client Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/lună</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/lună</2>",
|
||||
"UpgradeNow": "Upgrade acum",
|
||||
"UpgradePlan": "Actualizare abonament",
|
||||
"UpgradePlanInfo": "Dacă adăugaţi noi utilizatori, va depăşi numărul maxim permis de vizitatori într-o sală conform planului tarifar al abonamentului dvs.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Делайте больше с помощью {{planName}} тарифа",
|
||||
"StartupTitle": "Вы используете бесплатный {{planName}} тариф",
|
||||
"StripeCustomerPortal": "перейти на клиентский портал Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/месяц</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/месяц</2>",
|
||||
"UpgradeNow": "Обновить прямо сейчас",
|
||||
"UpgradePlan": "Обновить план",
|
||||
"UpgradePlanInfo": "Добавление новых пользователей приведет к превышению максимального количества участников комнаты, разрешенного вашим текущим тарифным планом.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Urobte viac s plánom {{planName}}",
|
||||
"StartupTitle": "Používate bezplatný plán {{planName}}",
|
||||
"StripeCustomerPortal": "prejdite na zákaznícky portál Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/mesiac</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/mesiac</2>",
|
||||
"UpgradeNow": "Aktualizovať teraz",
|
||||
"UpgradePlan": "Aktualizovať plán",
|
||||
"UpgradePlanInfo": "Pridaním nových používateľov prekročíte maximálny počet členov v miestnosti povolený vaším aktuálnym cenovým plánom.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Naredite več z paketom {{planName}}",
|
||||
"StartupTitle": "Uporabljate brezplačen paket {{planName}}",
|
||||
"StripeCustomerPortal": "pojdite na portal za stranke Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/mesec</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/mesec</2>",
|
||||
"UpgradeNow": "Nadgradi zdaj",
|
||||
"UpgradePlan": "Načrt nadgradnje",
|
||||
"UpgradePlanInfo": "Dodajanje novih uporabnikov bo preseglo največje število članov sobe, ki jih omogoča vaš trenutni naročniški paket.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "{{planName}} planıyla daha fazlasını yapın",
|
||||
"StartupTitle": "Ücretsiz {{planName}} planı kullanıyorsunuz",
|
||||
"StripeCustomerPortal": "Stripe müşteri portalına gidin",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/ay</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/ay</2>",
|
||||
"UpgradeNow": "Şimdi Yükselt",
|
||||
"UpgradePlan": "Yükseltme planı",
|
||||
"UpgradePlanInfo": "Yeni kullanıcılar eklemek, mevcut fiyatlandırma planınızın izin verdiği maksimum oda üyesi sayısını aşacaktır.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Робіть більше з планом {{planName}}",
|
||||
"StartupTitle": "Ви використовуєте безкоштовний план {{planName}}",
|
||||
"StripeCustomerPortal": "перейти на портал клієнтів Stripe",
|
||||
"TotalPricePerMonth": "<2>{{price}}</2><1>{{currencySymbol}}</1><3> на місяць</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2> на місяць</2>",
|
||||
"UpgradeNow": "Підвищити зараз",
|
||||
"UpgradePlan": "Підвищити план",
|
||||
"UpgradePlanInfo": "У разі додавання нових користувачів буде перевищено максимальну кількість учасників кімнати, дозволену вашим поточним тарифним планом.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "Làm nhiều hơn với gói dịch vụ {{planName}}",
|
||||
"StartupTitle": "Bạn đang sử dụng gói dịch vụ {{planName}} miễn phí",
|
||||
"StripeCustomerPortal": "truy cập cổng thông tin khách hàng trên Stripe",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}} </1><2>{{price}} </2><3>/tháng</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/tháng</2>",
|
||||
"UpgradeNow": "Nâng cấp ngay",
|
||||
"UpgradePlan": "Nâng cấp gói dịch vụ",
|
||||
"UpgradePlanInfo": "Việc thêm người dùng mới sẽ vượt quá số lượng thành viên tối đa được phép trong phòng theo gói dịch vụ hiện tại của bạn.",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"StartupSuggestion": "升级为{{planName}}版获得更多权限",
|
||||
"StartupTitle": "您正在使用免费{{planName}}版本",
|
||||
"StripeCustomerPortal": "前往 Stripe 客户门户",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/月</3>",
|
||||
"TotalPricePerMonth": "<1>{{price}}</1><2>/月</2>",
|
||||
"UpgradeNow": "立即升级",
|
||||
"UpgradePlan": "升级版本",
|
||||
"UpgradePlanInfo": "新用户添加后将超出您当前版本允许的最大房间数或成员数限制。",
|
||||
|
||||
@ -1,47 +1,13 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { smallTablet } from "@docspace/components/utils/device";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
border-radius: 12px;
|
||||
border: ${(props) => props.theme.client.settings.payment.border};
|
||||
max-width: 320px;
|
||||
import { StyledBenefits } from "./StyledComponent";
|
||||
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background: ${(props) =>
|
||||
props.theme.client.settings.payment.backgroundBenefitsColor};
|
||||
|
||||
p {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.payment-benefits_text {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.payment-benefits {
|
||||
margin-bottom: 14px;
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr;
|
||||
grid-gap: 10px;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
svg {
|
||||
path {
|
||||
fill: ${(props) =>
|
||||
props.theme.client.settings.payment.benefitsContainer
|
||||
.iconsColor} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const BenefitsContainer = ({ t, features, theme }) => {
|
||||
const BenefitsContainer = ({ t, features }) => {
|
||||
return (
|
||||
<StyledBody className="benefits-container">
|
||||
<StyledBenefits className="benefits-container">
|
||||
<Text
|
||||
fontSize={"16px"}
|
||||
fontWeight={"600"}
|
||||
@ -59,17 +25,16 @@ const BenefitsContainer = ({ t, features, theme }) => {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StyledBody>
|
||||
</StyledBenefits>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { paymentQuotasStore, settingsStore } = auth;
|
||||
const { theme } = settingsStore;
|
||||
const { paymentQuotasStore } = auth;
|
||||
|
||||
const { portalPaymentQuotasFeatures } = paymentQuotasStore;
|
||||
|
||||
return {
|
||||
theme,
|
||||
features: portalPaymentQuotasFeatures,
|
||||
};
|
||||
})(observer(BenefitsContainer));
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
|
||||
import Text from "@docspace/components/text";
|
||||
|
||||
const StyledContactContainer = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
a {
|
||||
margin-left: 4px;
|
||||
}
|
||||
`;
|
||||
import { StyledContactContainer } from "./StyledComponent";
|
||||
|
||||
const ContactContainer = ({ t, salesEmail }) => {
|
||||
return (
|
||||
|
||||
@ -1,43 +1,12 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { PortalFeaturesLimitations } from "@docspace/common/constants";
|
||||
import { getConvertedSize } from "@docspace/common/utils";
|
||||
import { mobile } from "@docspace/components/utils/device";
|
||||
|
||||
const StyledCurrentTariffContainer = styled.div`
|
||||
display: flex;
|
||||
min-height: 40px;
|
||||
background: ${(props) => props.theme.client.settings.payment.backgroundColor};
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 14px;
|
||||
padding: 12px 16px;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0;
|
||||
border-radius: 6px;
|
||||
|
||||
@media ${mobile} {
|
||||
flex-direction: column;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
div {
|
||||
padding-bottom: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
color: ${(props) => props.theme.client.settings.payment.tariffText};
|
||||
.current-tariff_count {
|
||||
color: ${(props) => props.theme.client.settings.payment.tariffText};
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
import { StyledCurrentTariffContainer } from "./StyledComponent";
|
||||
|
||||
const CurrentTariffContainer = ({ style, quotaCharacteristics }) => {
|
||||
const { t } = useTranslation(["Payments", "Common"]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import HelpReactSvgUrl from "PUBLIC_DIR/images/help.react.svg?url";
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import { useTranslation, Trans } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
@ -8,48 +8,7 @@ import { HelpButton, Link } from "@docspace/components";
|
||||
import Avatar from "@docspace/components/avatar";
|
||||
import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
|
||||
import DefaultUserPhoto from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
background: ${(props) => props.theme.client.settings.payment.backgroundColor};
|
||||
min-height: 72px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 16px;
|
||||
border-radius: 6px;
|
||||
|
||||
.payer-info {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.payer-info_avatar {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.payer-info {
|
||||
margin-right: 3px;
|
||||
}
|
||||
.payer-info_wrapper {
|
||||
height: max-content;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: max-content max-content;
|
||||
grid-gap: 4px;
|
||||
|
||||
.payer-info_description {
|
||||
p {
|
||||
margin-right: 3px;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
margin: auto 0;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
.payer-info_account-link {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
`;
|
||||
import { StyledPayerInformation } from "./StyledComponent";
|
||||
|
||||
const PayerInformationContainer = ({
|
||||
style,
|
||||
@ -177,7 +136,7 @@ const PayerInformationContainer = ({
|
||||
: {};
|
||||
|
||||
return (
|
||||
<StyledContainer style={style} theme={theme}>
|
||||
<StyledPayerInformation style={style}>
|
||||
<div className="payer-info_avatar">
|
||||
<Avatar
|
||||
size={"base"}
|
||||
@ -200,7 +159,7 @@ const PayerInformationContainer = ({
|
||||
|
||||
{!payerInfo ? unknownPayerInformation : payerInformation}
|
||||
</div>
|
||||
</StyledContainer>
|
||||
</StyledPayerInformation>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import { Trans } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import { size, desktop } from "@docspace/components/utils/device";
|
||||
import { size } from "@docspace/components/utils/device";
|
||||
import { Consumer } from "@docspace/components/utils/context";
|
||||
import { HelpButton } from "@docspace/components";
|
||||
|
||||
@ -14,71 +14,7 @@ import PriceCalculation from "./PriceCalculation";
|
||||
import BenefitsContainer from "./BenefitsContainer";
|
||||
import ContactContainer from "./ContactContainer";
|
||||
import PayerInformationContainer from "./PayerInformationContainer";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
max-width: 660px;
|
||||
|
||||
.payment-info_suggestion,
|
||||
.payment-info_grace-period {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.payment-info {
|
||||
margin-top: 18px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(100px, 320px));
|
||||
grid-gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media (max-width: ${size.smallTablet + 40}px) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
grid-template-rows: ${(props) => "1fr max-content"};
|
||||
|
||||
.price-calculation-container,
|
||||
.benefits-container {
|
||||
max-width: 600px;
|
||||
}
|
||||
.select-users-count-container {
|
||||
max-width: 520px;
|
||||
}
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.isChangeView &&
|
||||
css`
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: ${(props) => "1fr max-content"};
|
||||
|
||||
.price-calculation-container,
|
||||
.benefits-container {
|
||||
-webkit-transition: all 0.8s ease;
|
||||
transition: all 0.4s ease;
|
||||
max-width: 600px;
|
||||
}
|
||||
.select-users-count-container {
|
||||
-webkit-transition: all 0.8s ease;
|
||||
transition: all 0.4s ease;
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
@media ${desktop} {
|
||||
grid-template-columns: repeat(2, minmax(100px, 320px));
|
||||
}
|
||||
`}
|
||||
}
|
||||
.payment-info_wrapper {
|
||||
display: flex;
|
||||
|
||||
margin-top: 11px;
|
||||
div {
|
||||
margin: auto 0;
|
||||
}
|
||||
.payment-info_managers-price {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
import { StyledPaymentContainer } from "./StyledComponent";
|
||||
|
||||
const PaymentContainer = (props) => {
|
||||
const {
|
||||
@ -273,8 +209,7 @@ const PaymentContainer = (props) => {
|
||||
return (
|
||||
<Consumer>
|
||||
{(context) => (
|
||||
<StyledBody
|
||||
theme={theme}
|
||||
<StyledPaymentContainer
|
||||
isChangeView={
|
||||
context.sectionWidth < size.smallTablet && expandArticle
|
||||
}
|
||||
@ -326,7 +261,7 @@ const PaymentContainer = (props) => {
|
||||
<BenefitsContainer t={t} />
|
||||
</div>
|
||||
<ContactContainer t={t} />
|
||||
</StyledBody>
|
||||
</StyledPaymentContainer>
|
||||
)}
|
||||
</Consumer>
|
||||
);
|
||||
|
||||
@ -1,65 +1,25 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import Text from "@docspace/components/text";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import SelectUsersCountContainer from "./sub-components/SelectUsersCountContainer";
|
||||
import TotalTariffContainer from "./sub-components/TotalTariffContainer";
|
||||
import ButtonContainer from "./sub-components/ButtonContainer";
|
||||
import { Trans } from "react-i18next";
|
||||
|
||||
import CurrentUsersCountContainer from "./sub-components/CurrentUsersCount";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
border-radius: 12px;
|
||||
border: ${(props) =>
|
||||
props.theme.client.settings.payment.priceContainer.border};
|
||||
background: ${(props) =>
|
||||
props.theme.client.settings.payment.priceContainer.background};
|
||||
max-width: 320px;
|
||||
|
||||
padding: 23px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.payment_main-title {
|
||||
margin-bottom: 24px;
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
color: ${props.theme.client.settings.payment.priceContainer
|
||||
.disableColor};
|
||||
`}
|
||||
}
|
||||
.payment_price_user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: ${(props) =>
|
||||
props.theme.client.settings.payment.priceContainer.backgroundText};
|
||||
margin-top: 24px;
|
||||
min-height: 38px;
|
||||
border-radius: 6px;
|
||||
|
||||
p {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
import PricePerUser from "./sub-components/PricePerUser";
|
||||
import { StyledPriceCalculation } from "./StyledComponent";
|
||||
|
||||
let timeout = null,
|
||||
controller;
|
||||
const PriceCalculation = ({
|
||||
t,
|
||||
theme,
|
||||
|
||||
setIsLoading,
|
||||
maxAvailableManagersCount,
|
||||
canUpdateTariff,
|
||||
isGracePeriod,
|
||||
isNotPaidPeriod,
|
||||
|
||||
priceManagerPerMonth,
|
||||
currencySymbol,
|
||||
isAlreadyPaid,
|
||||
isFreeAfterPaidPeriod,
|
||||
managersCount,
|
||||
@ -101,46 +61,11 @@ const PriceCalculation = ({
|
||||
|
||||
const isDisabled = !canUpdateTariff;
|
||||
|
||||
const priceInfoPerManager = (
|
||||
<div className="payment_price_user">
|
||||
<Text
|
||||
noSelect
|
||||
fontSize={"13px"}
|
||||
color={
|
||||
isDisabled
|
||||
? theme.client.settings.payment.priceContainer.disablePriceColor
|
||||
: theme.client.settings.payment.priceColor
|
||||
}
|
||||
fontWeight={600}
|
||||
>
|
||||
<Trans t={t} i18nKey="PerUserMonth" ns="Common">
|
||||
""
|
||||
<Text
|
||||
fontSize="16px"
|
||||
isBold
|
||||
as="span"
|
||||
fontWeight={600}
|
||||
color={
|
||||
isDisabled
|
||||
? theme.client.settings.payment.priceContainer.disablePriceColor
|
||||
: theme.client.settings.payment.priceColor
|
||||
}
|
||||
>
|
||||
{{ currencySymbol }}
|
||||
</Text>
|
||||
<Text fontSize="16px" isBold as="span" fontWeight={600}>
|
||||
{{ price: priceManagerPerMonth }}
|
||||
</Text>
|
||||
per manager/month
|
||||
</Trans>
|
||||
</Text>
|
||||
</div>
|
||||
);
|
||||
|
||||
const isNeedPlusSign = managersCount > maxAvailableManagersCount;
|
||||
|
||||
return (
|
||||
<StyledBody className="price-calculation-container" isDisabled={isDisabled}>
|
||||
<StyledPriceCalculation
|
||||
className="price-calculation-container"
|
||||
isDisabled={isDisabled}
|
||||
>
|
||||
<Text
|
||||
fontSize="16px"
|
||||
fontWeight={600}
|
||||
@ -152,19 +77,12 @@ const PriceCalculation = ({
|
||||
: t("PriceCalculation")}
|
||||
</Text>
|
||||
{isGracePeriod || isNotPaidPeriod || isFreeAfterPaidPeriod ? (
|
||||
<CurrentUsersCountContainer
|
||||
isNeedPlusSign={isNeedPlusSign}
|
||||
t={t}
|
||||
isDisabled={isDisabled}
|
||||
/>
|
||||
<CurrentUsersCountContainer t={t} isDisabled={isDisabled} />
|
||||
) : (
|
||||
<SelectUsersCountContainer
|
||||
isNeedPlusSign={isNeedPlusSign}
|
||||
isDisabled={isDisabled}
|
||||
/>
|
||||
<SelectUsersCountContainer isDisabled={isDisabled} />
|
||||
)}
|
||||
|
||||
{priceInfoPerManager}
|
||||
<PricePerUser t={t} isDisabled={isDisabled} />
|
||||
|
||||
<TotalTariffContainer t={t} isDisabled={isDisabled} />
|
||||
<ButtonContainer
|
||||
@ -172,7 +90,7 @@ const PriceCalculation = ({
|
||||
t={t}
|
||||
isFreeAfterPaidPeriod={isFreeAfterPaidPeriod}
|
||||
/>
|
||||
</StyledBody>
|
||||
</StyledPriceCalculation>
|
||||
);
|
||||
};
|
||||
|
||||
@ -188,14 +106,8 @@ export default inject(({ auth, payments }) => {
|
||||
getPaymentLink,
|
||||
canUpdateTariff,
|
||||
} = payments;
|
||||
const { theme } = auth.settingsStore;
|
||||
const {
|
||||
currentTariffStatusStore,
|
||||
const { currentTariffStatusStore } = auth;
|
||||
|
||||
paymentQuotasStore,
|
||||
} = auth;
|
||||
|
||||
const { planCost } = paymentQuotasStore;
|
||||
const { isNotPaidPeriod, isGracePeriod } = currentTariffStatusStore;
|
||||
|
||||
return {
|
||||
@ -205,15 +117,13 @@ export default inject(({ auth, payments }) => {
|
||||
|
||||
setManagersCount,
|
||||
tariffsInfo,
|
||||
theme,
|
||||
|
||||
setIsLoading,
|
||||
maxAvailableManagersCount,
|
||||
|
||||
isGracePeriod,
|
||||
isNotPaidPeriod,
|
||||
|
||||
priceManagerPerMonth: planCost.value,
|
||||
currencySymbol: planCost.currencySymbol,
|
||||
getPaymentLink,
|
||||
};
|
||||
})(observer(PriceCalculation));
|
||||
|
||||
@ -0,0 +1,455 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import {
|
||||
mobile,
|
||||
smallTablet,
|
||||
size,
|
||||
desktop,
|
||||
} from "@docspace/components/utils/device";
|
||||
|
||||
const StyledPriceCalculation = styled.div`
|
||||
border-radius: 12px;
|
||||
border: ${(props) =>
|
||||
props.theme.client.settings.payment.priceContainer.border};
|
||||
background: ${(props) =>
|
||||
props.theme.client.settings.payment.priceContainer.background};
|
||||
max-width: 320px;
|
||||
|
||||
padding: 23px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.payment_main-title {
|
||||
margin-bottom: 24px;
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
color: ${props.theme.client.settings.payment.priceContainer
|
||||
.disableColor};
|
||||
`}
|
||||
}
|
||||
.payment_price_user {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
background: ${(props) =>
|
||||
props.theme.client.settings.payment.priceContainer.backgroundText};
|
||||
margin-top: 24px;
|
||||
min-height: 38px;
|
||||
border-radius: 6px;
|
||||
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
/* padding-left: 16px;
|
||||
padding-right: 16px; */
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.payment_user-price {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.payment_discount-price {
|
||||
text-decoration: line-through;
|
||||
margin-right: 5px;
|
||||
color: ${(props) =>
|
||||
props.theme.client.settings.payment.contactContainer.textColor};
|
||||
}
|
||||
|
||||
.payment_per-user {
|
||||
color: ${(props) =>
|
||||
props.isDisabled
|
||||
? props.theme.client.settings.payment.priceContainer.disablePriceColor
|
||||
: props.theme.client.settings.payment.priceColor};
|
||||
}
|
||||
}
|
||||
`;
|
||||
const StyledPayerInformation = styled.div`
|
||||
display: flex;
|
||||
background: ${(props) => props.theme.client.settings.payment.backgroundColor};
|
||||
min-height: 72px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 16px;
|
||||
border-radius: 6px;
|
||||
|
||||
.payer-info {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.payer-info_avatar {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.payer-info {
|
||||
margin-right: 3px;
|
||||
}
|
||||
.payer-info_wrapper {
|
||||
height: max-content;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: max-content max-content;
|
||||
grid-gap: 4px;
|
||||
|
||||
.payer-info_description {
|
||||
p {
|
||||
margin-right: 3px;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
margin: auto 0;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
.payer-info_account-link {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledCurrentTariffContainer = styled.div`
|
||||
display: flex;
|
||||
min-height: 40px;
|
||||
background: ${(props) => props.theme.client.settings.payment.backgroundColor};
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 14px;
|
||||
padding: 12px 16px;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0;
|
||||
border-radius: 6px;
|
||||
|
||||
@media ${mobile} {
|
||||
flex-direction: column;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
div {
|
||||
padding-bottom: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
color: ${(props) => props.theme.client.settings.payment.tariffText};
|
||||
.current-tariff_count {
|
||||
color: ${(props) => props.theme.client.settings.payment.tariffText};
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContactContainer = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
a {
|
||||
margin-left: 4px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledBenefits = styled.div`
|
||||
border-radius: 12px;
|
||||
border: ${(props) => props.theme.client.settings.payment.border};
|
||||
max-width: 320px;
|
||||
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background: ${(props) =>
|
||||
props.theme.client.settings.payment.backgroundBenefitsColor};
|
||||
|
||||
p {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.payment-benefits_text {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.payment-benefits {
|
||||
margin-bottom: 14px;
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr;
|
||||
grid-gap: 10px;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
svg {
|
||||
path {
|
||||
fill: ${(props) =>
|
||||
props.theme.client.settings.payment.benefitsContainer
|
||||
.iconsColor} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTotalTariff = styled.div`
|
||||
max-width: 272px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media ${smallTablet} {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.payment_price_total-price {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
min-height: 65px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.payment_price_price-text {
|
||||
line-height: 1;
|
||||
margin: auto 0;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.payment_price_description,
|
||||
.payment_price_price-text,
|
||||
.total-tariff_description {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.payment_price_description {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.total-tariff_description {
|
||||
margin: auto;
|
||||
}
|
||||
.payment_price_month-text {
|
||||
margin: auto 0;
|
||||
margin-bottom: 0px;
|
||||
margin-left: 8px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.payment_price_month-text,
|
||||
.payment_price_price-text {
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
color: ${props.theme.client.settings.payment.priceContainer
|
||||
.disableColor};
|
||||
`};
|
||||
}
|
||||
|
||||
.payment_discount-price {
|
||||
text-decoration: line-through;
|
||||
margin: auto 8px 0 0;
|
||||
padding-bottom: 4px;
|
||||
color: ${(props) =>
|
||||
props.theme.client.settings.payment.contactContainer.textColor};
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSelectUsers = styled.div`
|
||||
max-width: 272px;
|
||||
margin: 0 auto;
|
||||
|
||||
.payment-slider {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-top: -8px;
|
||||
margin-left: -3px;
|
||||
height: 16px;
|
||||
|
||||
.slider-track-value_min,
|
||||
.slider-track-value_max {
|
||||
color: ${(props) =>
|
||||
props.theme.client.settings.payment.priceContainer.trackNumberColor};
|
||||
}
|
||||
|
||||
.slider-track-value_max {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.slider-track-value_min {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-operations_input {
|
||||
width: 101px;
|
||||
height: 60px;
|
||||
font-size: 44px;
|
||||
text-align: center;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
padding: 0;
|
||||
font-weight: 700;
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
color: ${props.theme.client.settings.payment.priceContainer
|
||||
.disableColor};
|
||||
`};
|
||||
}
|
||||
|
||||
.payment-users {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: max-content;
|
||||
.payment-score {
|
||||
path {
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
fill: ${props.theme.text.disableColor};
|
||||
`}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-score,
|
||||
.circle {
|
||||
cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
|
||||
}
|
||||
.circle {
|
||||
position: relative;
|
||||
background: ${(props) =>
|
||||
props.theme.client.settings.payment.rectangleColor};
|
||||
border: 1px solid
|
||||
${(props) => props.theme.client.settings.payment.rectangleColor};
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
path {
|
||||
fill: ${(props) =>
|
||||
props.isDisabled
|
||||
? props.theme.client.settings.payment.priceContainer.disableColor
|
||||
: props.theme.text.color};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minus-icon {
|
||||
svg {
|
||||
top: 44%;
|
||||
left: 28%;
|
||||
}
|
||||
}
|
||||
.plus-icon {
|
||||
svg {
|
||||
top: 30%;
|
||||
left: 27%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.payment-users_count {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
width: 102px;
|
||||
}
|
||||
|
||||
.payment-users_text {
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
color: ${props.theme.client.settings.payment.priceContainer
|
||||
.disableColor};
|
||||
`}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledCurrentUsersContainer = styled.div`
|
||||
height: fit-content;
|
||||
.current-admins-number {
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
color: ${props.theme.client.settings.payment.priceContainer
|
||||
.disableColor};
|
||||
`}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledPaymentContainer = styled.div`
|
||||
max-width: 660px;
|
||||
|
||||
.payment-info_suggestion,
|
||||
.payment-info_grace-period {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.payment-info {
|
||||
margin-top: 18px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(100px, 320px));
|
||||
grid-gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media (max-width: ${size.smallTablet + 40}px) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
grid-template-rows: ${(props) => "1fr max-content"};
|
||||
|
||||
.price-calculation-container,
|
||||
.benefits-container {
|
||||
max-width: 600px;
|
||||
}
|
||||
.select-users-count-container {
|
||||
max-width: 520px;
|
||||
}
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.isChangeView &&
|
||||
css`
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: ${(props) => "1fr max-content"};
|
||||
|
||||
.price-calculation-container,
|
||||
.benefits-container {
|
||||
-webkit-transition: all 0.8s ease;
|
||||
transition: all 0.4s ease;
|
||||
max-width: 600px;
|
||||
}
|
||||
.select-users-count-container {
|
||||
-webkit-transition: all 0.8s ease;
|
||||
transition: all 0.4s ease;
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
@media ${desktop} {
|
||||
grid-template-columns: repeat(2, minmax(100px, 320px));
|
||||
}
|
||||
`}
|
||||
}
|
||||
.payment-info_wrapper {
|
||||
display: flex;
|
||||
|
||||
margin-top: 11px;
|
||||
div {
|
||||
margin: auto 0;
|
||||
}
|
||||
.payment-info_managers-price {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export {
|
||||
StyledPriceCalculation,
|
||||
StyledPayerInformation,
|
||||
StyledCurrentTariffContainer,
|
||||
StyledContactContainer,
|
||||
StyledBenefits,
|
||||
StyledTotalTariff,
|
||||
StyledSelectUsers,
|
||||
StyledCurrentUsersContainer,
|
||||
StyledPaymentContainer,
|
||||
};
|
||||
@ -1,32 +1,17 @@
|
||||
import Text from "@docspace/components/text";
|
||||
import React from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import SelectTotalSizeContainer from "./SelectTotalSizeContainer";
|
||||
|
||||
const StyledCurrentUsersContainer = styled.div`
|
||||
height: fit-content;
|
||||
.current-admins-number {
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
color: ${props.theme.client.settings.payment.priceContainer
|
||||
.disableColor};
|
||||
`}
|
||||
}
|
||||
`;
|
||||
import { StyledCurrentUsersContainer } from "../StyledComponent";
|
||||
|
||||
const CurrentUsersCountContainer = (props) => {
|
||||
const {
|
||||
isNeedPlusSign,
|
||||
maxCountManagersByQuota,
|
||||
t,
|
||||
isDisabled,
|
||||
theme,
|
||||
addedManagersCountTitle,
|
||||
} = props;
|
||||
return (
|
||||
<StyledCurrentUsersContainer isDisabled={isDisabled} theme={theme}>
|
||||
<StyledCurrentUsersContainer isDisabled={isDisabled}>
|
||||
<Text
|
||||
fontSize="16px"
|
||||
fontWeight={600}
|
||||
@ -44,18 +29,17 @@ const CurrentUsersCountContainer = (props) => {
|
||||
>
|
||||
{maxCountManagersByQuota}
|
||||
</Text>
|
||||
<SelectTotalSizeContainer isNeedPlusSign={isNeedPlusSign} />
|
||||
<SelectTotalSizeContainer />
|
||||
</StyledCurrentUsersContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { settingsStore, currentQuotaStore, paymentQuotasStore } = auth;
|
||||
const { currentQuotaStore, paymentQuotasStore } = auth;
|
||||
const { maxCountManagersByQuota } = currentQuotaStore;
|
||||
const { addedManagersCountTitle } = paymentQuotasStore;
|
||||
const { theme } = settingsStore;
|
||||
|
||||
return {
|
||||
theme,
|
||||
maxCountManagersByQuota,
|
||||
addedManagersCountTitle,
|
||||
};
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { Trans } from "react-i18next";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
|
||||
|
||||
const textProp = {
|
||||
fontSize: "16px",
|
||||
isBold: true,
|
||||
as: "span",
|
||||
fontWeight: 600,
|
||||
};
|
||||
const PricePerUser = ({ t, priceManagerPerMonth, currencySymbol }) => {
|
||||
const price = `${currencySymbol}${priceManagerPerMonth}`;
|
||||
const oldPrice = `${currencySymbol}${priceManagerPerMonth}`;
|
||||
|
||||
const isNewPrice = true;
|
||||
|
||||
const newPriceComponent = isNewPrice ? (
|
||||
<ColorTheme {...textProp} themeId={ThemeType.Text}>
|
||||
{{ price }}
|
||||
</ColorTheme>
|
||||
) : (
|
||||
<Text {...textProp} className="payment_per-user">
|
||||
{{ price }}
|
||||
</Text>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="payment_price_user">
|
||||
<Text noSelect fontSize={"13px"} className="payment_per-user">
|
||||
<Trans t={t} i18nKey="PerUserMonth" ns="Common">
|
||||
""
|
||||
{isNewPrice && (
|
||||
<Text
|
||||
fontSize="12px"
|
||||
as="span"
|
||||
textAlign={"center"}
|
||||
fontWeight={600}
|
||||
className="payment_discount-price"
|
||||
noSelect
|
||||
>
|
||||
{{ oldPrice }}
|
||||
</Text>
|
||||
)}
|
||||
{newPriceComponent}
|
||||
</Trans>
|
||||
</Text>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { paymentQuotasStore } = auth;
|
||||
|
||||
const { planCost } = paymentQuotasStore;
|
||||
|
||||
return {
|
||||
priceManagerPerMonth: planCost.value,
|
||||
currencySymbol: planCost.currencySymbol,
|
||||
};
|
||||
})(observer(PricePerUser));
|
||||
@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
|
||||
import Text from "@docspace/components/text";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { getConvertedSize } from "@docspace/common/utils";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
.select-total-size_title {
|
||||
margin-bottom: 8px;
|
||||
@ -21,14 +22,14 @@ const SelectTotalSizeContainer = ({
|
||||
allowedStorageSizeByQuota,
|
||||
usedTotalStorageSizeTitle,
|
||||
theme,
|
||||
isNeedPlusSign,
|
||||
isNeedRequest,
|
||||
}) => {
|
||||
const { t } = useTranslation(["Payments", "Common"]);
|
||||
|
||||
const convertedSize = getConvertedSize(t, allowedStorageSizeByQuota);
|
||||
|
||||
return (
|
||||
<StyledBody theme={theme}>
|
||||
<StyledBody>
|
||||
<Text
|
||||
textAlign={"center"}
|
||||
noSelect
|
||||
@ -37,7 +38,7 @@ const SelectTotalSizeContainer = ({
|
||||
className="select-total-size_title"
|
||||
color={theme.client.settings.payment.storageSizeTitle}
|
||||
>
|
||||
{usedTotalStorageSizeTitle}: {convertedSize} {isNeedPlusSign ? "+" : ""}
|
||||
{usedTotalStorageSizeTitle}: {convertedSize} {isNeedRequest ? "+" : ""}
|
||||
</Text>
|
||||
</StyledBody>
|
||||
);
|
||||
@ -47,10 +48,11 @@ export default inject(({ auth, payments }) => {
|
||||
const { paymentQuotasStore } = auth;
|
||||
const { usedTotalStorageSizeTitle } = paymentQuotasStore;
|
||||
const { theme } = auth.settingsStore;
|
||||
const { allowedStorageSizeByQuota } = payments;
|
||||
const { allowedStorageSizeByQuota, isNeedRequest } = payments;
|
||||
|
||||
return {
|
||||
theme,
|
||||
isNeedRequest,
|
||||
usedTotalStorageSizeTitle,
|
||||
allowedStorageSizeByQuota,
|
||||
};
|
||||
|
||||
@ -8,131 +8,10 @@ import MinusIcon from "PUBLIC_DIR/images/minus.react.svg";
|
||||
import TextInput from "@docspace/components/text-input";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import SelectTotalSizeContainer from "./SelectTotalSizeContainer";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
max-width: 272px;
|
||||
margin: 0 auto;
|
||||
|
||||
.payment-slider {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-top: -8px;
|
||||
margin-left: -3px;
|
||||
height: 16px;
|
||||
|
||||
.slider-track-value_min,
|
||||
.slider-track-value_max {
|
||||
color: ${(props) =>
|
||||
props.theme.client.settings.payment.priceContainer.trackNumberColor};
|
||||
}
|
||||
|
||||
.slider-track-value_max {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.slider-track-value_min {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-operations_input {
|
||||
width: 101px;
|
||||
height: 60px;
|
||||
font-size: 44px;
|
||||
text-align: center;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
padding: 0;
|
||||
font-weight: 700;
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
color: ${props.theme.client.settings.payment.priceContainer
|
||||
.disableColor};
|
||||
`};
|
||||
}
|
||||
|
||||
.payment-users {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: max-content;
|
||||
.payment-score {
|
||||
path {
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
fill: ${props.theme.text.disableColor};
|
||||
`}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-score,
|
||||
.circle {
|
||||
cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
|
||||
}
|
||||
.circle {
|
||||
position: relative;
|
||||
background: ${(props) =>
|
||||
props.theme.client.settings.payment.rectangleColor};
|
||||
border: 1px solid
|
||||
${(props) => props.theme.client.settings.payment.rectangleColor};
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
path {
|
||||
fill: ${(props) =>
|
||||
props.isDisabled
|
||||
? props.theme.client.settings.payment.priceContainer.disableColor
|
||||
: props.theme.text.color};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minus-icon {
|
||||
svg {
|
||||
top: 44%;
|
||||
left: 28%;
|
||||
}
|
||||
}
|
||||
.plus-icon {
|
||||
svg {
|
||||
top: 30%;
|
||||
left: 27%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.payment-users_count {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
width: 102px;
|
||||
}
|
||||
|
||||
.payment-users_text {
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
color: ${props.theme.client.settings.payment.priceContainer
|
||||
.disableColor};
|
||||
`}
|
||||
}
|
||||
`;
|
||||
import { StyledSelectUsers } from "../StyledComponent";
|
||||
|
||||
const SelectUsersCountContainer = ({
|
||||
managersCount,
|
||||
theme,
|
||||
isDisabled,
|
||||
isLoading,
|
||||
minAvailableManagersValue,
|
||||
@ -143,7 +22,7 @@ const SelectUsersCountContainer = ({
|
||||
isLessCountThanAcceptable,
|
||||
step,
|
||||
addedManagersCountTitle,
|
||||
isNeedPlusSign,
|
||||
isNeedRequest,
|
||||
}) => {
|
||||
const onSliderChange = (e) => {
|
||||
const count = parseFloat(e.target.value);
|
||||
@ -203,7 +82,7 @@ const SelectUsersCountContainer = ({
|
||||
setTotalPrice(numberValue);
|
||||
};
|
||||
|
||||
const value = isNeedPlusSign
|
||||
const value = isNeedRequest
|
||||
? maxAvailableManagersCount + "+"
|
||||
: managersCount + "";
|
||||
|
||||
@ -217,15 +96,14 @@ const SelectUsersCountContainer = ({
|
||||
isDisabled || isUpdatingTariff ? {} : { onChange: onChangeNumber };
|
||||
|
||||
return (
|
||||
<StyledBody
|
||||
<StyledSelectUsers
|
||||
className="select-users-count-container"
|
||||
theme={theme}
|
||||
isDisabled={isDisabled || isUpdatingTariff}
|
||||
>
|
||||
<Text noSelect fontWeight={600} className="payment-users_text">
|
||||
{addedManagersCountTitle}
|
||||
</Text>
|
||||
<SelectTotalSizeContainer isNeedPlusSign={isNeedPlusSign} />
|
||||
<SelectTotalSizeContainer />
|
||||
<div className="payment-users">
|
||||
<div
|
||||
className="circle minus-icon"
|
||||
@ -277,13 +155,13 @@ const SelectUsersCountContainer = ({
|
||||
{maxAvailableManagersCount + "+"}
|
||||
</Text>
|
||||
</div>
|
||||
</StyledBody>
|
||||
</StyledSelectUsers>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, payments }) => {
|
||||
const { paymentQuotasStore } = auth;
|
||||
const { theme } = auth.settingsStore;
|
||||
|
||||
const {
|
||||
isLoading,
|
||||
minAvailableManagersValue,
|
||||
@ -294,14 +172,15 @@ export default inject(({ auth, payments }) => {
|
||||
isLessCountThanAcceptable,
|
||||
stepByQuotaForManager,
|
||||
isAlreadyPaid,
|
||||
isNeedRequest,
|
||||
} = payments;
|
||||
const { addedManagersCountTitle } = paymentQuotasStore;
|
||||
|
||||
const step = stepByQuotaForManager;
|
||||
|
||||
return {
|
||||
isNeedRequest,
|
||||
isAlreadyPaid,
|
||||
theme,
|
||||
isLoading,
|
||||
minAvailableManagersValue,
|
||||
managersCount,
|
||||
|
||||
@ -0,0 +1,67 @@
|
||||
import React from "react";
|
||||
import { Trans } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
|
||||
|
||||
const textProp = {
|
||||
fontSize: "48px",
|
||||
fontWeight: "600",
|
||||
target: "_blank",
|
||||
as: "span",
|
||||
className: "payment_price_price-text",
|
||||
};
|
||||
const TotalPrice = ({ t, totalPrice, currencySymbol }) => {
|
||||
const price = `${currencySymbol}${totalPrice}`;
|
||||
const isNewPrice = true;
|
||||
|
||||
return (
|
||||
<>
|
||||
{isNewPrice && (
|
||||
<Text
|
||||
fontSize="16px"
|
||||
as="span"
|
||||
textAlign={"center"}
|
||||
fontWeight={600}
|
||||
className="payment_discount-price"
|
||||
noSelect
|
||||
>
|
||||
{price}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<Trans t={t} i18nKey="TotalPricePerMonth" ns="Payments">
|
||||
""
|
||||
{isNewPrice ? (
|
||||
<ColorTheme {...textProp} themeId={ThemeType.Text}>
|
||||
{{ price }}
|
||||
</ColorTheme>
|
||||
) : (
|
||||
<Text {...textProp}> {{ price }}</Text>
|
||||
)}
|
||||
<Text
|
||||
as="span"
|
||||
fontWeight={600}
|
||||
fontSize="16px"
|
||||
className="payment_price_month-text"
|
||||
noSelect
|
||||
>
|
||||
/month
|
||||
</Text>
|
||||
</Trans>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, payments }) => {
|
||||
const { paymentQuotasStore } = auth;
|
||||
|
||||
const { totalPrice } = payments;
|
||||
|
||||
const { planCost } = paymentQuotasStore;
|
||||
return {
|
||||
totalPrice,
|
||||
currencySymbol: planCost.currencySymbol,
|
||||
};
|
||||
})(observer(TotalPrice));
|
||||
@ -1,70 +1,20 @@
|
||||
import React from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import { Trans } from "react-i18next";
|
||||
import Text from "@docspace/components/text";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { smallTablet } from "@docspace/components/utils/device";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
max-width: 272px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media ${smallTablet} {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.payment_price_total-price {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 65px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.payment_price_description,
|
||||
.payment_price_price-text,
|
||||
.total-tariff_description {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.payment_price_description {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.total-tariff_description {
|
||||
margin: auto;
|
||||
}
|
||||
.payment_price_month-text {
|
||||
margin: auto 0;
|
||||
margin-bottom: 9px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.payment_price_month-text,
|
||||
.payment_price_price-text {
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
css`
|
||||
color: ${props.theme.client.settings.payment.priceContainer
|
||||
.disableColor};
|
||||
`};
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
import TotalPrice from "./TotalPrice";
|
||||
import { StyledTotalTariff } from "../StyledComponent";
|
||||
|
||||
const TotalTariffContainer = ({
|
||||
t,
|
||||
maxAvailableManagersCount,
|
||||
isDisabled,
|
||||
theme,
|
||||
totalPrice,
|
||||
isNeedRequest,
|
||||
currencySymbol,
|
||||
}) => {
|
||||
|
||||
|
||||
return (
|
||||
<StyledBody isDisabled={isDisabled} theme={theme}>
|
||||
<StyledTotalTariff isDisabled={isDisabled}>
|
||||
<div className="payment_price_total-price">
|
||||
{isNeedRequest ? (
|
||||
<Text
|
||||
@ -79,62 +29,18 @@ const TotalTariffContainer = ({
|
||||
</Trans>
|
||||
</Text>
|
||||
) : (
|
||||
<>
|
||||
<Trans t={t} i18nKey="TotalPricePerMonth" ns="Payments">
|
||||
""
|
||||
<Text
|
||||
fontSize="48px"
|
||||
as="span"
|
||||
textAlign={"center"}
|
||||
fontWeight={600}
|
||||
className="payment_price_price-text"
|
||||
noSelect
|
||||
>
|
||||
{{ currencySymbol }}
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="48px"
|
||||
as="span"
|
||||
fontWeight={600}
|
||||
className="payment_price_price-text"
|
||||
noSelect
|
||||
>
|
||||
{{ price: totalPrice }}
|
||||
</Text>
|
||||
<Text
|
||||
as="span"
|
||||
fontWeight={600}
|
||||
fontSize="16px"
|
||||
className="payment_price_month-text"
|
||||
noSelect
|
||||
>
|
||||
/month
|
||||
</Text>
|
||||
</Trans>
|
||||
</>
|
||||
<TotalPrice t={t} />
|
||||
)}
|
||||
</div>
|
||||
</StyledBody>
|
||||
</StyledTotalTariff>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, payments }) => {
|
||||
const { paymentQuotasStore } = auth;
|
||||
const { theme } = auth.settingsStore;
|
||||
const {
|
||||
isLoading,
|
||||
totalPrice,
|
||||
isNeedRequest,
|
||||
maxAvailableManagersCount,
|
||||
} = payments;
|
||||
export default inject(({ payments }) => {
|
||||
const { isNeedRequest, maxAvailableManagersCount } = payments;
|
||||
|
||||
const { planCost } = paymentQuotasStore;
|
||||
return {
|
||||
theme,
|
||||
totalPrice,
|
||||
isLoading,
|
||||
isNeedRequest,
|
||||
maxAvailableManagersCount,
|
||||
currencySymbol: planCost.currencySymbol,
|
||||
};
|
||||
})(observer(TotalTariffContainer));
|
||||
|
||||
@ -5,7 +5,6 @@ import styled from "styled-components";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
import DowngradePlanButtonContainer from "./DowngradePlanButtonContainer";
|
||||
import api from "@docspace/common/api";
|
||||
import { Trans } from "react-i18next";
|
||||
import { updatePayment } from "@docspace/common/api/portal";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
@ -199,7 +198,6 @@ export default inject(({ auth, payments }) => {
|
||||
const {
|
||||
setIsLoading,
|
||||
paymentLink,
|
||||
isNeedRequest,
|
||||
isLoading,
|
||||
managersCount,
|
||||
isLessCountThanAcceptable,
|
||||
@ -213,7 +211,6 @@ export default inject(({ auth, payments }) => {
|
||||
isAlreadyPaid,
|
||||
setIsLoading,
|
||||
paymentLink,
|
||||
isNeedRequest,
|
||||
isLoading,
|
||||
managersCount,
|
||||
maxCountManagersByQuota,
|
||||
|
||||
@ -50,8 +50,8 @@ class PaymentStore {
|
||||
}
|
||||
|
||||
setIsInitPaymentPage = (value) => {
|
||||
this.isInitPaymentPage = value
|
||||
}
|
||||
this.isInitPaymentPage = value;
|
||||
};
|
||||
|
||||
setIsUpdatingBasicSettings = (isUpdatingBasicSettings) => {
|
||||
this.isUpdatingBasicSettings = isUpdatingBasicSettings;
|
||||
@ -89,11 +89,8 @@ class PaymentStore {
|
||||
return;
|
||||
}
|
||||
|
||||
const {
|
||||
paymentQuotasStore,
|
||||
currentTariffStatusStore,
|
||||
currentQuotaStore,
|
||||
} = authStore;
|
||||
const { paymentQuotasStore, currentTariffStatusStore, currentQuotaStore } =
|
||||
authStore;
|
||||
const { setPayerInfo } = currentTariffStatusStore;
|
||||
const { addedManagersCount } = currentQuotaStore;
|
||||
const { setPortalPaymentQuotas } = paymentQuotasStore;
|
||||
@ -295,11 +292,8 @@ class PaymentStore {
|
||||
};
|
||||
setBasicTariffContainer = () => {
|
||||
const { currentQuotaStore } = authStore;
|
||||
const {
|
||||
currentPlanCost,
|
||||
maxCountManagersByQuota,
|
||||
addedManagersCount,
|
||||
} = currentQuotaStore;
|
||||
const { currentPlanCost, maxCountManagersByQuota, addedManagersCount } =
|
||||
currentQuotaStore;
|
||||
const currentTotalPrice = currentPlanCost.value;
|
||||
|
||||
if (this.isAlreadyPaid) {
|
||||
@ -392,10 +386,8 @@ class PaymentStore {
|
||||
|
||||
setRangeStepByQuota = () => {
|
||||
const { paymentQuotasStore } = authStore;
|
||||
const {
|
||||
stepAddingQuotaManagers,
|
||||
stepAddingQuotaTotalSize,
|
||||
} = paymentQuotasStore;
|
||||
const { stepAddingQuotaManagers, stepAddingQuotaTotalSize } =
|
||||
paymentQuotasStore;
|
||||
|
||||
this.stepByQuotaForManager = stepAddingQuotaManagers;
|
||||
this.minAvailableManagersValue = this.stepByQuotaForManager;
|
||||
|
||||
@ -31,6 +31,7 @@ import {
|
||||
IndicatorLoaderTheme,
|
||||
ProgressTheme,
|
||||
MobileProgressBarTheme,
|
||||
TextTheme,
|
||||
} from "./styled";
|
||||
import { ThemeType } from "./constants";
|
||||
|
||||
@ -310,6 +311,15 @@ const ColorTheme = forwardRef(
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.Text: {
|
||||
return (
|
||||
<TextTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@ -29,4 +29,5 @@ export const ThemeType = {
|
||||
IndicatorLoader: "indicatorLoader",
|
||||
Progress: "progress",
|
||||
MobileProgressBar: "mobileProgressBar",
|
||||
Text: "text",
|
||||
};
|
||||
|
||||
@ -57,3 +57,5 @@ export { default as IndicatorLoaderTheme } from "./indicatorLoader";
|
||||
export { default as ProgressTheme } from "./progress";
|
||||
|
||||
export { default as MobileProgressBarTheme } from "./mobileProgressBar";
|
||||
|
||||
export { default as TextTheme } from "./text";
|
||||
|
||||
13
packages/components/ColorTheme/styled/text.js
Normal file
13
packages/components/ColorTheme/styled/text.js
Normal file
@ -0,0 +1,13 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import StyledText from "@docspace/components/text/styled-text";
|
||||
import Text from "@docspace/components/text";
|
||||
|
||||
const PureText = (props) => <Text {...props} />;
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
color: ${$currentColorScheme.main.accent};
|
||||
`;
|
||||
|
||||
export default styled(StyledText)(getDefaultStyles);
|
||||
@ -7,7 +7,7 @@ const Heading = ({ level, color, className, ...rest }) => {
|
||||
<StyledHeading
|
||||
className={`${className} not-selectable`}
|
||||
as={`h${level}`}
|
||||
colorProp={color}
|
||||
color={color}
|
||||
dir="auto"
|
||||
{...rest}
|
||||
></StyledHeading>
|
||||
|
||||
@ -5,8 +5,7 @@ const commonTextStyles = css`
|
||||
font-family: ${(props) => props.theme.fontFamily};
|
||||
text-align: ${(props) =>
|
||||
getCorrectTextAlign(props.textAlign, props.theme.interfaceDirection)};
|
||||
color: ${(props) =>
|
||||
props.colorProp ? props.colorProp : props.theme.text.color};
|
||||
color: ${(props) => (props.color ? props.color : props.theme.text.color)};
|
||||
${(props) =>
|
||||
props.truncate &&
|
||||
css`
|
||||
|
||||
@ -2,28 +2,8 @@ import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import StyledText from "./styled-text";
|
||||
|
||||
const Text = ({
|
||||
title,
|
||||
tag,
|
||||
as,
|
||||
fontSize,
|
||||
fontWeight,
|
||||
color,
|
||||
textAlign,
|
||||
...rest
|
||||
}) => {
|
||||
return (
|
||||
<StyledText
|
||||
fontSizeProp={fontSize}
|
||||
fontWeightProp={fontWeight}
|
||||
colorProp={color}
|
||||
textAlign={textAlign}
|
||||
as={!as && tag ? tag : as}
|
||||
title={title}
|
||||
dir="auto"
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
const Text = ({ tag, as, ...rest }) => {
|
||||
return <StyledText as={!as && tag ? tag : as} dir="auto" {...rest} />;
|
||||
};
|
||||
|
||||
Text.propTypes = {
|
||||
|
||||
@ -3,12 +3,12 @@ import commonTextStyles from "./common-text-styles";
|
||||
import Base from "../themes/base";
|
||||
import NoUserSelect from "@docspace/components/utils/commonStyles";
|
||||
const styleCss = css`
|
||||
font-size: ${(props) => props.fontSizeProp};
|
||||
font-size: ${(props) => props.fontSize};
|
||||
outline: 0 !important;
|
||||
margin: 0;
|
||||
font-weight: ${(props) =>
|
||||
props.fontWeightProp
|
||||
? props.fontWeightProp
|
||||
props.fontWeight
|
||||
? props.fontWeight
|
||||
: props.isBold == true
|
||||
? 700
|
||||
: props.theme.text.fontWeight};
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Güzəşt müddəti bitməzdən əvvəl ödəniş etdiyinizə əmin olun.",
|
||||
"PaymentsTitle": "Ödənişlər",
|
||||
"People": "İnsanlar",
|
||||
"PerUserMonth": "Admin/ekspert istifadəçi /aylıq <1>{{currencySymbol}}</1><1>{{price}}</1>",
|
||||
"PerUserMonth": "Admin/ekspert istifadəçi /aylıq <1>{{oldPrice}}</1><2>{{price}}</2>",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Nömrə",
|
||||
"Plugin": "Plugin",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Уверете се, че сте извършили плащането преди изтичането на гратисния период.",
|
||||
"PaymentsTitle": "Плащания",
|
||||
"People": "Хора",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> на администратор/опитен потребител /месец",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> на администратор/опитен потребител /месец",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Телефон",
|
||||
"Plugin": "Плъгин",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Ujistěte se, že jste platbu provedli před uplynutím doby odkladu.",
|
||||
"PaymentsTitle": "Platby",
|
||||
"People": "Lidé",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> za administrátora/pověřeného uživatele /měsíc",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> za administrátora/pověřeného uživatele /měsíc",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Telefon",
|
||||
"Plugin": "Zásuvný modul",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Stellen Sie sicher, dass die Zahlung vor Ablauf der bezahlten Frist erfolgt.",
|
||||
"PaymentsTitle": "Zahlungen",
|
||||
"People": "Personen",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> pro Admin/Power-Benutzer/Monat",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> pro Admin/Power-Benutzer/Monat",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Telefon",
|
||||
"Plugin": "Plugin",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Βεβαιωθείτε ότι έχετε πραγματοποιήσει την πληρωμή πριν από τη λήξη της περιόδου χάριτος.",
|
||||
"PaymentsTitle": "Πληρωμές",
|
||||
"People": "Άτομα",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> ανά διαχειριστή/χρήστη ισχύος /μήνα",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> ανά διαχειριστή/χρήστη ισχύος /μήνα",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Τηλέφωνο",
|
||||
"Plugin": "Πρόσθετο",
|
||||
|
||||
@ -188,7 +188,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Make sure to make payment before the grace period is due.",
|
||||
"PaymentsTitle": "Payments",
|
||||
"People": "People",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> per admin/power user /month",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> per admin/power user /month",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Phone",
|
||||
"Plugin": "Plugin",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Asegúrese de realizar el pago antes de que expire el periodo de gracia.",
|
||||
"PaymentsTitle": "Pagos",
|
||||
"People": "Personas",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> por administrador/usuario avanzado/mes",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> por administrador/usuario avanzado/mes",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Teléfono",
|
||||
"Plugin": "Plugin",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Suorita maksu ennen kuin lisäaika päättyy.",
|
||||
"PaymentsTitle": "Maksut",
|
||||
"People": "Ihmiset",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> per ylläpitäjä/tehokäyttäjä /kuukausi",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> per ylläpitäjä/tehokäyttäjä /kuukausi",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Puhelin",
|
||||
"Plugin": "Kytkentä",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Veillez à effectuer le paiement avant l’expiration de la période de grâce.",
|
||||
"PaymentsTitle": "Paiements",
|
||||
"People": "Personnes",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> par administrateur/utilisateur avancé /mois",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> par administrateur/utilisateur avancé /mois",
|
||||
"Petabyte": "Po",
|
||||
"Phone": "Téléphone",
|
||||
"Plugin": "Module complémentaire",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Համոզվեք, որ վճարում եք արտոնյալ ժամկետի ավարտից առաջ:",
|
||||
"PaymentsTitle": "Վճարումներ",
|
||||
"People": "Մարդիկ",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> մեկ ադմինիստրատորի / փորձառու օգտագործողի / ամսվա համար",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> մեկ ադմինիստրատորի / փորձառու օգտագործողի / ամսվա համար",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Հեռախոս",
|
||||
"Plugin": "Միացնել",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Assicurati di effettuare il pagamento prima della scadenza del periodo di prova.",
|
||||
"PaymentsTitle": "Pagamenti",
|
||||
"People": "Persone",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> per amministratore/utente esperto /mese",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> per amministratore/utente esperto /mese",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Telefono",
|
||||
"Plugin": "Plugin",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "猶予期間内に必ずお支払いください。",
|
||||
"PaymentsTitle": "お支払い",
|
||||
"People": "方々",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> 管理者 / パワーユザーあたり / 月額",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> 管理者 / パワーユザーあたり / 月額",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "電話",
|
||||
"Plugin": "プラグイン",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "유예 기간이 만료되기 전에 결제를 완료하세요.",
|
||||
"PaymentsTitle": "결제",
|
||||
"People": "사람들",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1>/관리자, 고급 사용자, 월",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2>/관리자, 고급 사용자, 월",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "휴대전화",
|
||||
"Plugin": "플러그인",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "ໃຫ້ແນ່ໃຈວ່າຈ່າຍເງິນກ່ອນໄລຍະເວລາຜ່ອນຜັນ.",
|
||||
"PaymentsTitle": "ການຊຳລະເງິນ",
|
||||
"People": "ຄົນ",
|
||||
"PerUserMonth": "<1>{{ currencySymbol }}</1><1>{{price}}</1> ຕໍ່ຜູ້ໃຊ້ admin/ເດືອນ ຫຼື ຜູ້ໃຊ້ທົ່ວໄປ/ຕໍ່ເດືອນ",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> ຕໍ່ຜູ້ໃຊ້ admin/ເດືອນ ຫຼື ຜູ້ໃຊ້ທົ່ວໄປ/ຕໍ່ເດືອນ",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "ໂທລະສັບ",
|
||||
"Plugin": "ປລັກອິນ",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Pārliecinieties, ka veicat maksājumu pirms termiņa pagarinājuma perioda beigām.",
|
||||
"PaymentsTitle": "Maksājumi",
|
||||
"People": "Cilvēki",
|
||||
"PerUserMonth": "<1>{{currencySymbol}} </1><1>{{price}} </1> vienam administratoram/prasmīgam lietotājam /mēnesī",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> vienam administratoram/prasmīgam lietotājam /mēnesī",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Tālrunis",
|
||||
"Plugin": "Spraudnis",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Zorg ervoor dat u betaalt voordat de wachtperiode is verstreken.",
|
||||
"PaymentsTitle": "Betalingen",
|
||||
"People": "Mensen",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> per beheerder/power user /maand",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> per beheerder/power user /maand",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Telefoon",
|
||||
"Plugin": "Plug-in",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Pamiętaj, aby dokonać płatności przed upływem okresu prolongaty.",
|
||||
"PaymentsTitle": "Płatności",
|
||||
"People": "Ludzie",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> na administratora/użytkownika z większą liczbą uprawnień /miesięcznie",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> na administratora/użytkownika z większą liczbą uprawnień /miesięcznie",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Telefon",
|
||||
"Plugin": "Wtyczka",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Certifique-se de fazer o pagamento antes do vencimento do período de carência.",
|
||||
"PaymentsTitle": "Pagamentos",
|
||||
"People": "Pessoas",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> por administrador/usuário avançado/mês",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> por administrador/usuário avançado/mês",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Telefone",
|
||||
"Plugin": "Plugin",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Certifique-se que faz o pagamento antes do período de tolerância terminar.",
|
||||
"PaymentsTitle": "Pagamentos",
|
||||
"People": "Pessoas",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> por administrador/utilizadores com poder utilizador /mês",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> por administrador/utilizadores com poder utilizador /mês",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Telemóvel",
|
||||
"Plugin": "Plugin",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Aveţi grijă să efectuaţi plata înainte de expirarea perioadei de graţie.",
|
||||
"PaymentsTitle": "Plăți",
|
||||
"People": "Persoane",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> per administrator/utilizator avansat /lună",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> per administrator/utilizator avansat /lună",
|
||||
"Petabyte": "PO",
|
||||
"Phone": "Telefon",
|
||||
"Plugin": "Plugin",
|
||||
|
||||
@ -186,7 +186,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Обязательно произведите оплату до окончания льготного периода.",
|
||||
"PaymentsTitle": "Платежи",
|
||||
"People": "Люди",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> за администратора/опытного пользователя /месяц",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> за администратора/опытного пользователя /месяц",
|
||||
"Petabyte": "Пб",
|
||||
"Phone": "Телефон",
|
||||
"Plugin": "Плагин",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Uistite sa, že ste platbu vykonali pred uplynutím doby odkladu platby.",
|
||||
"PaymentsTitle": "Platby",
|
||||
"People": "Ľudia",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> za administrátora/mesiac",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> za administrátora/mesiac",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Telefón",
|
||||
"Plugin": "Plugin",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Prepričajte se, da ste izvedli plačilo pred iztekom odložnega obdobja.",
|
||||
"PaymentsTitle": "Plačila",
|
||||
"People": "Ljudje",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> na skrbnika/naprednega uporabnika/mesec",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> na skrbnika/naprednega uporabnika/mesec",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Telefon",
|
||||
"Plugin": "Vtičnik",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Ödemesiz dönem sona ermeden önce ödeme yaptığınızdan emin olun.",
|
||||
"PaymentsTitle": "Ödemeler",
|
||||
"People": "Kişiler",
|
||||
"PerUserMonth": "Yönetici/uzman kullanıcı /ay başına <1>{{price}}</1><1>{{currencySymbol}}</1>",
|
||||
"PerUserMonth": "Yönetici/uzman kullanıcı /ay başına <1>{{oldPrice}}</1><2>{{price}}</2>",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Telefon",
|
||||
"Plugin": "Eklenti",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Обов’язково здійсніть платіж до закінчення пільгового періоду.",
|
||||
"PaymentsTitle": "Платежі",
|
||||
"People": "Люди",
|
||||
"PerUserMonth": "<1>{{price}}</1><1>{{currencySymbol}}</1> за адміністратора / досвідченого користувача на місяць",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> за адміністратора / досвідченого користувача на місяць",
|
||||
"Petabyte": "ПБ",
|
||||
"Phone": "Телефон",
|
||||
"Plugin": "Плагін",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "Hãy đảm bảo thực hiện thanh toán trước khi hết thời gian gia hạn.",
|
||||
"PaymentsTitle": "Thanh toán",
|
||||
"People": "Người",
|
||||
"PerUserMonth": "<1>{{price}} </1><1>{{currencySymbol}} </1> mỗi quản trị viên/người dùng cấp cao/tháng",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> mỗi quản trị viên/người dùng cấp cao/tháng",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "Điện thoại",
|
||||
"Plugin": "Plugin",
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
"PayBeforeTheEndGracePeriod": "请确保在宽限期到期前付款。",
|
||||
"PaymentsTitle": "付款",
|
||||
"People": "人脉",
|
||||
"PerUserMonth": "<1>{{currencySymbol}}</1><1>{{price}}</1> 每个管理员/高级用户/月",
|
||||
"PerUserMonth": "<1>{{oldPrice}}</1><2>{{price}}</2> 每个管理员/高级用户/月",
|
||||
"Petabyte": "PB",
|
||||
"Phone": "电话",
|
||||
"Plugin": "插件",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user