feat: Add generic ServiceUnavailable view (#2379)

packages/checkout/widgets-lib/src/components/Hero/SanctionsHero.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable max-len */
+import { Box } from '@biom3/react';
+import { heroBackGroundStyles, heroImageStyles } from './HeroImageStyles';
+
+export function SanctionsHero() {
+  return (
+    <Box
+      sx={{
+        ...heroBackGroundStyles,
+      }}
+    >
+      <Box sx={heroImageStyles}>
+        <svg width="430" height="240" viewBox="0 0 430 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g clipPath="url(#clip0_5560_124991)">
+            <path d="M164.396 203.725L200.332 224.446C207.009 228.299 215.237 228.299 221.915 224.446L310.418 173.411L263.691 146.466L164.396 203.725Z" fill="black" stroke="white" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M310.425 180.148L224.619 229.626C217.166 233.924 205.903 234.389 199.448 230.671L129.358 190.252C122.903 186.534 123.712 180.033 131.165 175.735L216.971 126.256H216.984C221.854 123.447 225.799 116.65 225.799 111.066C225.799 108.29 224.822 106.343 223.243 105.427L316.697 159.298C318.275 160.215 319.253 162.168 319.253 164.937C319.253 170.521 315.301 177.332 310.418 180.148" fill="black" />
+            <path d="M310.425 180.148L224.619 229.626C217.166 233.924 205.903 234.389 199.448 230.671L129.358 190.252C122.903 186.534 123.712 180.033 131.165 175.735L216.971 126.256H216.984C221.854 123.447 225.799 116.65 225.799 111.066C225.799 108.29 224.822 106.343 223.243 105.427L316.697 159.298C318.275 160.215 319.253 162.168 319.253 164.937C319.253 170.521 315.301 177.332 310.418 180.148" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M216.984 126.27C221.854 123.454 225.8 116.65 225.8 111.072C225.8 108.297 224.822 106.35 223.243 105.434L316.697 159.305C318.276 160.221 319.254 162.175 319.254 164.943C319.254 170.528 315.301 177.338 310.418 180.154L216.978 126.27H216.984Z" fill="black" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M246.168 143.097L160.343 192.569C152.89 196.867 152.08 203.361 158.535 207.086L199.435 230.671C205.889 234.389 217.153 233.924 224.606 229.626L310.411 180.148L246.162 143.097H246.168Z" fill="white" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M200.332 224.453L133.398 185.853C131.597 184.816 131.597 182.222 133.398 181.185L228.646 126.256L310.418 173.411L221.915 224.446C215.237 228.299 207.009 228.299 200.332 224.446V224.453Z" fill="white" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M200.332 217.716L133.398 179.117C131.597 178.079 131.597 175.486 133.398 174.449L228.646 119.52L310.418 166.675L221.915 217.71C215.237 221.563 207.009 221.563 200.332 217.71V217.716Z" fill="white" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M200.332 210.98L133.398 172.38C131.597 171.343 131.597 168.75 133.398 167.712L228.646 112.783L310.418 159.938L221.915 210.973C215.237 214.827 207.009 214.827 200.332 210.973V210.98Z" fill="white" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M211.123 163.307L263.691 132.993L310.418 159.938L221.915 210.973C218.576 212.9 214.846 213.863 211.123 213.863" fill="black" />
+            <path d="M211.123 163.307L263.691 132.993L310.418 159.938L221.915 210.973C218.576 212.9 214.846 213.863 211.123 213.863" stroke="white" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M176.078 217.198C171.202 220.014 167.242 217.764 167.242 212.179L176.078 217.198Z" fill="white" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M223.243 105.427C221.645 104.498 219.419 104.632 216.964 106.047L136.999 152.158C129.547 156.456 128.737 162.949 135.192 166.675L205.282 207.093C211.737 210.812 223.001 210.347 230.453 206.049L310.418 159.938C312.873 158.524 315.099 158.389 316.697 159.319L223.243 105.427Z" fill="white" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M167.242 212.199C167.242 206.615 171.195 199.804 176.078 196.989L211.123 176.8H211.137C217.544 173.115 217.51 167.099 211.049 163.374C204.587 159.649 194.167 159.628 187.753 163.327L152.708 183.516C147.831 186.332 143.872 193.135 143.872 198.727C143.872 201.522 144.864 203.476 146.462 204.385L169.826 217.878C168.227 216.969 167.236 215.008 167.236 212.22" fill="white" />
+            <path d="M167.242 212.199C167.242 206.615 171.195 199.804 176.078 196.989L211.123 176.8H211.137C217.544 173.115 217.51 167.099 211.049 163.374C204.587 159.649 194.167 159.628 187.753 163.327L152.708 183.516C147.831 186.332 143.872 193.135 143.872 198.727C143.872 201.522 144.864 203.476 146.462 204.385L169.826 217.878C168.227 216.969 167.236 215.008 167.236 212.22" stroke="black" strokeWidth="0.770847" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M176.078 217.238C171.201 220.054 167.242 217.804 167.242 212.22L176.078 217.238Z" fill="black" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M193.56 166.655C190.336 168.514 190.356 171.538 193.6 173.418C196.851 175.291 202.099 175.304 205.323 173.445C208.547 171.586 208.526 168.561 205.282 166.681C202.038 164.802 196.784 164.795 193.56 166.655Z" fill="white" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M135.192 166.675L133.398 167.712C131.597 168.75 131.597 171.343 133.398 172.38L152.714 183.522L158.555 180.154L135.185 166.681L135.192 166.675Z" fill="black" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M168.308 216.423C168.713 217.05 169.232 217.535 169.832 217.878C169.232 217.535 168.72 217.05 168.308 216.423Z" fill="black" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M152.714 183.516L135.192 173.411L133.398 174.449C131.597 175.486 131.597 178.079 133.398 179.117L148.148 187.625C149.484 185.927 151.042 184.486 152.714 183.522V183.516Z" fill="black" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M135.192 180.148L133.398 181.185C131.597 182.222 131.597 184.816 133.398 185.853L145.201 192.664C145.936 190.872 146.948 189.147 148.142 187.625L135.185 180.154L135.192 180.148Z" fill="black" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M181.919 193.62L205.282 207.093C211.737 210.812 223 210.347 230.453 206.049L221.915 210.973C215.237 214.827 207.009 214.827 200.332 210.973L176.078 196.989L181.919 193.62Z" fill="black" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M171.512 201.091C172.847 199.393 174.405 197.952 176.078 196.989L205.282 213.83C211.737 217.548 223 217.083 230.453 212.785L221.915 217.71C215.237 221.563 207.009 221.563 200.332 217.71L171.512 201.091Z" fill="black" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M205.262 220.566C211.717 224.284 222.98 223.82 230.433 219.522L221.894 224.446C215.217 228.299 206.989 228.299 200.312 224.446L168.544 206.13C169.279 204.338 170.291 202.613 171.485 201.091L205.255 220.566H205.262Z" fill="black" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M205.262 227.316L168.557 206.15C167.741 208.137 167.263 210.192 167.249 212.105L199.441 230.671C205.896 234.389 217.159 233.924 224.612 229.626L230.433 226.272C222.98 230.57 211.717 231.034 205.262 227.316Z" fill="black" stroke="black" strokeWidth="0.770847" strokeLinejoin="round" />
+            <path d="M258.027 174.397V182.105L311.431 151.271V143.563L258.027 174.397Z" fill="#FF637F" stroke="#0D0D0D" strokeWidth="0.770847" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M238 132V139.708L258.027 182.105V174.397L238 132Z" fill="#0D0D0D" stroke="#0D0D0D" strokeWidth="0.770847" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M238 132L258.027 174.397L311.431 143.563L238 132Z" fill="#FF637F" stroke="#0D0D0D" strokeWidth="0.770847" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M248.846 141.154L265.538 150.789L270.545 147.899L253.852 138.263L248.846 141.154Z" fill="#0D0D0D" stroke="#0D0D0D" strokeWidth="0.770847" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M268.876 152.717L273.883 149.826L278.89 152.717L273.883 155.607L268.876 152.717Z" fill="#0D0D0D" stroke="#0D0D0D" strokeWidth="0.770847" strokeLinecap="round" strokeLinejoin="round" />
+          </g>
+          <defs>
+            <clipPath id="clip0_5560_124991">
+              <rect width="430" height="240" fill="white" />
+            </clipPath>
+          </defs>
+        </svg>
+      </Box>
+    </Box>
+  );
+}

packages/checkout/widgets-lib/src/locales/en.json

@@ -80,6 +80,10 @@
         "addTokens": "Please add tokens another way"
       }
     },
+    "SERVICE_UNAVAILABLE_SANCTIONS_ERROR_VIEW": {
+      "heading": "This service is not available",
+      "actionText": "Go back"
+    },
     "LOADING_VIEW": {
       "text": "Loading"
     },

packages/checkout/widgets-lib/src/locales/ja.json

@@ -84,6 +84,10 @@
         "addTokens": "別の方法でトークンを追加してください。"
       }
     },
+    "SERVICE_UNAVAILABLE_SANCTIONS_ERROR_VIEW": {
+      "heading": "このサービスは利用できません。",
+      "actionText": "戻る"
+    },
     "LOADING_VIEW": {
       "text": "読み込み中"
     },

packages/checkout/widgets-lib/src/locales/ko.json

@@ -80,6 +80,10 @@
         "addTokens": "다른 방법으로 토큰을 추가해 주세요."
       }
     },
+    "SERVICE_UNAVAILABLE_SANCTIONS_ERROR_VIEW": {
+      "heading": "이 서비스는 제공되지 않습니다.",
+      "actionText": "돌아가기"
+    },
     "LOADING_VIEW": {
       "text": "로딩 중"
     },

packages/checkout/widgets-lib/src/locales/zh.json

@@ -80,6 +80,10 @@
         "addTokens": "请通过其他方式添加代币。"
       }
     },
+    "SERVICE_UNAVAILABLE_SANCTIONS_ERROR_VIEW": {
+      "heading": "此服务不可用。",
+      "actionText": "返回"
+    },
     "LOADING_VIEW": {
       "text": "加载中"
     },